Lorsque l'on créé un thème pour un site ou un blog, il est parfois possible de vouloir obtenir plusieurs liens au sein d'une seule et même image. Ainsi, si vous avez un menu graphique ou une carte avec différentes zones que vous voulez rendre cliquables, ce tutoriel est fait pour vous. On ne va donc pas découper morceau par morceau notre image pour leur donner un lien à chacun, mais utiliser le zonage HTML. Sachez de plus que découper votre image en morceaux augmentera alors le nombre de requêtes HTTP de votre serveur qui devra tous les charger pour les afficher. La conséquence logique : l'augmentation du temps d'affichage de votre site.

Selon moi, la meilleure technique consiste donc à créer une carte de votre image, afin de renseigner des zones à cliquer dedans. Cette technique est régulièrement appelée "Image Réactive" ou "Image Map". Exit donc les effets javascript ; on a à faire qu'à du xHTML.

Le tutoriel

On commence par afficher la fameuse image qui aura plusieurs zones, et on lui donne l'attribut USEMAP servant d'identifiant des futures zones.

<img usemap="#mamap" src="URLdel'image" alt="Texte alternatif" />

Ensuite, on créé notre fameuse MAP avec l'identifiant de l'image. Les zones seront faites avec la balise AREA. On détermine leur forme avec SHAPE qui peut être RECTangulaire, POLYGONale ou CIRCLE (circulaire). Enfin, on donne les coordonnées des zones avec COORDS sur les axes horizontaux (X) et verticaux (Y) <-Arrêtez de regarder ces fesses, voyons ! Le reste est classique, une balise de titre TITLE et de lien HREF pour finir le travail. Vous obtiendrez un exemple de ce genre :

<map name="mamap">
<area shape="rect/circle/polygon" coords="x1,y1,x2,y2,[...]" title="texte au survol de la zone" href="lelien">
<area shape="rect/circle/polygon" coords="x3,y3,x4,y4,[...]" title="texte au survol de la zone 2" href="lelien">
</map>

Explications des formes

La zone RECTangulaire aura deux points par les axes X et Y de départ et X2 et Y2 d'arrivé, ce qui donnera ceci :

<area shape="rect" coords="0,1,120,200">

La zone circulaire consiste à donner le point central et à définir la longueur du rayon (ici 8)

<area shape="circle" coords="25,34,8">

Enfin, vous l'aurez compris, dans le même principe, la zone POLYGONale devra être déterminée par plusieurs points. Le dernier enregistré fermera le polygone avec une ligne droite vers le premier.

<area shape="polygon" coords="0,1,45,70,57,34">

Où et comment trouver ces points ?

Ouvrez votre image avec votre éditeur d'image préféré. Sous Photoshop, par exemple, il faudra activer la fenêtre d'info pour obtenir précisément les coordonnées du point dans l'image où se trouve votre pointeurs.

Un peu plus loin

Il existe aussi une technique en CSS comme celle-ci, qui consiste à créer autant de zones que de classes en définissant leur hauteur et leur largeur. C'est l'idéal lorsqu'il y a beaucoup de zones de la même forme avec les mêmes distances dans l'image. En revanche, lorsqu'elles ne sont pas identiques, ça devient vite le souk dans le code.

Je vous conseille aussi cet autre tutoriel de SelfHTML