Introduction

Dans certains cas, il peut être intéressant de mettre plusieurs liens dans une même image. Pour cela, nous allons avoir besoin de nouveaux attributs et balises.

Tout d'abord, la balise « map ». Elle va permettre d'indiquer à votre explorateur internet que l'image va contenir une carte, c'est-à-dire des coordonnées permettant de « découper » en zone l'image pour y placer des liens cliquables. Nous allons donner un nom à cette carte pour pouvoir, ensuite, l'appeler. Cela se fait grâce à l'attribut « name ».

<map name="ancre">
</map>

Entre la balise ouvrante et fermante de « map », nous allons indiquer les différentes zones cliquables. Cela va se faire grâce à la balise « area ».  Area n'a pas de balise fermante. 
Il y a trois types de formes que nous pouvons placer : 

- un cercle (circle) ;
- un rectangle (rect) ;
- un polygone (poly) ;

On indique la forme que l'on va utiliser grâce à l'attribut « shape ».(forme en anglais)

<map name="ancre">
     <area  
         shape="circle" > 
</map>

Maintenant, on doit indiquer les coordonnées. Là, cela se complique un petit peu. Il faut connaître les coordonnées et pour les trouver, j'utilise un logiciel de traitement d'image : GIMP. Il est gratuit, libre et Open source GIMP - GNU Image Manipulation Program. Il fonctionne sur la plupart des systèmes d'exploitation. Il suffit d'ouvrir l'image dans Gimp, et de placer votre souris là où vous voulez placer vos coordonnées. En bas, les coordonnées X, Y s'affichent, il n'y a plus qu'à les recopier.

Pour un cercle, il vous suffit d'indiquer son centre via les coordonnées X, Y et ensuite, on va indiquer le rayon.

À savoir : 
Cours de mathématique pour les coordonnées d'un point : Khan Academy.
Cours de mathématique pour le cercle : 
- Cercle, rayon ,centre, diamètre et corde - cours de 6eme
- Khan Academy

Pour vous montrer, je vais prendre l'image d'un chat et d'une pelote de laine. Admettons que je veille placer un lien sur la pelote de laine et un autre sur le chat. Je vais utiliser une forme circulaire que je vais placer sur la pelote :

<map name="ancre">
    <area  
        shape="circle"
        coords="70, 180, 40" > 
</map>

Coordonnées des x : 70
Coordonnées des y : 180
Rayon : 40

Maintenant que j'ai la forme, je dois indiquer le lien : 

<map name="ancre">
      <area  
         shape="circle"
         coords="70, 180, 40"
         href="pelote.html" alt="lien vers la page sur la pelote de laine" > 
</map>

Maintenant, je souhaite créer un rectangle pour mettre un lien sur l'image du chat.
Pour le rectangle, je vais utiliser les coordonnées du point en haut à gauche et en bas à droite du rectangle que je veux former.
Cela donne :

<map name="ancre">
<area  
    shape="circle"
    coords="70, 180, 40"
    href="pelote.html" alt="lien vers la page sur la pelote de laine" > 
<area shape="rect" coords="150, 50, 260, 230" href="chat.html" alt="lien vers la page traitant du chat">
</map>

Comme vous pouvez le constater, j'ai écrit une nouvelle balise « area ».

C'est bien, nous avons bien 2 zones de notre image qui sont cliquables. Mais comme vous pouvez le constater, la partie gauche du chat n'est pas cliquable. Il ne rentre pas tout entier dans notre aire. À la place du rectangle, il nous faut créer un polygone.

Pour informer votre navigateur web de la forme du polygone, nous allons lui indiquer tous ses sommets avec les coordonnées x et y. Cela donne : 

sommet 1 : 150, 50
sommet 2 : 230, 40
sommet 3 : 265, 110
sommet 4 : 240, 233
sommet 5 :  165, 230
sommet 6 : 118, 185
sommet 7 : 174, 112

Et en code : 

<map name="ancre">  
    <area shape="circle"  
        coords="70, 180, 40"  
        href="pelote.html" alt="lien vers la page sur la pelote de laine" >  
  
    <area shape="poly"  
        coords="150, 50, 230, 40, 265, 110, 240, 233, 165, 230, 118, 185, 174, 112"  
        href="chat.html" alt="lien vers la page traitant du chat">  
</map>

Attention !
Ce procédé en HTML pose cependant un problème : si l'image est adaptative par rapport à la taille de l'écran, le nombre de pixels va changer, et cela ne fonctionnera plus correctement. Pour régler ce problème, vous serez obligé de faire intervenir le JavaScript...
 

Vous pouvez retrouver ce code sur mon Gitlab : tutoriel sur le HTML