Bonjour à tous,

Sur le site de Blizzard (http://www.blizzard.com/diablo3/) on peut récupérer un kit graphique proposant un template de site web pour diablo3 (au passage admirez la qualité graphique du site ).

j'ai récupéré et analysé le code car souvent on y trouve des astuces intéressantes

Et là je suis tombé là dessus :

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
17
 
#navigation a { 
background:url(../images/button_bg1.gif) no-repeat; 
width:170px; 
height:25px; 
display:block; 
padding-left:25px; 
margin:5px 0;
font-size:13px; 
color:white; 
text-decoration:none; 
line-height:25px;
}
 
#navigation a:hover { 
background-position:0 bottom;  
}
Pas grand chose de compliqué à comprendre mais code intéressant (pour moi du moins...) car le rollover du bouton se fait en changeant de position l'image du background du bouton et non pas en chargeant une nouvelle image...

Du coup, il me vient la question suivante : optimise t'on l'affichage du rollover en prechargeant une image (2 fois plus haute que la hauteur du bouton) qui sera donc plus grosse mais qui à priori ne sera chargée qu'une seule fois ?


Merci pour vos explications

PS : visitez le site et regardez les vidéos tant que vous y êtes