Ici & Là

01 Société 02 Histoire 03 Science 04 Science fiction 05 SPIP 06 NTIC 07 Sondages 08 Divers
La meilleure façon de réaliser ses rêves est de se réveiller (Paul Valéry)

Accueil > SPIP > Navigation > Image Map : Tutoriels HTML > Créer une « Image Réactive » en associant une « Image Map » à une (...)

Créer une « Image Réactive » en associant une « Image Map » à une Image

samedi 14 janvier 2017, par François Daniel Giezendanner

Notez cet article
1 vote

 Préambule

Le thème développé ici complète celui traité dans l’article « Zones cliquables sur une image (Images Map) ».


 Introduction

Nous montrons ici comment utiliser les balises <img>, <map></map> et <area /> pour créer des « Image Réactive ».

La description et l’élaboration détaillées d’« Image Map » sont données dans les articles présentés succinctement ci-dessous avec leur exemple.


 L’« Image Map » et l’« Image Réactive » selon W3C

L’« Image Map » et l’« Image Réactive » sont décrites en détail dans les documents du W3C « 13. Les objets, les images et les applets - 13.6. Les images cliquables » et/ou « HTML 4.01 Specification - W3C Recommendation 24 December 1999 - 6. Image maps » (Voir aussi « HTML5 : A vocabulary and associated APIs for HTML and XHTML » : « 4.8.12 The map element », « 4.8.13 The area element » et « 4.8.14 Image maps »). Nous en présentons un exemple ici :

<IMG src="barrenavigation1.gif" usemap="#carte1" alt="Barre de navigation" />
<MAP name="carte1">
        <AREA href="guide.html" alt="Plan d'acc&egrave;s" shape="rect" coords="0,0,118,28" />
        <AREA href="recherche.html" alt="Recherche" shape="rect" coords="184,0,276,28" />
        <AREA href="raccourci.html" alt="Entr&eacute;e" shape="circle" coords="184,200,60" />
        <AREA href="top10.html" alt="Les dix premiers du hit-parade" shape="poly" coords="276,0,276,28,100,200,50,50,276,0" />
</MAP>

 Associer la map <map> à l’image <img> avec les attributs name et usemap

L’image <img> contient une attribut spécial usemap. Celui-ci doit désigner avec un nom unique et sans espace la carte imagée. C’est ce nom qu’on placera dans cet attribut usemap, ici usemap=« #carte1 ». Remarquez l’utilisation du symbole # (Cf. la remarque 2 ci-dessous)).

On active les régions actives avec l’élément <map>. Celui-ci n’a besoin que d’un seul attribut : name dont la valeur doit correspondre à celle utilisée pour l’attribut usemap vue juste avant : <map name="carte1">. C’est dans cet élément <map> que l’on définira les éléments <area> qui définissent les zones réactives.

Ainsi la « Carte d’Image » (« Image Map ») définie par la balise <map> et l’Image définie par la balise <img> sont associées par le fait que l’attribut name de la balise <map> et l’attribut usemap de la balise <img> ont la même valeur, ici « #carte1 ».

En d’autres termes, si la valeur de l’attribut name de la « Carte d’Image » (« Image Map ») <map> est par exemple « carte1 », alors la valeur de l’attribut usemap de l’image <img> doit être « #carte1 ».

Remarque 1 :
C’est la balise <map></map> qui permet de créer une « Carte d’Image », et elle prend deux arguments obligatoires :

  1. name : c’est le nom de la map (il doit être unique).
  2. id : c’est l’id de la map (unique aussi). À vrai dire, il n’a pas vraiment d’utilité, mais il est obligatoire pour respecter les normes W3C.

Remarque 2 :
Pourquoi met-on un # (ici l’attribut usemap=« #carte1 » dans l’image <img>) ?
Tout simplement parce que les maps sont considérées comme des ancres.

On peut donc mettre un argument tel que « autre_page.html#ma_map » pour une « Carte d’Image » (« Image Map ») se trouvant sur une autre page !


 Précisions concernant les attributs alt et title

L’article « 13. Les objets, les images et les applets - 13.6. Les images cliquables » précise :

alt = texte [CS : Case Sensitive]
Cet attribut spécifie un texte de remplacement pour les agents utilisateurs qui sont incapables d’afficher les images, les formulaires ou les applets. La langue du texte de remplacement est spécifiée par l’attribut lang.

title (titre de l’élément) [CS : Case Sensitive]
Cet attribut fournit des informations consultatives concernant l’élément sur lequel il se place.
l’attribut title peut annoter un nombre quelconque d’éléments. Veuillez consulter la définition de l’élément pour vérifier si celui-ci gère cet attribut.

Les agents utilisateurs peuvent restituer les valeurs des attributs title de diverses façons. Les navigateurs visuels peuvent, par exemple, afficher leur valeur sous la forme d’une « infobulle » (un bref message qui apparaît quand le dispositif de pointage reste au-dessus d’un objet). Dans le même ordre d’idée, les agents utilisateurs sonores peuvent vocaliser les informations de titre. Par exemple, le placement de l’attribut sur un lien permet aux agents utilisateurs (visuels et non-visuels) d’indiquer à l’utilisateur la nature de la ressource reliée.

Afficher des informations sur les éléments de l’image

Comment faire pour afficher des messages quand la souris passe sur une zone délimitée dans l’image ?

On ajoute simplement un attribut title à une zone. La balise <title> devient contextuelle et s’applique aux élément définis à l’intérieur de l’image, par des balises <area>.

<map name="map1">
   <area href="" shape="rect" coords="0,0,120,120" title="Message contextuel" >
</map>

 « Image Réactive » (ou « Images Cliquables ») = Image + « Carte d’Image »

L’Image

L’insertion d’images dans une page web est courante, banale.
l’attribut usemap=« #carte1 » Permet de dire que l’image est une image réactive coté client, et désigne avec un nom unique et sans espace la « Carte d’Image » décrivant les zones réactives de l’image.

<img src="image.jpg" usemap="#carte1">

La « Carte d’Image »
Une « Carte d’Image » est aussi appelée « Image Map », « imagemap » ou « Webmaps ».

Une « Carte d’Image » est définie avec les deux balises <map></map> et <area />.

La Balise <map></map>

La balise <map></map> permet de déclarer que ce qui est entre la balise <map> d’ouverture et la balise </map> de fermeture, est une description de plusieurs zones définies avec des balises <area />.

<map name="carte1" id="carte1">
    <area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" />
    <area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" />
    <area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" />
    <area shape=...   ... />
    ...
</map>

L’attribut name=« carte1 » de la Balise <map> donne un nom à la « Carte d’Image ». Lorsqu’une image utilisera cette « Carte d’image », c’est ce nom qui devra être mentionné comme valeur de l’attribut usemap.

Une « Carte d’Image » est donc définie par l’ensemble des balises <area shape=...   ... /> et les balises balise <map></map> qui les entourent.

La Balise <area />

Cette balise permet de définir une zone réactive et le lien qui sera utilisé lorsque l’utilisateur activera la zone. Cette zone réactive est sensible au survol et au clique de la souris.
Si plusieurs zone réactives distinctes mènent vers un même lien, elles doivent être définies dans des balises <area /> différentes.
La balise area n’étant qu’une description, elle est fermée dans la balise d’ouverture.

<area shape="rect" coords="80,0,145,70" href="http://google.fr" alt="Google" target="_BLANK" />

Les attributs de la Balise <area /> :

  • coords=« ... » : coordonnées délimitant la zone réactive. Les coordonnées à inscrire changent suivant la valeur de l’attribut shape. Les valeurs à utiliser sont donc indiquées ci-dessous suite à chaque valeur de l’attribut shape. Les coordonnées sont indiquées point par point, en commençant par les coordonnées verticales, puis horizontales. Chaque valeur est séparée par des virgules. Les valeurs peuvent être exprimées en pixels ou en pourcentage de la largeur/hauteur de l’image.
  • shape=« ... » : définit le type de la zone réactive :
    • rect : zone de type rectangle. Les valeurs à inscrire dans l’attribut coords correspondent aux coordonnées de 2 points situés à 2 angles opposés du rectangle (soit 4 valeurs).
    • circle : la zone est un cercle. Les valeurs à inscrire dans l’attribut coords sont les coordonnées du centre du cercle, suivit du rayon du cercle (soit 3 valeurs).
    • poly : la zone est un polygone. Ce polygone peut avoir autant de coté que vous le désirez. Les valeurs à inscrire dans l’attribut coords sont les coordonnées de chaque point situé à un angle de la zone, dans l’ordre de parcourt du périmètre. Le dernier point définit sera automatiquement relié au premier point définit.
    • default : toute zone qui n’a pas été définie avec l’une des 3 valeurs précédentes utilisera cette zone qui couvre donc l’ensemble de l’image (sauf les zones définies avec l’une des 3 autres valeurs). L’attribut coords n’a pas a être définit.
  • href=« URL » : Lien hypertexte vers lequel pointe la zone réactive.
  • target=« ... » : zone d’affichage du lien.
    • nom d’un cadre : La page ciblée par le lien s’affichera dans le cadre dont vous aurez donné le nom comme valeur dans l’attribut name de celui-ci .(si toutefois celui-ci existe).
    • _blank : La page ciblée par le lien s’affichera dans une nouvelle fenêtre.
    • _parent : La page s’affiche en occupant la place qu’occupe le cadre qui définit le cadre ou se trouve de la page actuelle.
    • _self : La page s’affichera dans la fenêtre ou le cadre ou se situe l’image réactive.
    • _top : La page s’affichera dans la fenêtre ouverte actuellement en occupant toute la fenêtre (ceci fera disparaître les éventuels cadres de la fenêtre).
  • nohref=« ... » : la zone définie n’est pas réactive. Il ne se passera donc rien si l’utilisateur sélectionne cette zone.
  • alt=« ... » : permet de donner un nom à la zone (ce nom sera utilisé par les navigateurs nom graphique).
  • tabindex :« ... » : la touche « tab » permet de passer d’une zone à une autre grâce au clavier. Cet attribut définit l’ordre dans lequel la zone sera sélectionné lorsque l’utilisateur utilisera la touche de tabulation.

« Image Réactive » = « Carte d’image » associée à une image

Une « Image Réactive » (ou « Images Cliquables ») est l’association d’une « Carte d’image » à une Image. Il en résulte une image présentant plusieurs zones réactives qui ont des propriétés différentes. Généralement, chaque zone réactive définie dans une « Carte d’Image » permet lorsqu’elle est sélectionnée d’accéder à une page web différente.


 Sept exemples issus d’articles détaillés


 Exemple 1. Image Map : Liens dans une d’image

<map name="hollywood" id="hollywood">
     <area href="#" shape="rect" coords="13,63,84,150" title="Gwynneth Paltrow" />
     <area href="#" shape="rect" coords="110,160,190,260" title="Naomi Watts" />
     <area href="#" shape="rect" coords="170,10,250,110" title="Salma Hayeck" />
     <area href="#" shape="rect" coords="300,30,380,130" title="Kirsten Dunst" />
     <area href="#" shape="rect" coords="250,260,340,370" title="Jennifer Aniston" />
</map>
<img src="http://www.xul.fr/images/hollywood.jpg" width="400" height="380" usemap="#hollywood" border="0">

 Exemple 2. Balise <area> HTML5 – Zone cliquable ou lien dans une image

<img src="logoWindows.jpg" width="145" height="145" alt="Plan" usemap="#logo" />
<map name="logo">
     <area shape="rect" coords="0,0,70,70" href="http://41mag.fr" alt="Accueil" />
     <area shape="rect" coords="80,0,145,70" href="http://google.fr" alt="Google" target="_BLANK" />
     <area shape="rect" coords="0,80,70,145" href="#" alt="bleu" />
     <area shape="rect" coords="80,80,145,145" href="#" alt="orange" />
</map>

Les balises d’image :
<area> : Définit une zone réactive
<img> : Définit une image
<map> : Définit une relation « Carte d’Image »/Image


 Exemple 3. Balise MAP : Image map

<map name="ImgRefMap">
     <area shape="rect" href="http://www.startyourdev.com" title="Accueil StartYourDev" target="_blank" coords="25,25,75,75" />
     <area shape="poly" href="http://www.google.fr" title="Google" target="_blank" coords="1,1,100,1,100,100,75,75,75,25,25,25" />
     <area shape="poly" href="#" title="Page actuelle" target="_blank" coords="1,1,1,100,100,100,75,75,25,75,25,25" />
</map>
<img usemap="#ImgRefMap" src="../images/imagemap.png" />

 Exemple 4. Les images map ou images cliquables

<img src="i/cours/panneau.gif" alt="Orientation" width="374" height="162" border="0" usemap="#panneaux" />
<map name="panneaux" id="panneaux">
     <area shape="rect" coords="92,19,261,66" href="page-contact.html" alt="Contact" />
     <area shape="circle" coords="314,105,44" href="page-faq.html" alt="FAQ" />
     <area shape="poly" coords="18,100,42,83,190,103,183,148,36,132" href="page-home.html" alt="Accueil" />
</map>

 Exemple 5. usemap (HTML attribute

<map name="bigthings" id="bigthings">
     <area shape="rect" coords="35,4,205,108" href="http://en.wikipedia.org/wiki/Australia's_Big_Things" alt="Australia's Big Things (on Wikipedia)"/>
     <area shape="rect" coords="136,163,255,230" href="http://vwkombi.com/" alt="The VW Kombi, another Aussie icon"/>
</map>
<p><img src="giant-prawn.jpg" alt="The Giant Prawn at Ballina" usemap="#bigthings"/></p>

 Exemple 6. Images mappées et liens hypergraphiques

<p>
     <map name="ma_map" id="id_map">
           <!--informations de votre map-->
           <area shape="rect" coords="10,10,20,30" href="a.html" alt="vers a"/>
           <area shape="circle" coords="40,20,10" href="b.html" alt="vers b"/>
           <area shape="poly" coords="10,30,30,30,20,50" href="c.html" alt="vers c"/>
           <!-- ainsi de suite … -->
     </map>
</p>
<p>
        <img src="mon_image.png" height="100" width="100" usemap="#ma_map" alt="image"/>
</p>

la balise <map></map> permet de créer une map, et elle prend deux arguments obligatoires :

  • name : c’est le nom de votre map (il doit être unique).
  • id : c’est l’id de votre map (unique aussi). À vrai dire, il n’a pas vraiment d’utilité, mais il est obligatoire pour respecter les normes W3C.

Notons également que cette balise <map></map> est une balise inline : elle doit donc se situer au sein d’une balise block, telle que <p></p>.


 Exemple 7. Les balises <map> et <area />

<img src="/image/w3c.gif" alt="Le logo du W3C" usemap="#logo_w3c" />
<map name="logo_w3c" id="maMap">
     <area shape="rect" coords="0,0,31,31" href="http://www.w3c.org" alt="la partie gauche du logo du w3c" />
</map>

Remarque : en principe les attributs name et id de la balise <map> doivent avoir la même valeur, soit : <map name="logo_w3c" id="logo_w3c">

Utilisation des balises <map></map> et <area />

  • La balise <map></map> est une « Carte d’Image » de la page web xhtml (balise de type BLOC).
  • La balise <area /> est une zone réactive de la page web xhtml (balise de type EN LIGNE).

La balise <map> regroupe les différentes zones réactives d’une même image. Elle regroupe donc les balises <area />. La balise

possède obligatoirement un identifiant (attribut id). L’attibut name permet de faire réference à l’image sur laquelle on veut intégrer une ou plusieurs zones réactives. A noter que la valeur de l’attribut id doit être identique à celle de l’attribut name.

 Références


 Sources des exemples, documentation


 Outils pour créere des <area/>