Scriptless Image Rollovers(method Pixie )

[Asadun]

Salut !

Pourriez-vous s'il vous plaît m'expliquer comment je puis utiliser l'image rollovers Scriptless (Méthode Pixie). Ici, j'ai une image PNG qui contient trois icônes qui dépendent de l'interaction de l'utilisateur. Une de ces icônes s'affiche, et je ne comprends pas ! Comment je peux basculer entre ces icônes en utilisant background-position avec une valeur positive et négative.
Je vois dans le style ci-dessous qu'ils ont utilisé certaines valeurs négatives.

Merci d'avance.

Asadun

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#navigation a:link{
 
       background: url(../../images/rolloverImages.png) no-repeat 7px center;
 
}
 
#navigation a:visited{
 
       background: url(../../images/rolloverImages.png) no-repeat -483px center;
}
 
#navigation a:hover{
 
       background: url(../../images/rolloverImages.png) no-repeat -245px center;
 
}

[pop_up]

Cette technique est celle des "sprites"
Cela consiste à mettre toutes tes images (en général des icones) en une et de sélectionner celle que tu souhaite en modifiant la propriété background-position

Dans tes exemples :

Code :

background: url(../../images/rolloverImages.png) no-repeat 7px center;

l'image est insérée dans la page avec un espacement de 7 pixels à gauche de l'image (surement parce que la première icone dans l'image source est collée tout à gauche)

Code :

background: url(../../images/rolloverImages.png) no-repeat -483px center;

Ici, -483px introduit un décalage de ton image de 483px vers la gauche. Cela signifie que tu verras l'icone qui se trouve à partir du 484ème pixel.

Voici un lien qui pourra t'aider à comprendre cette technique :
http://www.w3schools.com/cssref/pr_b...d-position.asp

[Bovino]

Optimisez le chargement des images de votre site avec les Sprites CSS