HTML Cartes d'Image
Avec les cartes d'image HTML, vous pouvez créer des zones cliquables sur une image.
Cartes d'Image
La balise HTML <map> définit une carte d'image. Une carte d'image est une image avec des zones cliquables, qui sont définies par 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 pour la carte d'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> Comment Ça Marche ?
L'idée derrière une carte d'image est que vous devez pouvoir effectuer différentes actions selon l'endroit où vous cliquez dans l'image.
Pour créer une carte d'image, vous avez besoin d'une image et d'un code HTML qui décrit les zones cliquables.
L'Image
L'image est insérée à l'aide de la balise <img> . La seule différence avec d'autres images est que vous devez ajouter un attribut usemap :
<img src="workplace.jpg" alt="Workplace" usemap="#workmap"> La valeur de usemap commence par un dièse # suivi du nom de la carte d'image, et elle est utilisée pour établir une relation entre l'image et la carte d'image.
Astuce : Vous pouvez utiliser n'importe quelle image comme carte d'image !
Créer une Carte d'Image
Ensuite, ajoutez un élément <map> .
L'élément <map> est utilisé pour créer une carte d'image et est lié à l'image en utilisant l'attribut name requis :
<map name="workmap"> L'attribut name doit avoir la même valeur que l'attribut usemap de la balise <img> .
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 rectangulaire -
circle- définit une région circulaire -
poly- définit une région polygonale -
default- définit toute la région
Vous devez également définir des coordonnées pour pouvoir placer la zone cliquable sur l'image.
Shape="rect"
Les coordonnées pour shape="rect" viennent par paires, une pour l'axe des x et une pour l'axe des y.
Ainsi, les coordonnées 34,44 se trouvent à 34 pixels du bord gauche et à 44 pixels du haut :
Les coordonnées 270,350 se trouvent à 270 pixels du bord gauche et à 350 pixels du haut :
Maintenant, nous avons suffisamment de données pour créer une zone rectangulaire cliquable :
Exemple
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm"> C'est la zone qui devient cliquable et enverra l'utilisateur à la page "computer.htm" :
Shape="circle"
Pour ajouter une zone circulaire, commencez par localiser les coordonnées du centre du cercle :
337,300
Ensuite, spécifiez le rayon du cercle :
44 pixels
Maintenant, vous avez suffisamment de données pour créer une zone circulaire cliquable :
Exemple
<area shape="circle" coords="337, 300, 44" href="coffee.htm"> C'est la zone qui devient cliquable et enverra l'utilisateur à la page "coffee.htm" :
Shape="poly"
La 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.
Par exemple, une forme de croissant !
Comment pouvons-nous faire en sorte que le croissant dans 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 viennent par paires, une pour l'axe des x et une 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"> C'est la zone qui devient cliquable et enverra l'utilisateur à la page "croissant.htm" :
Carte d'Image 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("Vous avez cliqué sur la tasse de café !");
}
</script> Résumé du Chapitre
- Utilisez l'élément HTML
<map>pour définir une carte d'image - Utilisez l'élément HTML
<area>pour définir les zones cliquables dans la carte d'image - Utilisez l'attribut HTML
usemapde l'élément<img>pour pointer vers une carte d'image
Balises d'Image HTML
| Balise | Description |
|---|---|
| <img> | Définit une image |
| <map> | Définit une carte d'image |
| <area> | Définit une zone cliquable à l'intérieur d'une carte d'image |
| <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 .