Contenu | Menu | Rechercher :
Le réseau des étudiants | Contact
Vous êtes ici : Le réseau social des étudiants ==> Les cartes cliquables côté client

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 ?

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 :

carte cliquable (image interactive)

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>

images mapéesPour 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

Les attributs de la balise area

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.

image interactive (attribut shape = rect) 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.
carte graphique (attribut shape = circle) La méthode "circle" nécessite le centre du cercle et le rayon : coords="X,Y,R". R représente la longueur du rayon.
carte image (attribut shape = poly) 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".

images mapées 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".

images réactives

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 :

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

zones réactives d'une carte image

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.

zones réactives d'une carte interactice 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

Cacher ce panneau   Accéder à la version étendue du chat

Cacher ce panneau