Tuto : Mettre un lien ImageMap grâce au CSS et à l'HTML
Je me suis souvent demandé comment faire pour mettre un lien sur une image sans que le lien fasse toute l'étendue de l'image, qu'il se limite à une zone.
J'ai finalement trouvé que cela se reportait au mapping sur une image. Vous avez deux possibilités :
Je vais me limiter à l'explication avec le CSS pour le moment car c'est celui que j'utilise et je le trouve plus pratique.
Vous sélectionnez une image quelconque sur internet ou celle que vous avez préalablement créée, puis vous l'uploadez sur un hébergeur.
Une fois l'image uploadée, conservez le lien de cette dernière car il va nous servir.
Passons ensuite à la configuration du CSS, utilisez ce code :
#imagemap {
width: 120px;
height: 110px;
background: url(/images/telephone.jpg) top left no-repeat;
}
.zone {
float: left;
width: 31px;
height: 28px;
margin-top: 5px;
margin-left: 5px;
border: 1px dashed #aaa;
}
Ce code CSS se décompose en deux parties :
#imagemap :
Les balises "width" et "height" traduise la longueur et la hauteur de l'image, adaptez ces paramètres avec ceux de votre image.
"background: url()", mettez entre parenthèses le lien de votre image;
.zone :
"width" et "height" traduisent la longueur et la hauteur du lien.
"margin-top" et "margin-left" identifie la position de l'image par rapport à la structure.
"border" donne un bord à votre lien, mettez "0px" pour annuler le bord. "dashed" signifie le style de bordure, ici c'est en pointillées. Ce bord peut vous aidez à placer votre lien.
Il vous suffira ensuite d'insérer le code HTML ci-dessous :
<div id="imagemap">
<a href="#" title="lien 1" class="zone"></a>
<a href="#" title="lien 2" class="zone"></a>
<a href="#" title="lien 3" class="zone"></a>
</div>
Voilà tout ce qu'il y a à savoir sur le mapping. Bon courage! ;)
J'ai finalement trouvé que cela se reportait au mapping sur une image. Vous avez deux possibilités :
- soit vous insérez directement le "lien map" sur l'image grâce à l'HTML,
- soit vous insérez le "lien map" sur l'image via le CSS puis l'HTML,
Je vais me limiter à l'explication avec le CSS pour le moment car c'est celui que j'utilise et je le trouve plus pratique.
Vous sélectionnez une image quelconque sur internet ou celle que vous avez préalablement créée, puis vous l'uploadez sur un hébergeur.
Une fois l'image uploadée, conservez le lien de cette dernière car il va nous servir.
Passons ensuite à la configuration du CSS, utilisez ce code :
#imagemap {
width: 120px;
height: 110px;
background: url(/images/telephone.jpg) top left no-repeat;
}
.zone {
float: left;
width: 31px;
height: 28px;
margin-top: 5px;
margin-left: 5px;
border: 1px dashed #aaa;
}
Ce code CSS se décompose en deux parties :
- imagemap
- zone
#imagemap :
Les balises "width" et "height" traduise la longueur et la hauteur de l'image, adaptez ces paramètres avec ceux de votre image.
"background: url()", mettez entre parenthèses le lien de votre image;
.zone :
"width" et "height" traduisent la longueur et la hauteur du lien.
"margin-top" et "margin-left" identifie la position de l'image par rapport à la structure.
"border" donne un bord à votre lien, mettez "0px" pour annuler le bord. "dashed" signifie le style de bordure, ici c'est en pointillées. Ce bord peut vous aidez à placer votre lien.
Il vous suffira ensuite d'insérer le code HTML ci-dessous :
<div id="imagemap">
<a href="#" title="lien 1" class="zone"></a>
<a href="#" title="lien 2" class="zone"></a>
<a href="#" title="lien 3" class="zone"></a>
</div>
Voilà tout ce qu'il y a à savoir sur le mapping. Bon courage! ;)