123
Mise en forme des listes et création de barres de navigation
Cartes-images CSS
Les.cartes-images.permettent.aux.développeurs.web.de.spécifier.des.zones.réactives.dans.
une.image..Ultra-populaires.il.y.a.quelques.années,.elles.sont.beaucoup.moins.courantes.
aujourd’hui..C’est.en.partie.dû.à.la.popularité.de.Flash.et.à.la.tendance.qui.a.conduit.à.privilégier.la.simplicité.d’un.code.moins.orienté.sur.la.présentation..Si.les.cartes-images.sont.
toujours.parfaitement.valides.en.HTML,.elles.ont.en.effet.le.défaut.de.mélanger.présentation.
et.contenu..Il.est.cependant.possible.d’en.créer.avec.une.combinaison.de.listes,.d’ancres.et.
de.styles.CSS.avancés..
Dans.cet.exemple,.nous.allons.utiliser.une.photographie.de.quelques.membres.de.l’équipe.
Clearleft.posant.à.la.manière.d’un.groupe.de.rock.indépendant.devant.un.mur.graffité.situé.
près.des.locaux.(voir.Figure 6.10)..Lorsque.l’utilisateur.survole.chaque.personne,.une.boîte.
rectangulaire.doit.apparaître..S’il.clique.dessus,.il.est.conduit.vers.le.site.web.de.la.personne.
concernée.
Figure 6.10
Rich, Sophie, Cath,
James et Paul posent
devant le mur graffité à
l’extérieur du bureau.
La.première.chose.à.faire.est.d’ajouter.l’image.à.la.page,.dans.une.div.nommée :
Mise en forme des listes et création de barres de navigation
Cartes-images CSS
Les.cartes-images.permettent.aux.développeurs.web.de.spécifier.des.zones.réactives.dans.
une.image..Ultra-populaires.il.y.a.quelques.années,.elles.sont.beaucoup.moins.courantes.
aujourd’hui..C’est.en.partie.dû.à.la.popularité.de.Flash.et.à.la.tendance.qui.a.conduit.à.privilégier.la.simplicité.d’un.code.moins.orienté.sur.la.présentation..Si.les.cartes-images.sont.
toujours.parfaitement.valides.en.HTML,.elles.ont.en.effet.le.défaut.de.mélanger.présentation.
et.contenu..Il.est.cependant.possible.d’en.créer.avec.une.combinaison.de.listes,.d’ancres.et.
de.styles.CSS.avancés..
Dans.cet.exemple,.nous.allons.utiliser.une.photographie.de.quelques.membres.de.l’équipe.
Clearleft.posant.à.la.manière.d’un.groupe.de.rock.indépendant.devant.un.mur.graffité.situé.
près.des.locaux.(voir.Figure 6.10)..Lorsque.l’utilisateur.survole.chaque.personne,.une.boîte.
rectangulaire.doit.apparaître..S’il.clique.dessus,.il.est.conduit.vers.le.site.web.de.la.personne.
concernée.
Figure 6.10
Rich, Sophie, Cath,
James et Paul posent
devant le mur graffité à
l’extérieur du bureau.
La.première.chose.à.faire.est.d’ajouter.l’image.à.la.page,.dans.une.div.nommée :