Créer une image interactive

La plupart des images illustrant une page d'un site web réagissent à une interaction de l'utilisateur, en ouvrant une page. Une "image interactive" est découpée en zone qui  ouvriront chacune une page différente.

Billet créé le :
04 déc 2020

1. La syntaxe HTML

Pour transformer une image en image interactive, il faut ajouter l'attribut usemap à la liste de base des attributs de la balise <img> :

exemple :

<img 
        alt=""
        src="image.png" 
        usemap="#carteFormationMap" 
        max-width="1200"
        width="98%" 
        height="auto"
/>

L'attribut usemap fait référence à l'identité d'une balise <map> figurant quelque part dans le code HTML associé à la page. Cette balise "map" définit la liste des zones  qui réagiront (clic - survol de la souris ...) selon la syntaxe <area alt="" shape="" coords="" href="" />

exemple : 

<map  name="carteFormationMap">
       <area 
                alt="" 
                shape="" 
                coords="" 
                href=""
         />
         ... 
         ...
</map>
L'attribut "shape" peut prendre les valeurs :

  • rect pour une zone ectangulaire ;
  • circle pour un zone circulaire ;
  • poly pour une zone polygonale.

<img alt="" src="/sites/default/files/jl/carteForm.png" usemap="#carteFormationMap" max-width="1200" width="98%" height="auto" />
 <map name="carteFormationMap">
            <area alt="AS" coords="6,130,56,214" href="/carteForm/btsas" shape="rect" />
            <area alt="CG" coords="61,130,108,214" href="/carteForm/btscg" shape="rect" />
            <area alt="CI" coords="118,130,165,214" href="/carteForm/btsci" shape="rect" />
            <area alt="COM" coords="170,130,220,214" href="/carteForm/btscom" shape="rect" />
            <area alt="GPME" coords="222,130,275,214" href="/carteForm/btsgpme" shape="rect" />
            <area alt="GTLA" coords="282,130,328,214" href="/carteForm/btgtla" shape="rect" />
            <area alt="MCO" coords="335,130,382,214" href="/carteForm/btmco" shape="rect" />
            <area alt="NDRC" coords="391,130,440,214" href="/carteForm/btsndrc" shape="rect" />
            <area alt="PIM" coords="446,130,495,214" href="/carteForm/btspim" shape="rect" />
  </map>

2. Forme : cercle

La syntaxe est : <area shape="circle" coords="x,y,R" href="l_url.htm">

  • x,y sont les coordonnées du centre du cercle ( x : abscisse , y : ordonnée)
  • R le rayon.

3. Forme : rectangle

La syntaxe est : <area shape="rect" coords="x1,y1,x2,y2" href="l_url.htm">

Si la forme rectangulaire se nomme ABCD ( cf : image)

  • x1,y1 sont les coordonnées du point A de la diagonale
  • x2, y2 sont les coordonnées du point C de la diagonale

4- Forme : polygone

La syntaxe est : <area shape="poly" coords="x1,y1,x2,y2,..xi,yi, ...x4,y4" href="l_url.htm">

Si la forme polygonale se nomme ABCDEF ( cf : image)

  • x1,y1 sont les coordonnées du sommet A ;
  • x2, y2 sont les coordonnées du sommet B  ;
  • x3, y3 sont les coordonnées du sommet C  ;
  • x4, y4 sont les coordonnées du sommet D ; 
  • x5, y5 sont les coordonnées du sommet E ; 
  • x6, y6 sont les coordonnées du sommet F.