128
Maîtrise des CSS
position: relative;
}
.imagemap ul {
margin: 0;
padding: 0;
list-style: none;
}
Comme.auparavant,.les.liens.d’ancre.incorporés.sont.positionnés.de.manière.absolue..Cette.
fois,.vous.allez.cependant.définir.les.dimensions.sur.les.balises.span.internes.et.laisser.les.
balises.span.et.les.liens.d’ancre.externes.prendre.forme.autour.d’elles..Pour.ma.part,.j’ai.
attribué.une.bordure.foncée.à.la.balise.span.externe.et.une.bordure.claire.à.la.balise.span.
interne,.afin.de.marquer.leurs.positions.dans.l’image..Enfin,.comme.je.ne.souhaite.pas.masquer.le.texte.à.l’intérieur.des.liens.d’ancre,.mais.l’afficher.sous.forme.d’info-bulle,.je.lui.
donne.une.mise.en.forme.simple.
.imagemap a {
position: absolute;
display: block;
background-image: url(/img/shim.gif);
color: #000;
text-decoration: none;
border: 1px solid transparent;
}
.imagemap a .outer {
display: block;
border: 1px solid #000;
}
.imagemap a .inner {
display: block;
width: 50px;
height: 60px;
border: 1px solid #fff;
}
Comme.auparavant,.vous.devrez.positionner.les.ancres.au-dessus.de.chaque.personne :
.imagemap .rich a {
top: 50px;
left: 80px;
}
.imagemap .sophie a {
top: 90px;
left: 200px;
}
.imagemap .cath a {
top: 140px;
left: 55px;
}
.imagemap .james a {