Carte-image - Image map

En HTML et XHTML , une image cliquable est une liste de coordonnées relatives à une image spécifique , créée afin d' hyperlier des zones de l'image vers différentes destinations (par opposition à un lien d'image normal, dans lequel toute la zone de l'image est liée à une seule destination). Par exemple, une carte du monde peut avoir un lien hypertexte entre chaque pays et des informations supplémentaires sur ce pays. L'intention d'une image cliquable est de fournir un moyen simple de lier différentes parties d'une image sans diviser l'image en fichiers image séparés.

Du côté serveur

Les images cliquables côté serveur ont d'abord été prises en charge dans Mosaic (navigateur Web) version 1.1. Les images cliquables côté serveur permettent au navigateur Web d'envoyer des informations de position au serveur sur l'endroit où l'utilisateur clique dans une image. Cela permet au serveur de prendre des décisions pixel par pixel sur le contenu à renvoyer en réponse (les méthodes possibles consistent à utiliser des calques de masque d'image, des requêtes de base de données ou des fichiers de configuration sur le serveur).

Le code HTML de ce type d' image cliquable côté serveur nécessite que la <img>balise se trouve à l'intérieur d'une balise d'ancrage <a>...</a>et <img>doit inclure l' ismapattribut.

<a href="/imagemapper"><img src="image.png" ismap /></a>

Lorsque l'utilisateur clique à l'intérieur de l'image, le navigateur ajoute les coordonnées X et Y (par rapport au coin supérieur gauche de l'image) à l' URL d' ancrage en tant que chaîne de requête et accède à l' URL résultante (par exemple, /imagemapper?3,9).

Si le navigateur ne prend pas en charge, ismapla chaîne de requête ne doit pas être ajoutée à l' URL d' ancrage et le serveur doit répondre de manière appropriée (par exemple, en renvoyant une page de navigation en texte uniquement).

Côté client

Les images cliquables côté client ont été introduites dans HTML 3.2 et ne nécessitent aucune logique particulière pour être exécutées sur le serveur (elles sont entièrement côté client). Ils ne nécessitent pas non plus de JavaScript .

HTML pur

Une imagemap côté client en HTML se compose de deux parties :

1. l'image réelle, qui est incorporée avec la <img>balise. La balise d'image doit avoir un attribut usemap, qui nomme l'imagemap à utiliser pour cette image (plusieurs imagesmaps peuvent exister sur une même page).
2. Un <map>élément, et à l'intérieur de celui-ci, des <area>éléments, dont chacun définit une seule zone cliquable dans l'imagemap. Celles-ci sont similaires à la <a> tagdéfinition de l' URL à ouvrir pour un lien Web ordinaire. Un titleattribut peut être fourni, qui peut être affiché sous forme d' info - bulle si un utilisateur de bureau passe le pointeur de sa souris sur la zone. Pour des raisons d' accessibilité du Web , il est souvent important – et dans certains cas cela peut même être une exigence légale ou contractuelle – de fournir un altattribut décrivant le lien que le logiciel de lecture d'écran peut lire, par exemple, aux utilisateurs aveugles .

Les <area>éléments peuvent être des rectangles ( shape="rect"), des polygones ( shape="poly") ou des cercles ( shape="circle"). Les valeurs de forme sont des paires de coordonnées. Chaque paire a une valeur X et une valeur Y (de gauche/en haut d'une image) et est séparée par une virgule.

• Rectangle : définissez quatre coordonnées : "x1,y1,x2,y2"
• Polygone : définissez autant de coordonnées que vous le souhaitez (un multiple de deux) : "x1,y1,x2,y2, [...] xn,yn"
• Cercle : une paire de coordonnées et une autre valeur avec un rayon : "x1,y1,radius"

L'exemple suivant définit une zone rectangulaire ("9,372,66,397"). Lorsqu'un utilisateur clique n'importe où dans cette zone, il est redirigé vers la page d'accueil de Wikipédia en anglais .

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>

CSS

Une approche plus moderne consiste à superposer des liens sur une image en utilisant le positionnement absolu CSS ; cependant, cela ne prend en charge que les zones cliquables rectangulaires. Cette technique CSS peut être appropriée pour faire fonctionner correctement une image cliquable sur les iPhones , ce qui peut ne pas redimensionner correctement les images cliquables HTML pures.

Création et utilisation

Exemple de carte-image du Club . En cliquant sur une personne dans l'image, le navigateur charge l'article approprié.

Il est possible de créer des images cliquables côté client à la main à l'aide d'un éditeur de texte, mais cela nécessite que les concepteurs de sites Web sachent coder en HTML et énumérer les coordonnées des zones qu'ils souhaitent placer sur l'image. En conséquence, la plupart des images cliquables codées à la main sont de simples polygones.

Étant donné que la création d'images cliquables dans un éditeur de texte nécessite beaucoup de temps et d'efforts, de nombreuses applications ont été conçues pour permettre aux concepteurs de sites Web de créer des images cliquables rapidement et facilement, tout comme ils créeraient des formes dans un éditeur de graphiques vectoriels . Des exemples de ces applications sont Adobe Dreamweaver ou KImageMapEditor (pour KDE ), et le plugin imagemap trouvé dans GIMP .

Les cartes-images qui ne rendent pas évidentes leurs zones cliquables risquent de soumettre l'utilisateur à une navigation mystérieuse sur la viande . Même quand ils le font, où ils mènent peut ne pas être évident. Cela peut être partiellement résolu avec des effets de renversement.

images SVG

Étant donné que le format d' image Scalable Vector Graphics (SVG) fournit ses propres mécanismes pour ajouter des liens hypertexte et d'autres formes d'interactivité plus sophistiquées aux images, les techniques de carte d'image traditionnelles ne sont généralement pas nécessaires lorsque vous travaillez avec des images vectorielles au format SVG.

Voir également

• Navigation de la viande mystère

Les références