La.mise.en.forme.de.base.de.la.liste.est.la.même.que.dans.l’exemple.de.la.carte-image :
.remote {
width: 333px;
height: 500px;
position: relative;
}
.remote ul {
margin: 0;
padding: 0;
list-style: none;
}
La.première.chose.à.faire.est.de.définir.un.positionnement.absolu.pour.les.zones.réactives.
et.de.spécifier.leurs.dimensions..Dans.cet.exemple,.trois.des.zones.réactives.font.la.même.
taille,.les.deux.dernières.étant.légèrement.plus.grandes..J’ai.donc.défini.les.tailles.par.défaut.
d’abord,.avant.de.les.redéfinir.en.cas.de.besoin..Comme.pour.la.technique.précédente,.toutes.
les.ancres.se.trouvent.alors.positionnées.au.niveau.du.coin.supérieur.gauche.de.l’image..Vous.
pouvez.ensuite.positionner.chaque.zone.réactive.sur.la.personne.appropriée.de.l’image,.avec.
les.propriétés.de.positionnement.top.et.left.
.remote a .hotspot {
width: 50px;
height: 60px;
position: absolute;
}
.remote .rich a .hotspot {
top: 50px;
left: 80px;
}
.remote .sophie a .hotspot {
top: 90px;
left: 200px;
}
.remote .cath a .hotspot {
top: 140px;
left: 55px;
width: 60px;