Aujourd’hui je vous présente une solution simple pour créer des zones réactives dans une images, uniquement avec des CSS.

Nous ne verrons ici que l’aspect technique, sans rentrer trop dans les détails au niveau du code.

Pour ce faire nous avons besoin d’une image, la voici :
Image Map

Le plus simple pour repérer les zones réactives d’une image, c’est de l’ouvrir dans un logiciel auquel vous avez accès aux coordonnées de votre image et curseur.

Nous allons pour cet exemple faire 2 zones réactives, une pour les carottes et une pour les radis, on relève la taille de l’image, les coordonnées X Y du début de chaque zones, ainsi que la taille de la zone à savoir largeur et hauteur.
On utilisera également une image PNG de 1×1 pixels, avec un fond blanc de 10% et la transparence, afin de remplir la zone réactive d’un voile laiteux au passage du curseur de la souris.
Dans cet exemple je n’ai pas pris la peine d’indiquer où se trouve les zones mais vous pouvez tout aussi bien remplir les zones avec une image en transparence, entourer d’un cadre,… bref je laisse libre cours à votre imagination.

Nous allons utiliser une liste pour présenter nos zones en l’occurence avec les éléments dl, dt et dd, nous réglons l’élément dl entourant nos zones en plaçant notre image en fond.

Voici le code :

dl#marcheMap{
	margin: 0;
	padding: 0;
	background: transparent url('marche.jpg') top left no-repeat;
	height: 600px;
	width: 450px;
	position: relative;
}

 

on initialise les éléments dt et dd :

dt{ margin: 0; padding: 0; position: absolute; font-size: 85%; display: none; }
dd{ margin: 0; padding: 0; position: absolute;  font-size: 85%; }

et enfin on déclare nos zones réactives :

/* ---------- Déclarations des Zones Réactives ---------- */

/* Coordonnées X Y du début de la zone */
dd#carottes{ left: 85px; top: 205px;  }

/* Taille de la zone à délimiter */
dd#carottes a{ position: absolute; width: 220px; height: 270px; text-decoration: none; }
dd#carottes a span{ display: none; }
dd#carottes a:hover{ position: absolute; border:1px dashed white; background: transparent url(hover.png) repeat; }

/* Bloc de description  */
dd#carottes a:hover span{
 display: block;
 text-indent: 0;
 vertical-align: top;
 color: #000;
 background-color: lightgrey;
 font-weight: bold;
 position: absolute;
 border: 1px solid gray;
 bottom: 100%;
 margin: 0;
 padding: 5px;
 width: 95%;
}

Voici notre exemple complet :
http://www.dimension-internet.com/dev/imagemap/