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

[adrix26]

J'ai trouvé ce code

Code :

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

1
2
3
4
5
<SCRIPT LANGUAGE="JavaScript">
	function ChangeBackGround(fichier) {
		document.body.background=fichier
	}
</SCRIPT>

Code :

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

onClick="ChangeBackGround('fondrouge.gif')

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

[Candygirl]

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 html :

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

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

Code css :

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

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

[beeboo]

Candygirl +1

[Deallyra]

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

et ne me contredit pas cette fois ci CandyGirl