Hover sur une image ne fonctionne pas

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:

---

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:

---

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

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.

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

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:

---

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';" />

---

Merci mais je vais me rabattre vers le java script!

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

J'ai trouvé ce code

Code:

---

1 2 3 4 5

<SCRIPT LANGUAGE="JavaScript"> function ChangeBackGround(fichier) { document.body.background=fichier } </SCRIPT>

---

Code:

---

onClick="ChangeBackGround('fondrouge.gif')

---

Comment le changer pour que l'image ne change que dans mon <td> et que ce soit sur mouse hover?

Pas besoin de js dans ton cas, il me semble, vu que tu as justement un lien... (c'est ta balise td qui ne devrait probablement pas être là, mais c'est un autre problème ;). Il suffit que tu attribues ton fond directement à ta balise a:

Code:

---

<a href="#" class="Style6 bouton">Archives</a>

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11

.bouton{ display:block; width:159px; height:57px; background:url("bouton.png"); text-align:center; }   .bouton:hover{ background:url("boutonhover.png"); }

---

Candygirl +1

normal Beboo... CandyGirl est la reine du CSS...

et ne me contredit pas cette fois ci CandyGirl :D