Discussion :

[Madfrix]

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

[c_s_s]

Bonjour,

C'est ce qu'on appelle le principe des portes coulissantes.
Et effectivement, l'un des intérêts est de ne pas avoir à charger deux images, ce qui dans certains cas évite d'avoir un changement d'apparence non fluide au survol de la souris.

[Madfrix]

Bonjour,

C'est ce qu'on appelle le principe des portes coulissantes.
Et effectivement, l'un des intérêts est de ne pas avoir à charger deux images, ce qui dans certains cas évite d'avoir un changement d'apparence non fluide au survol de la souris.

Merci de la réponse

C'est bête mais je connaissais pas

Comme quoi c'est bien de s'inspirer du code des autres pour s'améliorer...