HTML Cartes d'images
Avec les cartes d'images HTML, vous pouvez créer des zones cliquables sur une image.
Cartes d'images
La balise HTML <map> définit une image cliquable. Une image cliquable est une image avec des zones cliquables. Les zones sont définies avec une ou plusieurs balises <area>.
Essayez de cliquer sur l'ordinateur, le téléphone ou la tasse de café dans l'image ci-dessous :
Exemple
Voici le code source HTML de la carte image ci-dessus :
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
Try it Yourself »
Comment ça marche ?
L'idée derrière une image cliquable est que vous devriez pouvoir effectuer différentes actions en fonction de l'endroit sur lequel vous cliquez dans l'image.
Pour créer une image cliquable, vous avez besoin d'une image et d'un code HTML décrivant les zones cliquables.
L'image
L'image est insérée à l'aide de la balise <img>. La seule différence avec les autres images est que vous devez ajouter un attribut usemap :
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
La valeur usemap commence par une balise de hachage # suivie du nom de la zone cliquable et est utilisée pour créer une relation entre l'image et la zone cliquable.
Astuce : Vous pouvez utiliser n'importe quelle image comme image cliquable !
Créer une image cliquable
Ensuite, ajoutez un élément <map>.
L'élément <map> est utilisé pour créer une image cliquable et est lié à l'image à l'aide de l'attribut name requis :
<map name="workmap">
L'attribut name doit avoir la même valeur que l'attribut <img> de usemap.
Les zones
Ensuite, ajoutez les zones cliquables.
Une zone cliquable est définie à l'aide d'un élément <area>.
Forme
Vous devez définir la forme de la zone cliquable, et vous pouvez choisir l'une de ces valeurs :
rect- définit une région rectangulairecircle- définit une région circulairepoly- définit une région polygonaledefault- définit toute la région
Vous devez également définir certaines coordonnées pour pouvoir placer la zone cliquable sur l'image.
Shape="rect"
Les coordonnées de shape="rect" sont présentées par paires, une pour l'axe des x et une pour l'axe des y.
Ainsi, les coordonnées 34,44 sont situées à 34 pixels de la marge gauche et à 44 pixels du haut :
Les coordonnées 270,350 sont situées à 270 pixels de la marge gauche et à 350 pixels du haut :
Nous disposons désormais de suffisamment de données pour créer une zone rectangulaire cliquable :
C'est la zone qui devient cliquable et enverra l'utilisateur vers la page "computer.htm":
Shape="circle"
Pour ajouter une zone de cercle, localisez d’abord les coordonnées du centre du cercle :
337,300
Spécifiez ensuite le rayon du cercle :
44 pixels
Vous disposez maintenant de suffisamment de données pour créer une zone circulaire cliquable :
C’est la zone qui devient cliquable et qui enverra l’utilisateur sur la page "coffee.htm":
Shape="poly"
Le shape="poly" contient plusieurs points de coordonnées, ce qui crée une forme formée de lignes droites (un polygone).
Cela peut être utilisé pour créer n’importe quelle forme.
Comme peut-être en forme de croissant !
Comment faire en sorte que le croissant de l’image ci-dessous devienne un lien cliquable ?
Nous devons trouver les coordonnées x et y pour tous les bords du croissant :
Les coordonnées sont fournies par paires, l’une pour l’axe des x et l’autre pour l’axe des y :
Exemple
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
Try it Yourself »
C’est la zone qui devient cliquable et qui enverra l’utilisateur sur la page "croissant.htm":
Image Map et JavaScript
Une zone cliquable peut également déclencher une fonction JavaScript.
Ajoutez un événement click à l’élément <area> pour exécuter une fonction JavaScript :
Exemple
Ici, nous utilisons l’attribut onclick pour exécuter une fonction JavaScript lorsque la zone est cliquée :
<map name="workmap">
<area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()">
</map>
<script>
function myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Try it Yourself »
Résumé du chapitre
- Utilisez l'élément HTML
<map>pour définir une image cliquable - Utilisez l'élément HTML
<area>pour définir les zones cliquables dans la zone cliquable - Utilisez l'attribut HTML
usemapde l'élément<img>pour pointer vers une image cliquable
HTML Balises d’images
| Étiquette | Description |
|---|---|
| <img> | Définit une image |
| <map> | Définit une image cliquable |
| <area> | Définit une zone cliquable à l'intérieur d'une image cliquable |
| <picture> | Définit un conteneur pour plusieurs ressources d'image |
Pour une liste complète de toutes les balises HTML disponibles, visitez notre Référence des balises HTML.
