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.
Exemple
Il s'agit d'un exemple avec une zone réactive. Pour plusieurs zones il faudra répéter le code de la zone1 avec d'autres dimensions et un autre nom (zone2 etc...)
Le code
- Code: Tout sélectionner
<html >
<head>
<title>image maps en CSS</title>
<style type="text/css">
.image { /* bloc concernant l'image en arrière-plan */
width : 576px;
height: 432px;
background: url(monimage.jpg) top left no-repeat;
}
.zone1 { /* zone cliquable */
float: left; /* permet de donner une dimension à la balise a qui est une balise en ligne */
width : 150px;
height: 100px;
margin-left: 220px;
margin-top: 30px;
border: 1px dotted white; /* ajouté pour visualiser la zone*/
}
</style>
</head>
<body>
<div class="image">
<a class="zone1" href="#" title="zone 1 zoom"></a>
</div>
<p>La zone cliquable a été volontairement entourée d'une bordure pour pouvoir les visualiser.</p>
</body>
</html>
