125
Mise en forme des listes et création de barres de navigation
hauteurs.pour.créer.les.zones.réactives.désirées..Le.texte.du.lien.est.toujours.affiché ;.il.est.
donc.nécessaire.de.le.masquer.en.le.sortant.de.l’écran.grâce.à.un.grand.retrait.négatif :
.imagemap a {
position: absolute;
display: block;
width: 50px;
height: 60px;
text-indent: -1000em;
}
Les. liens. individuels. peuvent. maintenant. être. positionnés. au-dessus. des. personnes.
correspondantes :
.imagemap .rich a {
top: 50px;
left: 80px;
}
.imagemap .sophie a {
top: 90px;
left: 200px;
}
.imagemap .cath a {
top: 140px;
left: 55px;
}
.imagemap .james a {
top: 140px;
left: 145px;
}
.imagemap .paul a {
top: 165px;
left: 245px;
}
Enfin,.pour.créer.l’effet.de.survol,.on.applique.une.bordure.aux.liens.en.cas.de.survol :
.imagemap a:hover,
imagemap a:focus {
border: 1px solid #fff;
}
La.base.de.la.technique.est.terminée..Si.vous.survolez.les.images,.vous.obtenez.maintenant.
le.résultat.présenté.à.la.Figure 6.11.
Tout. cela. suppose. néanmoins. que. vous. possédiez. un. navigateur. bien. en. jambes,. comme.
Safari.ou.Firefox..Si.vous.utilisez.Internet.Explorer,.il.ne.se.passe.rien !.Internet.Explorer.
n’aime.pas.afficher.les.liens.dont.le.contenu.est.masqué.hors.écran,.même.si.vous.définissez.
explicitement.des.largeurs.et.des.hauteurs..Mais.il.existe.une.solution.