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

Version imprimable

13/07/2006, 10h44
mtcreations

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

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
13/07/2006, 10h48
KiLVaiDeN

Salut,

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

Code:

<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:

<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+
13/07/2006, 10h50
Linaa

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:

document.getElementById('id_image').src="nouvel_image"
13/07/2006, 10h54
10-nice

:salut:

j'ai fais un pti tuto vite fait sur ca : clique ici
13/07/2006, 10h56
mtcreations

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

Il existe aussi l'evenement onmouseout
13/07/2006, 11h08
mtcreations

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 ?

Code:

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+

13/07/2006, 11h10
10-nice

<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 ;)
13/07/2006, 11h13
mtcreations

Grand grand grand... Heu non, ENORME merci à vous tous, vous m'avez fait faire ce que je voulais :D

Passez une bonne journée ;)
Et si je galère... Je repasserais vous embêter :mrgreen:

Encore merci et à bientôt