235
Étude de cas : Roma Italia
Chaque.marqueur.cartographique.est.mis.en.forme.en.fonction :
#voices ul li.l1 {
position: absolute;
padding-top: 16px;
background: url(../img/mapmarker-dot.png) no-repeat 2px top;
}
Le.cercle.du.marqueur.cartographique.est.incorporé.sous.forme.d’image.d’arrière-plan,.et.la.
classe.l1.indique.l’emplacement.numéro.un.(le.point.à.droite),.alors.que.l2.indique.l’emplacement.numéro.deux.(le.point.à.gauche)..Les.propriétés.d’emplacement.qui.positionnent.
chaque.marqueur.ne.sont.pas.indiquées..Nous.positionnons.en.effet.chaque.marqueur.de.
manière. dynamique. lorsqu’il. apparaît,. en. utilisant. un. style. incorporé.. Pour. ce. marqueur.
particulier,.il.s’agit.de.style="top: 61px; left: 53px;"..Soit.à.61 pixels.du.haut.de.
l’élément.ul.et.à.53 pixels.de.sa.gauche.
L’arrière-plan.blanc.sur.lequel.réside.le.texte.du.tweet.est.légèrement.transparent.et.possède.
une.ombre.portée.sur.les.bords.gauche,.droit.et.inférieur..Ces.deux.styles.sont.produits.en.
utilisant.respectivement.RGBa.et.box-shadow :
#voices ul li.l1 a {
display: block;
padding-left: 11px;
font: 11px/14px Georgia, serif;
color: #32312a;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
background-color: rgba(255, 255, 255, 0.78);
}
pitre 11,.aussi.référez-vous.à.ce.chapitre.pour.des.explications.sur.ces.deux.fonctionnalités..Notez.toutefois.que.l’opacité.RGBa.diffère.d’une.autre.fonctionnalité.CSS 3.appelée.
opacity..Elle.peut.être.appliquée.à.une.propriété.particulière,.comme.l’arrière-plan,.et.ne.
concerne.qu’elle..opacity,.en.revanche,.affecte.tout.dans.l’élément.qu’elle.modifie,.comme.
ceci :
#voices ul li.l1 a {
opacity: 0.35
...
}
Les.valeurs.pour.opacity.sont.analogues.à.celles.pour.RGBa.et.s’étendent.de 0.(entièrement.
transparent).à 1.(entièrement.opaque)..J’insiste.cependant.sur.le.fait.que.ce.réglage.modifie.
tout.l’élément..Si.nous.l’avions.utilisé.ici,.c’est.non.seulement.l’arrière-plan.blanc.qui.serait.
opaque.à.35 %,.mais.le.texte.du.tweet.également.
Lorsque. l’utilisateur. survole. un. marqueur. cartographique,. son. affichage. change. (voir.
Figure 10.7).
Étude de cas : Roma Italia
Chaque.marqueur.cartographique.est.mis.en.forme.en.fonction :
#voices ul li.l1 {
position: absolute;
padding-top: 16px;
background: url(../img/mapmarker-dot.png) no-repeat 2px top;
}
Le.cercle.du.marqueur.cartographique.est.incorporé.sous.forme.d’image.d’arrière-plan,.et.la.
classe.l1.indique.l’emplacement.numéro.un.(le.point.à.droite),.alors.que.l2.indique.l’emplacement.numéro.deux.(le.point.à.gauche)..Les.propriétés.d’emplacement.qui.positionnent.
chaque.marqueur.ne.sont.pas.indiquées..Nous.positionnons.en.effet.chaque.marqueur.de.
manière. dynamique. lorsqu’il. apparaît,. en. utilisant. un. style. incorporé.. Pour. ce. marqueur.
particulier,.il.s’agit.de.style="top: 61px; left: 53px;"..Soit.à.61 pixels.du.haut.de.
l’élément.ul.et.à.53 pixels.de.sa.gauche.
L’arrière-plan.blanc.sur.lequel.réside.le.texte.du.tweet.est.légèrement.transparent.et.possède.
une.ombre.portée.sur.les.bords.gauche,.droit.et.inférieur..Ces.deux.styles.sont.produits.en.
utilisant.respectivement.RGBa.et.box-shadow :
#voices ul li.l1 a {
display: block;
padding-left: 11px;
font: 11px/14px Georgia, serif;
color: #32312a;
-webkit-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 2px 3px rgba(0, 0, 0, 0.35);
background-color: rgba(255, 255, 255, 0.78);
}
pitre 11,.aussi.référez-vous.à.ce.chapitre.pour.des.explications.sur.ces.deux.fonctionnalités..Notez.toutefois.que.l’opacité.RGBa.diffère.d’une.autre.fonctionnalité.CSS 3.appelée.
opacity..Elle.peut.être.appliquée.à.une.propriété.particulière,.comme.l’arrière-plan,.et.ne.
concerne.qu’elle..opacity,.en.revanche,.affecte.tout.dans.l’élément.qu’elle.modifie,.comme.
ceci :
#voices ul li.l1 a {
opacity: 0.35
...
}
Les.valeurs.pour.opacity.sont.analogues.à.celles.pour.RGBa.et.s’étendent.de 0.(entièrement.
transparent).à 1.(entièrement.opaque)..J’insiste.cependant.sur.le.fait.que.ce.réglage.modifie.
tout.l’élément..Si.nous.l’avions.utilisé.ici,.c’est.non.seulement.l’arrière-plan.blanc.qui.serait.
opaque.à.35 %,.mais.le.texte.du.tweet.également.
Lorsque. l’utilisateur. survole. un. marqueur. cartographique,. son. affichage. change. (voir.
Figure 10.7).