Changement d'image d'un bouton au survol

Bonjour à tous,

Voilà, ayant a développer un site statique, j'aimerais opter pour des boutons du style menu horizontal de ce site : http://metal.nightfall.fr/

Je ne sais pas trop comment faire pour que l'image de mes boutons changent au survol de la souris, si quelqu'un peut m'aider !

ce n'est pas du css mais du javascript.

il utilise donc les attributs onmouseover et onmouseout

Code:

---

1 2	onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/sec_boite_rol.jpg',1)"

---

et voici les deux fonctions javascript

Code:

---

1 2 3 4 5 6 7 8 9 10

function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} }     function MM_swapImgRestore() { //v3.0 var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; }

---

Donc pour mettre le nom de mon image sans survol, je dois changer Image1 de

Code:

---

onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','images/sec_boite_rol.jpg',1)"

---

et l'image en survol images/sec_boite_rol.jpg ?
A quoi correspond le 1 suivant ?

je suis pas trés fort en javascript donc je me lance pas dans la compréhension de son code.

En revanche, voila exactement du meme code mais simplifié :

Code:

---

1 2 3 4

<a href="#" id="lien1" onmouseover="document.getElementById('image1').src='2.jpg';" onmouseout="document.getElementById('image1').src='1.jpg';"> <img src="1.jpg" id="image1"> </a>

---

Il te suffit de choisir les images que tu veux.
Ceci est un bout de code qui te montre le changement d'image au survol.

Ensuite, tu peux aussi faire ça d'une autre manière. exemple :

Code:

---

1 2	document.getElementById('lien1').className='taclasse'

---

Dans ce cas la, tu appliquera une classe css "taclasse" à ton élément
Si dans cette classe, tu mets :

Code:

---

1 2	background-image: url('tonimage.jpg');

---

alors cela aura le meme effet

n'oublie pas dans ce cas la d'enlever la classe pour le onmouseout:

Code:

---

1 2	onmouseout="document.getElementById('lien1').className=''"

---

en éspérant que ça t'ai aidé ;)

Personnellement je l'aurai fait en CSS tout en retirant les img et en utilisant la propriété background des a mais bon...:aie:

Salut,

Je suis d'accord avec Kerod. Tu peux utiliser la propriété :hover en css (ne marche que sur les liens avec IE6, mais dans ton cas il s'agit de liens donc pas soucis). Les images de décor ne devraient pas apparaître dans le html.

Exemple :

Code:

---

1 2 3 4 5 6 7

a.menu { background-image: url(images/back-menu.jpg); }   a.menu:hover { background-image: url(images/back-menu-light.jpg); }

---

Merci bien a vous, j'ai pu tester les 2 solutions (javascript / css), elles marchent très bien !