Discussion :

[MisterSnow]

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 :

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

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 :

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

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,
M.S


Edit:
je viens de tenter ça (je sais pas si je suis sur la bonne voie):

CSS

Code :

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

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

[eckerdecker]

Dans ton deuxième essai tu applique la propriété background-position sur la balise <a> alors que background-image est défini sur le <div>.

Voici un code qui marchera, nul besoin du div sauf pour faire le placement de ton bouton éventuellement, mais il n'a pas de rôle à jouer dans ton rollover

Code :

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

<a class="sprite-btn" href="...">Bouton</a>

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
.sprite-btn {
  display: block;
  width: 590px;
  height: 250px;
  background-image : url(../images/btn/sprite_btn.png);
  background-color : transparent;
  background-repeat : no-repeat;
  background-position : 0 0;
}
.sprite-btn:hover {
  background-position : 0 -250px;
}

[MisterSnow]

Ah bah oui, effectivement c'est logique mais je m'en suis pas rendu compte tellement j'avais le nez dedans lol

En tout cas un grand merci à toi eckerdecker, ça fonctionne parfaitement