Un rollover sur un div

Version imprimable

Bonjour, bonjour !

J'ai une question toute simple : comment puis-je ajouter un rollover sur mon div ?

HTML
Code:

1 2 <a href="index.php"><span id="inscription"><div id="btn_inscription"></div></span></a>
CSS
Code:

1 2 3 4 5 6 7 8 9 10 11 div#btn_inscription { background:url(../img/boutons/inscription.png); width:110px; height:30px; float:left; } span#inscription:hover { background:url(../img/boutons/inscription_hover.png); }
Je pense que c'est faisable avec CSS en utilisant :hover mais comment ? :?

Merci de m'éclairer ;)

exemple :

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
.bouton{
width: 100px;
height: 50px;
display: block;
float: left;
background-image: url(image1.gif);
background-repeat: no-repeat;
}
 
a.bouton{
display: block;
}
 
a.bouton:hover{
display: block;
background-image: url(image2.gif);
background-repeat: no-repeat;
}

HTML

Code:

1
2
 
<div class="bouton"><a href="#" class="bouton"></a></div>

Ce qui donne :

CSS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
.btn_head {
width:110px;
height:30px;
}
 
a.btn_head {
display:block;
}
 
div#inscription {
background:url(../img/boutons/inscription.png);
float:left;
}
 
a#btn_inscription:hover {
display: block;
background:url(../img/boutons/inscription_hover.png);
}
 
div#connexion {
background:url(../img/boutons/connexion.png);
margin-left:115px;
}
 
a#btn_connexion:hover {
display: block;
background:url(../img/boutons/connexion_hover.png);
}

HTML

Code:

1
2
3
 
<div id="inscription"><a href="index.php" id="btn_inscription" class="btn_head"></a></div>
<div id="connexion"><a href="index.php" id="btn_connexion" class="btn_head"></a></div>

Si ça peut aider quelqu'un ;)

Merci FraK !

08/07/2008, 10h35
FraK

Aucuns soucis, on est là pour ça ^^