Contenu | Menu | Rechercher :

Le réseau des étudiants | Plan du site | A propos | Contact

Les cartes cliquables côté client

Un chapitre palpitant et cool Je vous suggère de le lire plus d'une fois, et de réaliser par la suite vos propres exemples, pour bien comprendre comment tourne la machine

• Qu'est-ce qu'une carte cliquable ou image interactive ?

• Syntaxe XHTML d'une carte image

  • Carte graphique à traiter

  • Les balises map (carte) et area (zone)

  • Règles d'imbrication des balises area et map

  • Les attributs de la balise map

  • Les attributs de la balise area

  • Zones réactives (hotspots : zones sensibles) avec l'attribut shape

  • Relier les balises map et img

• Exemple d'une carte cliquable

• Des images réactives avec des événements JavaScript

Qu'est-ce qu'une carte cliquable ou image interactive ?

Contrairement à une image cliquable, une carte interactive est une image découpée en plusieurs zones. Chacune de ces zones constitue un lien qui pointe vers une page quelconque. On les appelle en anglais image map (images mapées) car elles sont découpées en plusieurs régions à l'instar des cartes géographiques (map veut dire carte en anglais). La partie théorique est finie passons à la pratique.

Syntaxe XHTML d'une carte image

Carte graphique à traiter

On a l'image suivante :

On veut associer une page web à chaque forme géométrique de cette image. Exemple : si on clique sur le cercle on se rend à la page cercle.html, si on clique sur la flèche on se rend au fichier flèche.html, et ainsi de suite. Une image cliquable simple ne permet pas d'obtenir un tel effet car à chaque endroit de l'image où vous cliquez vous allez vous rendre à la même destination.

Les balises map (carte) et area (zone)

Les deux balises à utiliser pour indiquer les frontières des zones réactives sur notre image sont map et area. Voici le code XHTML minimum requis pour définir une carte cliquable côté client :

<map name ="nom_du_map">
<area shape="méthode" coords="coordonnées-méthode"  href="adresse-lien" />
<!--on ajoute autant de balises <area /> qu'il y a de régions à définir-->
</map>

Pour se conformer aux normes de la syntaxe XHTML (fermeture des balises). Vous devez ajouter une barre oblique à la balise <area /> pour la clôturer.

Règles d'imbrication des balises area et map

La balise "map" n'est autorisée que dans a, abbr, acronym, address, b, bdo, big, button, caption, cite, code, dd, del, dfn, div, dt, em, fieldset, h1, h2, h3, h4, h5, h6.

L'élément "map" doit contenir au moins une fois l'élément area, en plus il peut comporter toute sorte d'éléments XHTML en-ligne et bloc.

L'élément "area" ne peut être placé que dans la balise <map> et ne peut contenir aucune autre balise puisqu'il fait partie des éléments vides (classification des balises : éléments vides).

Les attributs de la balise map

• l'attribut name de la balise map va servir d'identifiant, et nous sera utile lorsqu'on va signaler au navigateur que le découpage généré par la balise <map> concerne telle ou telle image ;
• l'attribut id est obligatoire dans le DTD XHTML strict. Le XHTML plaide pour L'utilisation de l'attribut id au lieu de l'attribut name. Cependant les deux navigateurs Firefox et Netscape ne reconnaissent pas l'attribut id en ce qui concerne la liaison d'une image avec les régions réactives définies par la balise <map>. Pour se conformer à la syntaxe XHTML tout en s'assurant du fonctionnement des cartes cliquables sur tous les navigateurs. Passez les deux attributs name et id avec la même valeur.

Les attributs de la balise area

• l'attribut shape de la balise <map> sert à définir la méthode qui sera appliquée pour crée une zone réactive sur l'image. Cet attribut à trois valeurs :
  • "rect" pour un rectangle ;
  • "circle" pour un cercle ;
  • "polygon" pour un polygone irrégulier qui n'a pas de forme.
• l'attribut "href", vous êtes censés de le savoir, mais juste pour vous rafraîchir le mémoire, il sert à indiquer l'adresse de la page vers laquelle pointe le lien. La valeur doit être sous-forme d'une URI et suit les mêmes règles d'adressage relatif et absolu des liens textuels ;
• l'attribut coords permet de définir les coordonnées pour la méthode choisie.

• l'attribut alt est obligatoire et ce pour chaque balise <area />. Le texte alternatif sera repris par les navigateurs non graphiques pour afficher une brève description des régions réactives. Pour s'approfondir davantage dans l'accessibilité lisez le chapitre améliorer l'accessibilité des images interactives grâce à l'attribut alt (texte alternatif).

  Les deux navigateurs Internet Explorer 6 et 7 implémentent l'attribut alt d'une manière erronée. En fait Les deux navigateurs précités utilisent la valeur de l'attribut alt" pour afficher une info-bulle or ce n'est pas la raison d'être de cet attribut qui a été normalement conçu pour fournir un contenu alternatif aux navigateurs non graphiques.

• l'attribut title : il permet d'associer une info-bulle à une zone interactive qui sera affichée au passage de la souris. Cependant Internet Explorer 6 et 7 n'affichent pas le contenu de l'attribut title dans le cas où un texte alternatif a été spécifié. Lorsque vous spécifiez les deux attributs title et alt pour la balise <area />, le texte alternatif sera affiché sous forme d'info-bulle, et l'attribut title sera dépouillé de sa fonction.

  A noter que dans le cas de la balise <img /> l'attribut title (l'attribut alt et title dans la balise img) permet d'afficher l'info-bulle et de remédier facilement au problème des deux navigateurs Microsoft. Mais pour le cas de la balise <area /> c'est impossible, Dans l'état actuel des choses vous devez seulement songer à réduire les dégâts.

  Pour ce faire essayer d'attribuer un texte alternatif convenable qui peut être restitué par les navigateurs non graphiques et qui peut être affiché sous forme d'info-bulle dans les deux navigateurs Microsoft sans aucun problème, autrement dit mettez un attribut alt qui permet de remplir les deux fonctions info-bulle et texte alternatif (n'oubliez pas de spécifier l'attribut title qui sera retenu par les autres navigateurs).

Zones réactives (hotspots : zones sensibles) avec l'attribut shape

Voici comment on procède : On définit en premier lieu la méthode à suivre, puis les coordonnées de cette dernière.

	Si vous avez choisi la méthode "rect" vous serez amené à définir deux coordonnées. Comme vous pouvez le constatez dans l'image : X,Y pour le coin supérieur gauche et x',y' pour le coin inférieur droite. Exemple : coords="20, 30, 100, 140'". Pour les matheux, la surface du rectangle en pixels = (X'-X) x (Y'-Y). (X'-X) permet de définir la largeur. (Y'-Y) permet de trouver la longueur.
	La méthode "circle" nécessite le centre du cercle et le rayon : coords="X,Y,R". R représente la longueur du rayon.
	Pour la méthode "poly" on aura autant de coordonnées à définir qu'il y a de coins dans le polygone. dans cet exemple on aura à définir 5 coordonnées : coords="x1,y1, x2,y2, x3,y3, x4,y4, x5,y5".

Faites très attention les coordonnées sont fixés par rapport au coin supérieur gauche de l'image destinée au découpage, à ce point là les coordonnées sont "0,0".

Relier les balises map et img

Après avoir défini les coordonnées, il nous reste seulement à insérer notre balise <img />, mais on va lui ajouter un attribut "usemap", il aura pour valeur le nom attribué à la balise <map> (soit par l'attribut name ou id) précédé par un dièse "#", Ce protocole nous permet de réaliser une liaison logique entre l'image et les zones réactives définies par les balises <map> et <area />. Voici un exemple complet :

<map name="carte1" id="carte1">
<area shape="rect" coords="12,8,38,30" href="papa.html" alt="mon père" />
</map>
<img src="maFamille.jpg" usemap="#carte1" alt="ma famille"> 

Exemple d'une carte cliquable

Maintenant revenons à notre travail, l'image comprend les éléments suivants :

• un rectangle : la méthode appropriée est "rect" ;
• une flèche : la méthode adéquate est "poly" car sa forme est un peu complexe ;
• le cercle : méthode correspondante : "circle" ;
• le polygone avec 5 segments : on va utiliser "poly".

Code XHTML

<map name="carte" id="carte" alt="images réactives">
<area shape="rect" coords="13,25,74,67" href="rectangle.html" alt="rectangle" />
<area shape="circle" coords="163,93,33" href="cercle.html" alt="cercle" / >
<area shape="poly" coords="37,132,14,160,37,194,76,182,76,141" href="polygone.html" alt="polygone" / >
<area shape="poly" coords="196,198,140,197,139,209,197,210,194,223,217,204,194,184" href="arrow.html" alt="flèche" />
</map>
<img src="map.jpg" usemap="#carte" />

Rendu visuel

Des images réactives avec des événements JavaScript

Cette partie concerne les personnes habituées avec le JavaScript. Donc je conseille les novices à tourner la page.

Parfois on crée des cartes cliquables non pas pour la navigation, mais pour réaliser certains scripts avec du JavaScript. Pour cela vous devez ajouter l'attribut nohref qui signifie que la zone définie avec les attributs shape et coords n'est associée à aucun lien et qu'elle n'est pas destinée à la navigation (vous pouvez solliciter le même effet en omettant l'attribut href). Enfin mettez un événement quelconque (click, double click, survol par souris etc.) et associez lui une fonction JavaScript. Exemple :

<area alt=""rectangle shape="rect" coords="13,25,74,67" nohref="nohref" onclick="maFonction()" />

Testez l'image suivante. Mais ne me demandez pas comment réaliser ces effets. Je vous laisse creuser dans la toile.

Bon je viens de vider tout mon sac, et d'épuiser toute mon énergie A présent je peux vous garantir que vous avez appris tous ce qu'il faut savoir à propos des images réactives. Notre route ne va pas s'arrêter là. Car je vous ai préparé un petit bonus : créer des zones réactives d'une image interactive par Dreamweaver et FrontPage.

Avant de finir je tiens à vous dire qu'il y a aussi des images interactives côté serveur, qui sont dépassées et qui constituent des écueils pour l'accessibilité. Néanmoins rien ne vous empêche d'en savoir un petit aperçu juste pour accroître votre culture générale

buvetteetudiants.com © tous droits résérvés