130
Maîtrise des CSS
rence,.mais.il.serait.préférable.qu’elles.soient.centrées.horizontalement.sous.la.zone.réactive,.au.lieu.d’être.ferrées.à.gauche..Vous.pouvez.le.faire.en.positionnant.le.bord.gauche.
de.la.balise.span.de.note.au.milieu.de.la.zone.réactive..Ensuite,.déplacez.cette.balise.vers.
la.gauche,.à.mi-largeur.de.la.note,.en.utilisant.des.marges.négatives..La.zone.réactive.de.
cet. exemple. fait. 50 pixels. de. large.. J’ai. donc. défini. la. position. left. avec. une. valeur. de.
25 pixels..Les.notes.font.8 cadratins.de.large,.remplissage.inclus..Avec.une.marge.négative.
de.4 cadratins,.on.parvient.ainsi.à.les.centrer.horizontalement.sous.la.zone.réactive..
.imagemap a .note {
position: absolute;
bottom: -3em;
width: 7em;
padding: 0.2em 0.5em;
background-color:#ffc;
text-align: center;
left: 25px;
margin-left: -4em;
}
Maintenant.que.les.notes.sont.centrées,.il.est.temps.de.les.rendre.interactives..Elles.doivent.
être.masquées.par.défaut.et.ne.s’afficher.que.lors.du.survol.de.la.zone.réactive..Pour.cela,.
on.pourrait.attribuer.la.valeur.none.à.la.propriété.display.puis.la.ramener.à.block.lors.
du.survol.de.l’ancre,.mais.cela.empêcherait.les.lecteurs.d’écran.d’accéder.au.contenu.de.
la.note..Je.préfère.donc.masquer.le.texte.en.le.déplaçant.à.gauche.hors.de.l’écran.et.en.le.
repositionnant.lors.du.survol :
.imagemap a .note {
position: absolute;
bottom: -3em;
width: 7em;
padding: 0.2em 0.5em;
background-color:#ffc;
text-align: center;
left: -1000em;
margin-left: -5em;
}
.imagemap a:hover .note,
.imagemap a:focus .note {
left: 25px;
}
Nous.y.sommes.presque..Un.dernier.ajustement..Au.lieu.d’afficher.tout.le.temps.les.bordures.doubles.de.la.zone.réactive,.on.pourrait.ne.les.faire.apparaître.que.lors.du.survol.de.
l’image..Il.serait.alors.possible.d’observer.l’image.normalement,.sans.les.marques.des.zones.
réactives..Lorsque.le.curseur.survolerait.l’image,.les.zones.réactives.apparaîtraient,.afin.de.
signaler.à.l’utilisateur.que.d’autres.informations.peuvent.être.découvertes..Vous.pouvez.réaliser.cela.en.rendant.les.bordures.sur.les.span.externe.et.interne.transparentes.par.défaut,.
puis.en.leur.attribuant.une.couleur.pour.le.survol :
.imagemap a .outer {
display: block;
Maîtrise des CSS
rence,.mais.il.serait.préférable.qu’elles.soient.centrées.horizontalement.sous.la.zone.réactive,.au.lieu.d’être.ferrées.à.gauche..Vous.pouvez.le.faire.en.positionnant.le.bord.gauche.
de.la.balise.span.de.note.au.milieu.de.la.zone.réactive..Ensuite,.déplacez.cette.balise.vers.
la.gauche,.à.mi-largeur.de.la.note,.en.utilisant.des.marges.négatives..La.zone.réactive.de.
cet. exemple. fait. 50 pixels. de. large.. J’ai. donc. défini. la. position. left. avec. une. valeur. de.
25 pixels..Les.notes.font.8 cadratins.de.large,.remplissage.inclus..Avec.une.marge.négative.
de.4 cadratins,.on.parvient.ainsi.à.les.centrer.horizontalement.sous.la.zone.réactive..
.imagemap a .note {
position: absolute;
bottom: -3em;
width: 7em;
padding: 0.2em 0.5em;
background-color:#ffc;
text-align: center;
left: 25px;
margin-left: -4em;
}
Maintenant.que.les.notes.sont.centrées,.il.est.temps.de.les.rendre.interactives..Elles.doivent.
être.masquées.par.défaut.et.ne.s’afficher.que.lors.du.survol.de.la.zone.réactive..Pour.cela,.
on.pourrait.attribuer.la.valeur.none.à.la.propriété.display.puis.la.ramener.à.block.lors.
du.survol.de.l’ancre,.mais.cela.empêcherait.les.lecteurs.d’écran.d’accéder.au.contenu.de.
la.note..Je.préfère.donc.masquer.le.texte.en.le.déplaçant.à.gauche.hors.de.l’écran.et.en.le.
repositionnant.lors.du.survol :
.imagemap a .note {
position: absolute;
bottom: -3em;
width: 7em;
padding: 0.2em 0.5em;
background-color:#ffc;
text-align: center;
left: -1000em;
margin-left: -5em;
}
.imagemap a:hover .note,
.imagemap a:focus .note {
left: 25px;
}
Nous.y.sommes.presque..Un.dernier.ajustement..Au.lieu.d’afficher.tout.le.temps.les.bordures.doubles.de.la.zone.réactive,.on.pourrait.ne.les.faire.apparaître.que.lors.du.survol.de.
l’image..Il.serait.alors.possible.d’observer.l’image.normalement,.sans.les.marques.des.zones.
réactives..Lorsque.le.curseur.survolerait.l’image,.les.zones.réactives.apparaîtraient,.afin.de.
signaler.à.l’utilisateur.que.d’autres.informations.peuvent.être.découvertes..Vous.pouvez.réaliser.cela.en.rendant.les.bordures.sur.les.span.externe.et.interne.transparentes.par.défaut,.
puis.en.leur.attribuant.une.couleur.pour.le.survol :
.imagemap a .outer {
display: block;