102
Maîtrise des CSS
Survol style Pixy
Le.principal.inconvénient.avec.la.méthode.des.images.multiples.tient.au.léger.délai.qu’elle.
génère. quand. les. navigateurs. chargent. l’image. de. survol. la. première. fois.. Ce. délai. peut.
provoquer.un.effet.de.clignotement.indésirable.et.donner.l’impression.que.les.boutons.réagissent.mal..On.peut.précharger.les.images.de.survol.en.les.appliquant.comme.arrière-plan.
à l’élément. parent.. Mais. il. existe. un. autre. moyen..Au. lieu. de. permuter. plusieurs. images.
d’arrière-plan,.utilisez.une.seule.image.et.décalez.sa.position.d’arrière-plan..Le.recours.
àune.unique.image.a.l’avantage.de.réduire.le.nombre.de.requêtes.serveur.en.plus.de.permettre.de.conserver.tous.les.états.de.bouton.au.même.endroit..Cette.méthode.est.appelée.
"méthode.Pixy",.du.surnom.de.son.créateur,.Petr.Staníček.(pour.plus.d’informations.à.ce.
sujet,.consultez.son.site.web :.http://wellstyled.com/css-nopreload-rollovers.html).
Commencez.par.créer.une.image.de.bouton.combiné.(voir.Figure 5.11)..Dans.le.cas.présent,.
je.limite.le.bouton.à.un.état.relevé,.un.état.de.survol.et.un.état.actif..Vous.pouvez.cependant.
aussi.inclure.un.état.visité.si.vous.le.souhaitez..
Figure 5.11
Les trois états de
bouton sous forme
d’image unique.
Le.code.est.presque.identique.à.l’exemple.précédent,.mais.cette.fois,.vous.alignez.l’image.
d’arrière-plan.de.façon.que.l’état.normal.se.trouve.au.centre,.puis.vous.décalez.l’arrière-plan.
vers.la.droite.ou.vers.la.gauche.pour.les.états.de.survol.et.actif.
a:link, a:visited {
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background: url(/img/buttons.png) -203px 0 no-repeat;
}
a:hover, a:focus {
background-position: right top;
}
a:active {
background-position: left top;
}
Internet. Explorer. s’entête. malheureusement. à. faire. un. nouvel. aller-retour. vers. le. serveur.
pour. requérir. une. nouvelle. image. alors. que. vous. ne. faites. que. modifier. l’alignement. de.
la.même.image..Cette.action.provoque.un.léger.clignotement,.qui.peut.être.agaçant..Pour.
l’éviter,.appliquez.l’état.de.survol,.non.pas.au.lien.lui-même,.mais.à.son.élément.parent,.par.
exemple.au.paragraphe.qui.le.contient :
p {
background: url(/img/ buttons.png) no-repeat right top;
}
Maîtrise des CSS
Survol style Pixy
Le.principal.inconvénient.avec.la.méthode.des.images.multiples.tient.au.léger.délai.qu’elle.
génère. quand. les. navigateurs. chargent. l’image. de. survol. la. première. fois.. Ce. délai. peut.
provoquer.un.effet.de.clignotement.indésirable.et.donner.l’impression.que.les.boutons.réagissent.mal..On.peut.précharger.les.images.de.survol.en.les.appliquant.comme.arrière-plan.
à l’élément. parent.. Mais. il. existe. un. autre. moyen..Au. lieu. de. permuter. plusieurs. images.
d’arrière-plan,.utilisez.une.seule.image.et.décalez.sa.position.d’arrière-plan..Le.recours.
àune.unique.image.a.l’avantage.de.réduire.le.nombre.de.requêtes.serveur.en.plus.de.permettre.de.conserver.tous.les.états.de.bouton.au.même.endroit..Cette.méthode.est.appelée.
"méthode.Pixy",.du.surnom.de.son.créateur,.Petr.Staníček.(pour.plus.d’informations.à.ce.
sujet,.consultez.son.site.web :.http://wellstyled.com/css-nopreload-rollovers.html).
Commencez.par.créer.une.image.de.bouton.combiné.(voir.Figure 5.11)..Dans.le.cas.présent,.
je.limite.le.bouton.à.un.état.relevé,.un.état.de.survol.et.un.état.actif..Vous.pouvez.cependant.
aussi.inclure.un.état.visité.si.vous.le.souhaitez..
Figure 5.11
Les trois états de
bouton sous forme
d’image unique.
Le.code.est.presque.identique.à.l’exemple.précédent,.mais.cette.fois,.vous.alignez.l’image.
d’arrière-plan.de.façon.que.l’état.normal.se.trouve.au.centre,.puis.vous.décalez.l’arrière-plan.
vers.la.droite.ou.vers.la.gauche.pour.les.états.de.survol.et.actif.
a:link, a:visited {
display: block;
width: 203px;
height: 72px;
text-indent: -1000em;
background: url(/img/buttons.png) -203px 0 no-repeat;
}
a:hover, a:focus {
background-position: right top;
}
a:active {
background-position: left top;
}
Internet. Explorer. s’entête. malheureusement. à. faire. un. nouvel. aller-retour. vers. le. serveur.
pour. requérir. une. nouvelle. image. alors. que. vous. ne. faites. que. modifier. l’alignement. de.
la.même.image..Cette.action.provoque.un.léger.clignotement,.qui.peut.être.agaçant..Pour.
l’éviter,.appliquez.l’état.de.survol,.non.pas.au.lien.lui-même,.mais.à.son.élément.parent,.par.
exemple.au.paragraphe.qui.le.contient :
p {
background: url(/img/ buttons.png) no-repeat right top;
}