[Résolu] Menu images

Bonjour,

Voila mon pb . je voudrais avoir un menu avec une image lorsque la souris n'est pas dessus et une autre lorsque la souris est dessus .

Voila mon code :

<div id="nav">
	<ul>
	<li><a class="bouton1" href="index.html"></a></li>
	<li><a class="bouton2" href="index.html"></a></li>
	<li><a class="bouton3" href="index.html"></a></li>
	</ul>
</div>

#nav{
height: 70px;
width: 360px;
float: right;
margin: -82px 0 0;
color:white;
}

#nav ul {
display:inline;
list-style-type: none;
}

#nav li {
float : left;
margin: 0 10px 0;
}

#footer {
height: 120px;
width: auto;
background: url(img/footer.png) repeat-x;
}

.bouton1 a{
background: url(img/1n.png); 
text-decoration:none; 
outline: none;	 
}

.bouton1 a :hover{
background: url(img/1c.png); 
text-decoration:none; 
outline: none;	 
}

.bouton2 a{
background: url(img/2n.png); 
text-decoration:none; 
outline: none;	 
}

.bouton2 a :hover{
background: url(img/2c.png); 
text-decoration:none; 
outline: none;	 
}

.bouton3 a{
background: url(img/3n.png); 
text-decoration:none; 
outline: none;	 
}

.bouton3 a :hover{
background: url(img/3c.png); 
text-decoration:none; 
outline: none;	 
}

Mer d'avance de vos réponses
Modifié par Twins77 (18 May 2012 - 11:00)

Bonjour,
Peut-être avec un :

#nav li a {
    display : block;
    width : 20px; // A remplacer par la largeur de ton image
    height : 20px; // A remplacer par la hauteur de ton image
}

non ça changera rien

Pourquoi ça ?
Après c'est dans ton code qu'il y a des problèmes... Par exemple

<a href="#" class="button1"></a>

(qui n'est d'ailleurs pas très (du tout ?) accessible) ne se sélectionne pas avec

.button1 a

Mais avec

a.button1

Modifié par Gothor (18 May 2012 - 11:25)

att je test
Modifié par Twins77 (18 May 2012 - 11:26)

j'ai testé sur 1 bouton :

[code=html
<div id="nav">
<ul>
<li><a class="bouton1" href="index.html"></a></li>
</ul>
</div>

[/code]

#nav{
ackground-color:red;
height: 70px;
width: 360px;
float: right;
margin: -82px 0 0;
color:white;
}

#nav ul {
display:inline;
list-style-type: none;
}

#nav li {
float : left;
margin: 0 10px 0;
}

#nav li a {
display : block;
width : 100px; 
height : 70px; 
}

a.bouton1{
background: url(img/1n.png); 
text-decoration:none; 
outline: none;	 
}

a:hoover .bouton1{
background: url(img/1c.png); 
text-decoration:none; 
outline: none;	 
}

ça marche par contre mes images ne change pas au passage de la souris ...

Il en est de même pour sélectionner un lien en :hover de classe 'bouton1'

a:hover .bouton1

permet de sélectionner les éléments de classe 'bouton1' qui sont des descendants du a:hover.
Tandis que

a.bouton1:hover

permet de sélectionner un lien de classe 'bouton1' dans l'état :hover

un GRAND MERCI ! ça fonctionne

ps : il me reste à régler un pb de footer que je voudrais coller dans le bas de ma page mais ça c un autre post !