Webelix.net :: Trucs et astuces - CSS - Faire du Mapping sur une image (ImageMap)

Vous êtes ici : Home Page

Dossiers

Trucs et astuces

(CSS) Mapping image

Imprimer le document

Informations Générales

[436] Posts sur le forum

[514] Membres inscrits
Il y a en ligne :

0 Membre

1 Invité

Membre en ligne:
Aucun

Partenariat

Vous pouvez aider ce site à évoluer, en contribuant à son développement. Proposez vos idées de cours et/ou dossiers.
Rendez-vous dans « Partenariat » pour en savoir plus.

Prestataire

N°1 de l'hébergement, location de serveurs, nom de domaines et téléphonie.
(OVH est recommandé par Webelix.net)

Nos Partenaires

CSS - Faire du Mapping sur une image (ImageMap)

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.

Exemple d'une ImageMap

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