126
Maîtrise des CSS
Figure 6.11
La carte-image CSS
pendant le survol.
Si. vous. donnez. un. arrière-plan. aux. liens. d’ancre,. vous. parviendrez. à. tromper. Internet.
Explorer.afin.qu’il.se.comporte.correctement..Le.problème.est.que.nous.ne.souhaitons.pas.
donner.d’arrière-plan.aux.liens,.puisqu’ils.sont.censés.être.masqués !.Vous.pourriez.tenter.
de.définir.un.arrière-plan.transparent,.mais.cela.ne.paraît.pas.fonctionner..Pourquoi.donc.ne.
pas.utiliser.une.image.PNG.ou.GIF.transparente ?
.imagemap a {
position: absolute;
display: block;
background-image: url(/img/shim.gif);
width: 60px;
height: 80px;
text-indent: -1000em;
}
Bizarrement,.il.n’y.a.même.pas.besoin.de.pointer.sur.une.véritable.image !.Vous.pouvez.
vous.contenter.de.spécifier.une.URL.inexistante.et.tromper.ainsi.Internet.Explorer..Enfin,.
quand.même,.créer.un.lien.vers.une.URL.qui.n’existe.pas,.c’est.mal,.même.si.c’est.pour.
corriger.les.défauts.d’un.navigateur.bogué !.J’utilise.donc.pour.ma.part.une.véritable.image.
Cartes-images à la mode Flickr
Si.vous.avez.déjà.utilisé.le.service.de.partage.de.photos.Flickr,.vous.avez.sans.doute.vu.une.
technique.similaire.qui.est.utilisée.pour.l’annotation.des.images.(voir.Figure 6.12)..Lorsque.
vous. survolez. une. image. annotée,. une. boîte. à. double. bordure. apparaît. sur. la. zone. qui.
contient.chaque.note..Lorsque.vous.survolez.l’une.de.ces.boîtes,.elle.passe.en.surbrillance.
et.affiche.la.note..Moyennant.quelques.ajustements,.il.est.possible.de.produire.un.résultat.
analogue.avec.la.précédente.technique.