Comment réaliser une images cliquable

Comment réaliser une images cliquable

  1. Objectifs

    • ِApprendre à travailler avec des images cliquables en HTML.
  2. Présentation

    • En HTML 5, on peut faire plusieurs zones de liens sur une seule image. On va ainsi dessiner des zones et attribuer un lien à chaqu’une d’entre elle.
    • C’est ce que l’on appelle une "image map" ou image cliquable en français , c’est ce qu’on a vu dans un article précédent.




  3. Comment réaliser une image cliquable

    • Préciser dans l’image une balise "map" avec l’attribut "usemap" en précisant son nom, pour plus d’information consulter l’article précédent.
    • .

    • Pour commencer je vais utiliser l’image coursProgrammation.png
    • <img src="coursProgrammation.png" width="483" height="415" alt="Comment réaliser une images cliquable" border="0" usemap="#coursProgrammation" />

    • Notez bien l’ajout d’un dièze (#) avant le nom de l’attribut usemap :
    • L’image affichée est la suivante :
    • Comment réaliser une images cliquable

    • Ajouter une balise <map> avec le nom correspondant. C’est ici que les zone cliquables seront définies. Cette balise peut-être placée n’importe où dans le corps de la page.
    • <map name="panneaux">
      ....
      </map>

    • area
      • Un élément <area> est une zone cliquable individuelle faisant partie d’une image map.

      Exemple:
      <img src="https://apcpedagogie.com/wp-content/uploads/2019/10/coursProgrammation.png" alt="Comment réaliser une images cliquable" width="483" height="415" class="alignnone size-full wp-image-37965" usemap="#coursProgrammation" />
      <map name="coursProgrammation" id="coursProgrammation">
      <area shape="rect" coords="26,43,117,120" href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/le-jquery" alt="JQuery" />
      <area shape="rect" coords="12,244,105,335" href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/jsp" alt="JSP" />
      <area shape="rect" coords="213,324,255,400" href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/Le-html" alt="HTML" />
      <area shape="circle" coords="431,263,47" href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/php" alt="PHP" />
      <area shape="circle" coords="210,42,47" href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/xaml" alt="XAML" />
      <area shape="circle" coords="376,68,47" href="https://apcpedagogie.com/cours-et-tutoriels/les_cours/cours-de-programmation/les-styles-css" alt="CSS" />
      </map>

    • on aura:
    • Comment réaliser une images cliquable

      JQuery JSP HTML PHP XAML CSS
  4. Détermination des coordonnées

    • Il faut savoir que X correspond aux coordonnées horizontales (abscisses) et Y aux coordonnées verticales (ordonnées).
    • Sous Photoshop, vous trouverez les coordonnées en appuyant sur F8 pour afficher le panneau des informations. Vous n’avez plus qu’à passer le curseur à l’endroit voulu pour lire les coordonnées du point voulu.
      1. Zone rectangulaire
        • Une zone rectangulaire est définie par la balise <area shape="rect" />. L’attribut coords prend pour valeur les coordonnées des coins supérieur gauche et inférieur droit, séparées par des virgules.
        • <area shape="rect" coords="x1,y1,x2,y2" />

      2. Zone polygonale
        • Une zone polygonale est définie par la balise <area shape="poly" />. L’attribut coords prend pour valeur la liste des coordonnées de chacun des points (avec un "retour" sur le point de départ).

        • <area shape="poly" coords="x1,y1,x2,y2,x3,y3,x4,y4,x1,y1" />

      3. Zone cercle
        • Une zone circulaire est définie par la balise <area shape="circle" />. L’attribut coords prend pour valeur la liste des coordonnées du centre du cercle et son rayon.
        • <area shape="circle" coords="x1,y1,r" />

———-

Bibliographie

  • Livre : HTML 5 Une référence pour le développeur web: Rodolphe Rimelé
  • HTML 5 et CSS 3 Mathieu Nebra



Abonnez vous à notre chaîne YouTube gratuitement