[DHTML ?]Lien texte qui change l'image lorsque qu'on le survole

**mtcreations** · 13/07/2006, 10h44

Bonjour à tous,

Cette question a certainement déjà été posée mais je n'ai pas trouvé ce que je cherchais.

Je crée mon site qui se trouve à cette adresse : http://www.mtcreations.fr

J'ai mon menu en texte et j'aimerais que lorsque je survole l'une de mes rubriques dans ce menu, une image de mon bandeau change.

Exemple : Lorsque je survole le lien texte "Gardena", j'aimerais que le logo Gardena qui est dans mon bandeau change de couleur.

Pour le moment, je n'ai trouvé que la solution de l'image survolé, mais il n'y a aucune interaction avec le menu texte.

Je pense au mouseOver, mais je ne vois pas du tout comment faire.

Si vous pouviez m'aider s'il vous plait je vous en serais très reconnaissant.

Merci d'avance

**KiLVaiDeN** · 13/07/2006, 10h48

Salut,

il faut tout d'abord donner un attribut "id" à ton image:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="images/imageHome.jpg" id="idImgBanner" />

Ensuite, sur tes liens, tu peux comme tu le suggères utiliser le mouseOver pour changer l'image affichée :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a href="#" onmouseover="document.getElementById('idImgBanner').src='images/imageCelien.jpg';">Un lien</a>

Ceci est la façon "barbare".

La façon plus "clean", serait

1) Créer une fonction de mouseover
2) faire un preload de tes images

Voila, A+

**Linaa** · 13/07/2006, 10h50

Oui en effet, tu peux utiliser l'evenement onmouseover et y ajouter le code JavaScript pour changer l'image.

Tu attribues un id à ton image et tu rajoutes à l'evenement

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById('id_image').src="nouvel_image"

**10-nice** · 13/07/2006, 10h54

j'ai fais un pti tuto vite fait sur ca : clique ici

**mtcreations** · 13/07/2006, 10h56

Je vous remercie tous les deux, ça fonctionne, par contre, comment faire pour restaurer l'image lorsqu'on ne survole plus le lien svp ?

**Linaa** · 13/07/2006, 10h59

Il existe aussi l'evenement onmouseout

**mtcreations** · 13/07/2006, 11h08

Salut Linaa,
J'ai essayé le mouseout, voici ma ligne :

<a href="gardena-jardin.php" onmouseover="document.getElementById('gardena').src='images/mt-creations_03.jpg' onmouseout="document.getElementById('gardena').src='images/mt-creations_roll_03.jpg';">Gardena</a>

Petit problème, ça ne fonctionne pas et IE me dit qu'il y a une erreur de syntaxe ?!

Une solution stp ?

**KiLVaiDeN** · 13/07/2006, 11h09

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<a
   href="gardena-jardin.php"
   onmouseover="document.getElementById('gardena').src='images/mt-creations_03.jpg';"
   onmouseout="document.getElementById('gardena').src='images/mt-creations_roll_03.jpg';"
>
Gardena
</a>

Tu avais oublié un double quote ( sépare bien les attributs pour éviter ce genre d'erreurs

A+

**10-nice** · 13/07/2006, 11h10

<a href="gardena-jardin.php"
onmouseover="document.getElementById('gardena').src='images/mt-creations_03.jpg';"
onmouseout="document.getElementById('gardena').src='images/mt-creations_roll_03.jpg';">Gardena</a>

tu avais simplement oublié de fermer ton onmouseover