Cartes d'images HTML
Avec les images cliquables HTML, vous pouvez créer des zones cliquables sur une image.
Images cliquables
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 <area>balises.
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 l'image cliquable 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 image cliquable est que vous devriez pouvoir effectuer différentes actions en fonction de l'endroit où vous cliquez sur 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 <img>balise. La seule différence avec les autres images est que vous devez ajouter un usemapattribut :
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
La usemapvaleur commence par une balise dièse
#suivie du nom de l'image cliquable et est utilisée pour créer une relation entre l'image et l'image cliquable.
Conseil : Vous pouvez utiliser n'importe quelle image comme image cliquable !
Créer une image cliquable
Ensuite, ajoutez un <map>élément.
L' <map>élément est utilisé pour créer une image cliquable et est lié à l'image à l'aide de l' name
attribut required :
<map name="workmap">
L' nameattribut doit avoir la même valeur que l'
<img>attribut de usemap.
Les zones
Ajoutez ensuite les zones cliquables.
Une zone cliquable est définie à l'aide d'un <area>élément.
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 des coordonnées pour pouvoir placer la zone cliquable sur l'image.
Forme="rect"
Les coordonnées de shape="rect"viennent par paires, une pour l'axe des x et une pour l'axe des y.
Ainsi, les coordonnées 34,44sont situées à 34 pixels de la marge de gauche et à 44 pixels du haut :
Les coordonnées 270,350sont situées à 270 pixels de la marge de gauche et à 350 pixels du haut :
Nous avons maintenant 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 renverra l'utilisateur vers la page "ordinateur.htm":
Forme="cercle"
Pour ajouter une zone de cercle, repérez 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 :
Exemple
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
C'est la zone qui devient cliquable et renverra l'utilisateur vers la page "coffee.htm":
Forme="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 une 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 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 renverra l'utilisateur vers la page "croissant.htm":
Carte d'image et JavaScript
Une zone cliquable peut également déclencher une fonction JavaScript.
Ajoutez un clickévénement à l' <area>élément 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>
Résumé du chapitre
<map>Utiliser l' élément HTML pour définir une image cliquable- Utilisez l'élément HTML
<area>pour définir les zones cliquables dans l'image cliquable usemapUtilisez l' attribut HTML de l'<img>élément pour pointer vers une image cliquable
Balises d'images HTML
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Pour une liste complète de toutes les balises HTML disponibles, consultez notre Référence des balises HTML .