Dans cet article, vous découvrirez ce qu’est une carte d’image, comment elle fonctionne et les étapes pour en créer une vous-même. Les cartes d’images sont largement utilisées sur Internet pour rendre certaines parties spécifiques d’une image interactives ou cliquables.
Table des matières
Qu’est-ce qu’une carte d’image ?
Une carte d’image est un type d’élément HTML qui permet de définir différentes zones actives (ou cliquables) sur une image. Elle peut être utilisée pour créer des infographies interactives, des menus de navigation basés sur des images, ou encore pour ajouter des liens hypertextes à certains éléments d’une photographie. L’utilisation d’une carte d’image rend ainsi la navigation plus intuitive et agréable pour l’utilisateur.
Fonctionnement et utilisation d’une carte d’image
Le fonctionnement d’une carte repose essentiellement sur deux éléments HTML : la balise <map> et la balise <area>. La première sert à définir la carte elle-même et ses caractéristiques, tandis que la seconde permet d’établir les zones actives au sein de cette carte. Voici comment elles fonctionnent :
- <map> : cette balise doit avoir un attribut « name » qui lui est propre, et qui sera ensuite référencé par l’image pour associer la carte à l’image concernée. Par exemple : <map name= »ma_carte »>
- <area> : cette balise est utilisée pour définir chaque zone active de la carte. Elle doit être placée à l’intérieur de la balise <map>, et possède notamment les attributs suivants :
- shape : qui définit la forme de la zone (rect, circle, poly)
- coords : qui précise les coordonnées de la zone en pixels
- href : qui indique le lien hypertexte associé à la zone cliquable
Une fois ces éléments déterminés, il suffit d’ajouter l’attribut « usemap » à la balise <img> de l’image concernée, avec comme valeur le nom de la carte créée précédemment :
<img src="mon_image.jpg" usemap="#ma_carte">
<map name="ma_carte">
<area shape="circle" coords="100,100,50" href="lien1.html">
<area shape="rect" coords="200,200,300,300" href="lien2.html">
</map>
Ainsi, lorsqu’un utilisateur clique sur une zone délimitée par un rectangle ou un cercle, il est redirigé vers la page web spécifiée dans l’attribut lien.
Créer sa propre carte d’image étape par étape
Maintenant que vous avez compris le fonctionnement d’une carte d’image, voici une méthode simple pour en créer une vous-même :
1. Choisir l’image et déterminer les zones cliquables
Sélectionnez une image sur laquelle vous souhaitez ajouter des zones cliquables, puis identifiez les éléments de l’image que vous voulez rendre interactifs.
2. Délimiter les coordonnées des zones à l’aide d’un logiciel de retouche d’images
Utilisez un logiciel de retouche d’images tel que GIMP ou Photoshop pour déterminer les coordonnées des zones cliquables. Pour cela, utilisez les outils de sélection (rectangle, cercle, lasso) pour entourer chaque élément interactif, puis notez les coordonnées (X,Y) qui apparaissent dans la barre d’état du logiciel.
3. Écrire le code HTML de la carte d’image
En vous basant sur les coordonnées obtenues précédemment, créez les balises <map> et <area> correspondantes dans votre code HTML. N’oubliez pas d’indiquer les liens hypertextes associés à chaque zone cliquable.
4. Intégrer la carte d’image à votre site web
Ajoutez l’attribut « usemap » à la balise <img> de l’image concernée, en spécifiant le nom de la carte créée précédemment. Testez le résultat sur plusieurs navigateurs pour vous assurer que les zones cliquables fonctionnent correctement.
Exemple de réalisation d’une carte d’image
Supposons que vous avez choisi une image représentant une carte du monde, et que vous souhaitez ajouter des liens vers des pages contenant des informations sur chaque continent. Voici comment procéder :
- Sélectionnez les continents sur l’image à l’aide d’un logiciel de retouche d’images, et notez les coordonnées correspondantes.
- Créez les balises <map> et <area> pour chaque continent, en spécifiant les coordonnées et les liens hypertextes.
- Ajoutez l’attribut « usemap » à la balise <img> de la carte du monde, et intégrez le tout à votre site web.
En suivant ces étapes, vous obtiendrez une carte du monde interactive avec des zones cliquables pour chaque continent, permettant aux utilisateurs de naviguer facilement vers les pages d’information souhaitées.
