Ce qu'il faut savoir
• Utilisez une image de taille normale que le navigateur ne redimensionnera pas. Vous aurez également besoin d'un éditeur d'images et d'un éditeur HTML ou de texte.
• Lors de l'insertion de l'image, ajoutez un attribut supplémentaire pour identifier les coordonnées de la carte.
• Par exemple:
Cet article explique comment créer des images cliquables à l'aide de balises HTML au lieu d'un éditeur d'images cliquables. La plupart des éditeurs d'images vous montreront les coordonnées de votre souris lorsque vous pointez dans l'image, c'est-à-dire toutes les données dont vous avez besoin pour démarrer avec les images cliquables.
Créer une Image Map
Pour créer une image cliquable, sélectionnez d'abord une image qui servira de base à la carte. L'image doit être de "taille normale", c'est-à-dire que vous ne devez pas utiliser une image si grande que le navigateur la mettra à l'échelle.
Lorsque vous insérez l'image, vous ajoutez un attribut supplémentaire qui identifie les coordonnées de la carte:
Lorsque vous créez une image cliquable, vous créez une zone cliquable sur l'image, de sorte que les coordonnées de la carte doivent s'aligner sur la hauteur et la largeur de l'image que vous avez sélectionnée. Maps prend en charge trois types de formes différents:
- rect-un rectangle ou une figure à quatre côtés
- poly-a polygone ou figure à plusieurs côtés
- cercle-un cercle
Pour créer les zones, vous devez isoler les coordonnées spécifiques que vous avez l'intention de cartographier. Une carte peut consister en une ou plusieurs zones définies sur l'image qui, lorsqu'on clique dessus, ouvrent un nouvel hyperlien.
Pour un rectangle, vous mappez uniquement les coins supérieur gauche et inférieur droit. Toutes les coordonnées sont répertoriées sous la forme x, y (au-dessus, en haut). Ainsi, pour le coin supérieur gauche 0, 0 et le coin inférieur droit 10, 15, vous devez taper 0, 0, 10, 15. Vous l'incluez ensuite dans la carte:
Pour un polygone, vous mappez chaque coordonnée x, y séparément. Le navigateur Web connecte automatiquement le dernier ensemble de coordonnées avec le premier; tout ce qui se trouve à l'intérieur de ces coordonnées fait partie de la carte.
Les formes de cercle ne nécessitent que deux coordonnées, comme le rectangle, mais pour la deuxième coordonnée, vous spécifiez le rayon ou la distance depuis le centre du cercle. Ainsi, pour un cercle avec le centre à 122, 122 et un rayon de 5, vous écrivez 122, 122, 5:
Toutes les zones et formes peuvent être incluses dans la même balise de carte:
Considérations
Les images cliquables étaient beaucoup plus courantes à l'ère du Web 1.0 des années 1990 jusqu'au tout début des années 2000. Les images cliquables constituaient souvent la base de la navigation d'un site Web. Un concepteur créerait une sorte d'image pour indiquer les éléments de menu, puis définirait une carte.
Les approches modernes encouragent la conception réactive et utilisent des feuilles de style en cascade pour contrôler le placement des images et des hyperliens sur une page.
Bien que la balise de carte soit toujours prise en charge dans la norme HTML, l'utilisation d'appareils mobiles avec de petits facteurs de forme peut entraîner des problèmes de performances inattendus avec les images cliquables. De plus, des problèmes de bande passante ou des images cassées remettent en question la valeur d'une image cliquable.
Donc, n'hésitez pas à continuer à utiliser cette technologie stable et bien comprise, sachant qu'il existe des alternatives plus efficaces actuellement en vogue auprès des concepteurs Web.
