Auteur : 3L!X | Créé le : 07/12/2006 à 16H00
Il est possible d'utiliser le CSS pour rendre une image réactive (mapping).
Cela évite les longs calculs de coordoonées des quatres coins de chaque map et le temps perdu si on ne possède pas un logiciel qui ne calcule pas tout ça à votre place.
Pour ce faire on va donner à la balise "a" des dimensions et une position sur une image en arrière-plan.
On donne les dimensions voulues à la zone et on la place comme souhaité en utilisant les marges par exemple.
Vous pouvez évidemment placer plusieurs zones réactives sur la même image.
Voici le code:
<html>
<head>
<title>ImageMap en CSS</title>
<style type="text/css">
<--
#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;
}
-->
</style>
</head>
<body>
<div id="imagemap">
<a href="#" title="chiffre 1" class="zone"></a>
<a href="#" title="chiffre 2" class="zone"></a>
<a href="#" title="chiffre 3" class="zone"></a>
<a href="#" title="chiffre 4" class="zone"></a>
<a href="#" title="chiffre 5" class="zone"></a>
<a href="#" title="chiffre 6" class="zone"></a>
<a href="#" title="chiffre 7" class="zone"></a>
<a href="#" title="chiffre 8" class="zone"></a>
<a href="#" title="chiffre 9" class="zone"></a>
</div>
</body>
</html>
Résultat :
|
Ici une image sans zone réactive 
|
Ici la même image avec des zones réactives |