CSS Sprite - Image rollover + lien
Bonjour à tous,
J'ai ai réalisé un rollover sur une image avec la technique du sprite (qui fonctionne) mais je n'arrive pas à intégrer de lien sur cette image.
Toutes les aides que j'ai pu trouver sur le net parlent de menus avec des balises <li> or ce n'est pas mon cas car moi dans la partie qui m'intéresse j'ai une grosse image qui sert de lien et pas de menu.
Voici mon code pour le rollover sprite:
CSS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
| .sprite-btn{
background-image : url(../images/btn/sprite_btn.png); background-color : transparent; background-repeat : no-repeat;
}
#sprite_0{
height : 250px;
width : 590px;
background-position : 0 0;
}
#sprite_0:hover{
background-position : 0 -250px;
} |
HTML
Code:
1
2
3
| <div class="sprite-btn" id="sprite_0">
<A HREF="piece.php"/>Entrer dans la pièce</a>
</div> |
Donc je rappelle ma question, comment faire pour que le lien s'applique à mon image entière (tout en conservant le rollover) et non pas juste sur le texte "Entrer dans la pièce"...
Un grand merci d'avance pour votre aide précieuse, :ccool:
M.S
Edit:
je viens de tenter ça (je sais pas si je suis sur la bonne voie):
CSS
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| .sprite-btn{
background-image : url(../images/btn/sprite_btn.png); background-color : transparent; background-repeat : no-repeat;
display:block;
}
.sprite-btn a{
height : 250px;
width : 590px;
background-position : 0 0;
display:block;
}
.sprite-btn a:hover{
background-position : 0 -250px;
display:block;
} |
et en supprimant l'id de ma div dans le HTML.
Du coup le lien prend bien toute l'image mais point de rollover... :(
