124
Maîtrise des CSS
Ensuite,.ajoutez.une.liste.de.liens.vers.le.site.web.de.chaque.personne.après.l’image..Chaque.
élément.de.liste.doit.se.voir.attribuer.une.classe.pour.identifier.la.personne.correspondante..
Vous.pouvez.donner.à.chaque.lien.un.attribut.de.titre.(title).contenant.le.nom.de.la.personne..Dans.la.plupart.des.navigateurs,.le.nom.de.la.personne.apparaît.dans.une.info-bulle.
quand.l’utilisateur.survole.le.lien.

Fixez.la.largeur.et.la.hauteur.de.la.div.en.les.faisant.correspondre.aux.dimensions.de.l’image..
Ensuite,. attribuez-lui. un. positionnement. relatif. (position: relative).. Cette. dernière.
étape.est.la.clé.de.cette.technique,.car.elle.permet.aux.liens.enclos.d’être.positionnés.de.
manière.absolue,.par.rapport.aux.bords.de.la.div.et.donc.de.l’image..
.imagemap {
width: 333px;
height: 500px;
position: relative; /* La clé de cette technique */
}
Il.ne.faut.pas.que.les.puces.s’affichent..Faites-les.donc.disparaître.en.attribuant.la.valeur.
none. à. la. propriété. list-style.. Pour. bien. faire,. ramenez. aussi. à. zéro. les. marges. et. le.
remplissage.de.la.liste :.
.imagemap ul {
margin: 0;
padding: 0;
list-style: none;
}
La.prochaine.étape.vise.à.mettre.en.forme.les.liens..En.positionnant.les.liens.d’ancre.de.
manière.absolue,.on.les.déplace.vers.le.coin.supérieur.gauche.de.la.div.conteneur..Ils.peuvent. ensuite. être. positionnés. de. manière. individuelle. au-dessus. de. chaque. personne,. afin.
de.former.les.zones.réactives..Vous.devez.cependant.d’abord.définir.leurs.largeurs.et.leurs.