Discussion :

[razorlok]

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 !

[pop_up]

ce n'est pas du css mais du javascript.

il utilise donc les attributs onmouseover et onmouseout

Code :

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

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

et voici les deux fonctions javascript

Code :

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

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;
}

[razorlok]

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

Code :

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

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 ?

[pop_up]

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 :

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

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 :

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

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 :

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

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 :

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

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

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

[Kerod]

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

[Raphael_Lemaire]

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 :

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

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);
}

[razorlok]

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