Image au survol d'une image - Forum Alsacréations : CSS et Standards Web

Auteur
PJK	# 17 Mar 2007 - 14:53:50
11 Posts	Bonjour à tous j'ai besoin de vos talents en javascript Admettons une image1 et une image2 j'aimerai que quand on passe le curseur sur un lien représenté par une image1 une autre image appellé image2 s'affiche à la place de image1 (les deux images auront donc la même taille, l'image2 venant se surperposer sur l'image1, on ne verrais donc que image2 et plus image1) et que bien sur le lien reste toujours actif avec les deux images... vous voyez ce que je veux dire ? Merci Modifié par PJK (17 Mar 2007 - 14:54)
11 Posts
papillon41	# 17 Mar 2007 - 15:00:47
Lorem Ipsum 346 Posts	Bonjour pjk, Nous avons cela en magasin : regarde ici "roll-over-css" Amicalement, ()Ï() : Le vulgum pecus
Lorem Ipsum 346 Posts
matmat	# 17 Mar 2007 - 16:21:57
858 Posts	La solution du rollover css fonctionne pour des fonds, pour les images effectivement c'est mieux d'utiliser le javascript. Voilà un javascript qui fait ça: function hoverImages(context){ var myimages=new Array() var img = document.getElementById(context).getElementsByTagName('img'); for (I = 0; I<img.length; I++) { myimages[I]=new Image() myimages[I].src=img[I].src.replace(".gif", "_hover.gif"); img[I].onmouseover = function(){ this.src = (this.src.indexOf("_hover") == -1)? this.src.replace(".gif", "_hover.gif"):this.src; } img[I].onmouseout = function(){ this.src = (this.src.indexOf("_hover") != -1)? this.src.replace("_hover.gif", ".gif"):this.src; } } } Tu peux le mettre dans un fichier externe, par contre dans ton html, aprés les images il faut que tu mettes <script type="text/javascript">hoverImages('context');</script> ou 'context' correspond au nom de la premiére div parente de l'ensemble de tes images. Pour que ça fonctionne il faut que appele tes images image.gif et image_hover.gif Pour plus d'info voir ici Modifié par matmat (17 Mar 2007 - 16:22)
858 Posts
PJK	# 17 Mar 2007 - 19:21:41
11 Posts	merci mais je ne comprends pas cette histoire d'image.gif et d'image_hover.gif dans mon code html où est ce que je dois mettre le lien de l'image_Hover.gif ?
11 Posts
matmat	# 17 Mar 2007 - 20:17:34
858 Posts	Dans ton code html tu ne met que ton image "image.gif". par contre dans ton dossier images, pour chaque image tu met une version nimportequelnom.gif et une version nimportequelnom_hover.gif. Ce qui se passe c'est qu'au survol, le script remplace la valeur de l'attribut source (src) par la même valeur + _hover.
858 Posts
PJK	# 17 Mar 2007 - 20:28:12
11 Posts	oké merci nickel ça marche je vous remercie pour votre aide
11 Posts
Prévenir un modérateur

Les références web : openweb.eu.org - opquast.com - webmaster-hub.com - webrankinfo.com - salemioche.net - web-pour-tous.org - webonorme.org

Nos partenaires : Editions Eyrolles

Nikozen : Hébergement - Réalisation : Alsacreations.fr