281
Étude de cas : Climb the Mountains
Ce.repositionnement.fonctionne.parce.que.le.conteneur.parent.est.pour.sa.part.positionné.
de.manière.relative.par.rapport.à.son.propre.parent..Si.ce.n’était.pas.le.cas,.les.éléments.de.
liste.positionnés.de.manière.absolue.feraient.dépendre.leurs.coordonnées.du.coin.supérieur.
gauche.de.la.fenêtre.du.navigateur,.ce.qui.ne.conviendrait.pas.du.tout..Comme.le.montre.la.
Figure 11.28,.les.points.d’altitude.sont.maintenant.dessinés.précisément.sur.le.graphique.
Figure 11.28
Grâce au
positionnement
absolu, les marqueurs
se placent aux
coordonnées
appropriées.
Nous.devons.maintenant.gérer.les.images.que.nous.avons.masquées.précédemment.et.les.
faire.s’afficher.lorsque.l’utilisateur.survole.le.point.d’altitude.
Les.cibles.sont.les.états.de.pseudo-liens.:hover.et.:focus..En.les.contrôlant,.on.peut.aisément.appliquer.des.déclarations.qui.afficheront.les.images.en.cas.de.survol.
veau.les.éléments.de.manière.absolue.et.nous.utilisons.des.valeurs.supérieure.et.droite.négatives.pour.positionner.les.images.exactement.où.nous.le.souhaitons.par.rapport.au.marqueur.
de.la.liste.
div#route_elevation ul li a:hover img,
div#route_elevation ul li a:focus img {
display:block;
width:40px;
height:40px;
padding:4px 9px 10px 12px;
position:absolute;
top:-16px;
right:-65px;
}
Quand.l’utilisateur.survole.un.marqueur,.l’image.s’affiche.maintenant.comme.prévu,.juste.
à.droite.du.marqueur..Nous.avons.aussi.ajouté.un.léger.remplissage.autour.de.la.vignette.
(voir.Figure 11.29).
Figure 11.29
Lorsque l’utilisateur
survole un marqueur,
sa vignette s’affiche.