|
Titre: Image changeante sur passage de la souris Posté par: Jiao le 18 Avril 2009 à 13:36:05 Bonjour,
Je souhaiterais savoir s'il était possible de changer l'image que l'on affiche suivant la zone de l'image sur laquelle est la souris. En gros j'ai une image d'un plan défini en plusieurs zones et je voudrais qu'en fonction de la zone de cette image sur laquelle la souris passe je change l'image pour mettre une même image mais avec la zone coloré pour la mettre en valeur. Je vous remercie d'avance ! :) Titre: Re : Image changeante sur passage de la souris Posté par: Chilly le 18 Avril 2009 à 14:01:43 Si j'ai bien compris ta question, tu as besoin de créer une <map> avec des zones (<area>) dedans, et d'utiliser l'événement onMouseOver pour redéfinir la valeur de "src" en rentrant dans une zone et onMouseOut pour remettre l'image de base à la sortie de la zone.
Titre: Re : Image changeante sur passage de la souris Posté par: the lsd le 18 Avril 2009 à 14:04:31 Tu peux regarder par là : http://www.pcastuces.com/pratique/web/scripts/html6.htm
Ça te permettras de faire tes zones. Par contre, bon courage si tu le fais à la main ! Je sais que Dreamwaver permet d'automatiser ça, d'autres doivent le faire également. Ensuite, un peu de javascript (onMouseOver et getElementById) pourra te permettre de changer l'image. Je ne sais pas si c'est la meilleure idée (en terme de lisibilité, de compatibilité et autres), mais j'imagine que ça doit fonctionner. Enjoy The lsd Edit : erf t'as été plus rapide Chilly, mais moi je donne un lien et le getElementById :P Titre: Re : Image changeante sur passage de la souris Posté par: Iansus le 18 Avril 2009 à 16:02:30 En fait, c'est plus simple
Il fait son image Map, crée ses Areas, et dans la balise <area>, il met l'attribut onMouseOver='tonimage.src=\'adresse_de_l_image\''. Après, tu peux utiliser le getElementById pour référencer l'image dans la page. Titre: Re : Image changeante sur passage de la souris Posté par: Jiao le 18 Avril 2009 à 17:43:16 Je vous remercie pour vos réponses !
J'ai réussi à trouver un petit code sur internet que j'ai modifié et il marche très bien. Cependant j'ai voulu également tester l'idée de Iansus, j'ai donc le code suivant avec les zones qui fonctionnent bien mais il ne se passe rien au passage de la souris. Code: <img src="photo.jpg" width="600" height="480" usemap="#carte" border="0" name="foto"> Titre: Re : Image changeante sur passage de la souris Posté par: Iansus le 18 Avril 2009 à 18:26:44 Code: <img src="photo.jpg" width="600" height="480" usemap="#carte" border="0" id="foto"> Là ça devrait marcher ! Titre: Re : Image changeante sur passage de la souris Posté par: the lsd le 18 Avril 2009 à 18:35:36 Je connais pas assez le JS, mais le mot clé this permet surement de pas utiliser getElementById. Mais je sais pas lequel est le mieux
Enjoy The lsd Titre: Re : Image changeante sur passage de la souris Posté par: Iansus le 18 Avril 2009 à 18:58:31 En fait, this ferait ici référence à balise area, et pas img, donc il aurait fallu utiliser la propriété parent, mais avec ces notions là, je suis aussi perdu !
Titre: Re : Image changeante sur passage de la souris Posté par: Jiao le 18 Avril 2009 à 19:05:19 Merci Iansus ça marche très bien =) =)
Titre: Re : Image changeante sur passage de la souris Posté par: Iansus le 18 Avril 2009 à 19:10:42 De rien !
Titre: Re : Image changeante sur passage de la souris Posté par: Jiao le 20 Avril 2009 à 20:27:54 Bon encore un petit truc, toujours sur mon plan j'aimerais que quand l'utilisateur passe sa souris sur un endroit précis on ai un aperçu d'un photo sans que celle-ci soit ouverte dans une nouvelle fenêtre.
J'ai cherché un peu et je suis tombé sur un truc que j'ai essayé : Code: <area shape="rect" coords="42,83,85,120" href="#" onMouseOver="pop0('<IMG SRC='photo2.jpg'>')">Mais bon ça ne fait rien, ais-je fait une erreur ou alors il faudrait s'y prendre autrement ? Titre: Re : Image changeante sur passage de la souris Posté par: akway le 20 Avril 2009 à 20:33:27 Salut,
Qu' est ce que la fonction pop0() ? Titre: Re : Image changeante sur passage de la souris Posté par: Iansus le 20 Avril 2009 à 20:34:39 Après tout dépend de la fonction pop0(). Je pense que celle-ci crée une <div> flottante qui contient l'image
Titre: Re : Image changeante sur passage de la souris Posté par: Jiao le 20 Avril 2009 à 20:57:44 effectivement si je vous donne la fonction pop0 ça sera plus pratique, désolé de l'oublie
Code: function pop0(contenu) Sachant que j'ai mis mon image dans un <div id=bulleimg> Titre: Re : Re : Image changeante sur passage de la souris Posté par: Chilly le 20 Avril 2009 à 23:31:25 J'ai cherché un peu et je suis tombé sur un truc que j'ai essayé : Code: <area shape="rect" coords="42,83,85,120" href="#" onMouseOver="pop0('<IMG SRC='photo2.jpg'>')">Tu as un problème d'apostrophes. Il faudrait les échapper en mettant \ devant. onMouseOver="pop0('<IMG SRC=\'photo2.jpg\'>')"> Titre: Re : Image changeante sur passage de la souris Posté par: the lsd le 21 Avril 2009 à 07:39:35 Javascript est assez galère à débuguer je trouve, mais le moyen le plus simple de vérifier tes erreurs c'est Outils -> Console d'erreurs sur Firefox (je ne sais pas si il existe un équivalent sur IE).
Accessoirement, et ça n'engage que moi, je n'aurais pas mis le code tout à fait comme ça : Code: <area shape="rect" coords="42,83,85,120" href="#" onMouseOver="pop0('<IMG SRC=\'photo2.jpg\'>')">Mais comme ça : Code: <area shape="rect" coords="42,83,85,120" href="#" onMouseOver="pop0('<img src=\"photo2.jpg\">')">Simple question de respect de ta manière de coder (tu écris apparemment tes balise en minuscules et avec des guillemets doubles, alors que dans pop0, tu mets ta balise en majuscules avec des guillemets simples). Mais bon, c'est juste mon coté chieur qui fait dire ça ! Enjoy The lsd Titre: Re : Image changeante sur passage de la souris Posté par: Jiao le 21 Avril 2009 à 17:45:40 Merci bien pour vos réponses j'ai réussi à m'en sortir ! =)
Effectivement j'ai l'habitude de mettre des guillemets doubles (bonne habitude ??), mais dans ce cas la si je met \"photo2. jpg\" ca ne fonctionne pas, on dirait que le \ ne fait pas l'échappement du guillemet. Titre: Re : Re : Image changeante sur passage de la souris Posté par: Chilly le 21 Avril 2009 à 18:16:48 Javascript est assez galère à débuguer je trouve, mais le moyen le plus simple de vérifier tes erreurs c'est Outils -> Console d'erreurs sur Firefox (je ne sais pas si il existe un équivalent sur IE). Pour les fans d'Opera il existe Dragonfly, et sous firefox il existe aussi Firebug. |