Discussion :

[solorac]

Bonjour la Communauté,

Je mets un post dans ce forum mais je ne suis pas certain que ce soit le bon endroit.

En effet, je cherche à faire sur un image placée dans une page html (plan), un changement de couleur au passage de la souris sur la légende, qui elle se trouve en dessous de l'image.

Est-ce que vous auriez une idée de code ???

Merci

[Auteur]

bonjour,

c'est l'image ou la légende qui doit changer de couleur ?

[ThomasR]

Bonsoir,

que ce soit pour la légende ou l'image tu peux utiliser la pseudo-classe CSS hover qui te permet de définir un style pour les éléments sur lesquels tu passes la souris.

Exemple :

Code :

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

1
2
.Photo {border:1px solid #ddd;}
.Photo:hover {border:1px solid #ffc;}

Code :

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

1
2
<img src="monimge.jpeg" alt="un texte alternatif pertinent" class="Photo" />
<span class="Photo">La légende de l'image</span>

Par contre ca ne fonctionne, sous IE6, que pour les éléments <a/>, dans ce cas tu pourrais faire la même chose en javascript.

Code :

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

1
2
 
<img src="monimge.jpeg" style="border:1px solid #ddd" alt="un texte alternatif pertinent" onmouseover="this.style.border='1px solid #ffc'" />/>

Ou mieux passer par une feuille de style IE6 implémentant behavior et un htc :

Code :

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

1
2
.Photo {border:1px solid #ddd;behavior:url(/css/IE6ImgHover.htc);}
.Photo:hover, .PhotoHover {border:1px solid #ffc;}

Et dans ce fichier IE6ImgHover.htc :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="ImgHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="ImgOut()" />
<SCRIPT LANGUAGE="JScript">
function ImgHover() {
	if (this.className=='') this.className='PhotoHover';
	if (this.className=='Photo') this.className='Photo PhotoHover';
}
function ImgOut() {
	if (this.className=='PhotoHover') this.className='';
	if (this.className=='Photo PhotoHover') this.className='Photo';
}
</SCRIPT>

[solorac]

Merci pour votre aide.
Ma réponse est tardive désolé
Je vais essayé votre solution et vous tiens informé.