CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 29 19:18:03

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil > Forum >

onmouseover+map+javascript?

Poser une question dans le forum ou lancer une discussion

onmouseover+map+javascript?

mardi 27 mai 2008 à 09:41:55 | onmouseover+map+javascript?

fulltrip

18 msg

25 msg CS

Bonjour,

Voilà mon idée était de de changer une image au passage de la souris.
J'ai réalisé ceci a l'aide de la fonction onmouseover, mais j'ai voulu rajouter sur l'image quelques liens que j'ai créé à l'aide de MAP.

Mais j'ai un petit problème, c'est lorsque je passe la souris sur ces liens, l'image revient à l'initial, alors qu'elle devrait rester pareil.
En fait, cela réagit comme si la souris quitter l'image, et je ne comprends pas.
Je n'ai pas envi d'utiliser de rollover si cette solution que vous me proposez.

Voici mon code:

<img src="images/traceurrealisations1.jpg" border=0 width="386px" height="550px" usemap="#Map" alt=""

onMouseOver="this.src='images/traceurrealisations.jpg';" onMouseOut="this.src='images/traceurrealisations1.jpg';">

<map name="Map" id="Map">

<area shape="rect" coords="317,517,372,538" href="index.html" >

<area shape="rect" coords="51,178,67,194" href="#">

<area shape="rect" coords="319,382,337,398" href="#" >

</map>

je crois qu'il est un peu il est un peu normal que cela réagisse comme tel, mais si quelqu'un pouvait me guider car je pense qu'il faut utiliser du javascript pour que lorsque la souris passe sur le lien, l'image reste pareil.

Merci pour tout éventuel réponse!

Cordialement.

mardi 27 mai 2008 à 10:25:33 | Re : onmouseover+map+javascript?

bultez

11958 msg

13348 msg CS

Bonjour,

    ajouter         onmouseout="event.cancelBubble = true;"   sur les balises area
    ( exclusif IE, si tu veux adapetr pour les autres navigateurs :   c'est expliqué ici )

Cordialement

Bul [mon Site] [M'écrire]

mardi 27 mai 2008 à 13:00:20 | Re : onmouseover+map+javascript?

bultez

11958 msg

13348 msg CS

euh... ça ne convient pas ce que j'ai donné
ou tu n'arrives pas à généraliser pour tous les navigateurs ?

Cordialement

Bul [mon Site] [M'écrire]

[vous aussi, donnez une adresse où vous joindre, sans craindre les spams]

mardi 27 mai 2008 à 16:14:31 | Re : onmouseover+map+javascript?

fulltrip

18 msg

25 msg CS

Désolé de ne pas t'avoir encore répondu, j'ai travaillé sur une autre page en attendant, merci pour ta réponse, je vais essayer ce que tu m'as donnée!
Merci encore à toi, je te tiens au courant!

mardi 27 mai 2008 à 16:24:17 | Re : onmouseover+map+javascript?

fulltrip

18 msg

25 msg CS

En fait, cela marchait déjà sur Internet explorer, même sans ce que tu m'as donné! par contre je ne trouves pas pour firefox avec le fichier que tu m'as passé!
Merci de ton aide en tout cas!

mardi 27 mai 2008 à 16:39:41 | Re : onmouseover+map+javascript?

bultez

11958 msg

13348 msg CS

euh... copié/collé de l'exemple :

<script type="text/javascript">
   function noprog(col,evt)
   { if (window.event)
             evt.cancelBubble = true;
      else evt.stopPropagation();
      alert("click sur td:"+col.innerHTML);
   }
</script>
<table border=2>
   <tr onclick="alert('onclick tr');">
      <td onclick="alert('click sur un TD');">le onclick sur le<br />TR va être déclenché</td>
      <td onclick="noprog(this,event);">ici par contre, le onclick<br />du tr est invalidé</td></tr>
</table>

    tu sauras adapter....

Cordialement

Bul [mon Site] [M'écrire]

[vous aussi, donnez une adresse où vous joindre, sans craindre les spams]

mardi 27 mai 2008 à 17:07:08 | Re : onmouseover+map+javascript?

fulltrip

18 msg

25 msg CS

Ben dis-donc, je croyais que ça allait être plus évident que ça!
Ca n'a aucun effet, je sais pas pourquoi voilà le code (en gras ce qui est rajouté):

<script type="text/javascript">
   function noprog(col,evt)
   { if (window.event)
             evt.cancelBubble = true;
      else evt.stopPropagation();
   }
</script>

<img src="images/traceurrealisations1.jpg" border=0 width="386px" height="550px" usemap="#Map" alt=""
                onMouseOver="this.src='images/traceurrealisations.jpg';"
                onMouseOut="this.src='images/traceurrealisations1.jpg';">

<map name="Map" id="Map">
                <area onMouseout="noprog(this,event);" shape="rect" coords="314,517,371,538" href="accueil.html" >
                <area onmouseout="noprog(this,event);" shape="circle" coords="57,138,15" href="#">
                <area onMouseout="noprog(this,event);" shape="circle" coords="331,347,15" href="#" >
                </map>

J'ai aussi essayé avec onmouseout="event.cancelBubble = true;", mais je crois que ça sert à rien vu qu'il a le script juste au dessus.

mardi 27 mai 2008 à 18:37:36 | Re : onmouseover+map+javascript?

bultez

11958 msg

13348 msg CS

avec IE ça baigne...
avec FF aussi, si on met un alert !

    y'a bien un pro de FF qui va passer ici et nous dire pourquoi !
    ( au pied levé, comme ça, je ne vois pas ... )

<body>
<script type="text/javascript">
   function noprog(evt)
   { if (window.event)
                {    evt.cancelBubble=true;    }
      else     {    evt.stopPropagation();
                    alert('attendre');
                }
   }
</script>
<img     src="FRANCE.GIF" width=100% height=100% usemap="#Map"
        onmouseover="    this.ex=this.src;
                            this.src='images_3.jpg';"
        onmouseout="    this.src=this.ex;">
<map name="Map" id="Map">
    <area shape="rect" coords="317,517,372,538"
            onmouseout="noprog(event);" alt="un" href="index.html">
    <area shape="rect" coords="51,178,67,194"
            onmouseout="noprog(event);" alt="deux" href="#">
    <area shape="rect" coords="319,382,337,398"
            onmouseout="noprog(event);" alt="trois" href="#" >
</map>
</body>

mis des alt et "mes" images pour contrôler !

Cordialement

Bul [mon Site] [M'écrire]

mardi 27 mai 2008 à 18:58:24 | Re : onmouseover+map+javascript?

PetoleTeam

3281 msg

3318 msg CS

Bonjour,
cette solution n'est pas très élégante mais devrait marcher...

<-- pas d'evenement sur l'image mettre sur la MAP -->
<img name="IMG_1" src ="images/traceurrealisations1.jpg" border=0 width ="386px" height ="550px" usemap ="#Map" alt ="">
<map name="Map" id="Map">
  <area onMouseout ="document.images['IMG_1'].src ='images/traceurrealisations.jpg';" shape ="rect" coords ="314,517,371,538" href ="accueil.html">
  <area onMouseout ="document.images['IMG_1'].src ='images/traceurrealisations.jpg';" shape ="circle" coords ="57,138,15" href="#">
  <area onMouseout ="document.images['IMG_1'].src ='images/traceurrealisations.jpg';" shape ="circle" coords ="331,347,15" href="#" >

<area
  onmouseover = "document.images['IMG_1'].src='images/traceurrealisations.jpg';""
  onMouseOut = "document.images['IMG_1'].src='images/traceurrealisations1.jpg';"
  shape="rect" coords="0,0,386,550">
</map>

a tester quand même avec les différents navigateurs...
;O)

mardi 27 mai 2008 à 21:31:46 | Re : onmouseover+map+javascript?

fulltrip

18 msg

25 msg CS

Bon ben merci quand même pour votre coup de mains!
Mais les deux solutions que vous m'avez proposé ne marchent pas!

Peut-être qu'il ait impossible de procéder de cette manière!je ne sais pas!

Cette discussion est classée dans : javascript, image, souris, map, onmouseover

Répondre à ce message

Sujets en rapport avec ce message

afficher un menu ou une image sur passage de la souris [ par Prototype51 ] Bonjour à tous, Je suis en train de créer mon premier site, conçu principalement en PHP. Jusqu'à présent j'ai réussi à tout faire grâce à PHP, je n'ai changer le map [ par asmaa17 ] salut ,comment on peut changer le map d'un image et aussi l'evenement onmouseover de chaque area de ce map j'ai essayé ce code mais <img src="http://w Changer le Background image via onmouseover [ par dorian53 ] Bonjour,J'ai une question de NB mais je n'ai pas trouvé ma réponse :Comment changer d'image (et pas couleur comme on trouve partout) en background sur Scrollbar et déplacement d'une image avec la souris [ par cepekinio ] Bonjour,Contexte : appli web J2EE (JSP/JVScript/java) .J'ai réaliser une sorte de visionneuse de document(au format jpg) et je viens d'implémenter une Info bulle [ par tenced28 ] Bonjour!Je souhaiterai qu'apparaisse une petite fenetre lorque l'on passe la souris sur une image, fenetre donnant des informations sur cette image! J probleme listbox image [ par peter2010 ] Bonjour, j'ai des images stockés dans un fichier .js externe et j'aimerais les faire afficher sur ma page web, à l'aide du javascript, l'image affiché Javascript: Zoom avec mini image [ par belllangelo ] Bonjour, Je souhaiterai pouvoir reproduire l'effet de zoom avec mini image proposé à cette adresse: http://www.dakkadakka.com/core/gallery-viewimage. Faire apparaître une image avec un passage de souris [ par kouedic ] Bonjour,Je suis en train de réaliser un site internet et sur une page je souhaiterais faire l'application suivante : Le fait de passer la souris sur u Onmouseover multiple/afficher plusieurs images en n'en survolant une seule [ par Homonculus ] Bonjour et merci de vous être arrêtés, je débute et je suis en train de tenter de créer mon site. J'utilise un "MM_swapImage" qui me permet, au survo zones d'image qui change au passage de la souris et puis cliquable pour zoomer ... [ par Talboum ] Bonjour, Je tourne en rond et sollicite finalement votre aide ... [^^sad1] Je tente d'expliquer mon problème. J'ai une image avec 3 graphiques de t

Livres en rapport

Designing with JavaScript

JavaScript & DHTML Cookbook

Photoshop 7 Artistry

JavaScript

Tous les livres pour Javascript, Image, Souris, Map, Onmouseover

Nos sponsors

Derniers Blogs

POUR RAPPEL ! LES SPéCIFICATIONS DES PROTOCOLES OFFICE ET SHAREPOINT SONT DISPONIBLES SUR MSDN par neodante

JOYEUX ANNIVERSAIRE NIX par ebartsoft

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

Forum

RE : UTILISER UN .JS par jopop

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Application iphone et android - gestion contenu et version derivees-URGENT-REPUBLICATION
Budget : 5 000€
Creation espace client avec suivi de commande en temps reel
Budget : 800€
Creation d-une presentation dynamique avec Keynote
Budget : 5 000€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP