Discussion :

[adrix26]

Bonjour à tous, je suis entrain de réaliser un site et j'utilise css pour faire des bouton réactive au passage de la souris, j'ai donc le code suivant:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<style type="text/css">
<!--
.bouton{
background:url("bouton.png");
align=:center;
}
.bouton:hover{
background:url("boutonhover.png");
}
-->
</style></head>

Code :

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

<td class="bouton" width="159" height="57" align="center"><a href="#" class="Style6">Archives</a></td>

Mais le probléme est que ça ne fonctionne pas, j'ai bien la premiere image pas la seconde lors du survolle du bouton!

[beeboo]

Il faut savoir que le pseudo élément :hoover ne fonctionne qu'avec la balise <a> sur MS IE, et que ce n'est donc pas un choix judicieux d'utiliser cette technique.

[LeXo]

il faut peut etre préférer l'alternative javascript

[Deallyra]

pour etre plus précis (mais déplacez donc ce topic) tu vas devoir utiliser les évènement onmouseover et onmouseout.

par exemple, pour ton code HTML

Code HTML :

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

1
2
3
4
 
<img src = "_Image/accueil.gif" id = "accueil" alt = "Accueil"
	onmouseover = "window.document.getElementById('accueil').src = '_Image/accueil_on.gif';"
	onmouseout = "window.document.getElementById('accueil').src = '_Image/accueil.gif';" />

[adrix26]

Merci mais je vais me rabattre vers le java script!

[Deallyra]

euh... c'est ce qu'on vient de faire... te rabattre vers le JS...