Les cartes-images sont un moyen excitant et intéressant d’animer votre site Web. Grâce à elles, vous pouvez télécharger des images et en rendre des parties cliquables sur d’autres ressources en ligne. Si vous êtes pressé et que vous ne souhaitez pas télécharger un éditeur de carte-image, la création d'une carte à l'aide de balises HTML est simple.
Vous aurez besoin d’une image, d’un éditeur d’image et d’une sorte d’éditeur HTML ou d’éditeur de texte. La plupart des éditeurs d'images vous montreront les coordonnées de votre souris lorsque vous pointez sur l'image. Ces données de coordonnées sont tout ce dont vous avez besoin pour vous familiariser avec les cartes-images.
Création d'une carte d'image
Pour créer une carte-image, 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 d'une taille telle que le navigateur la redimensionnera.
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 carte-image, vous créez une zone sur laquelle vous pouvez cliquer sur l'image. Par conséquent, les coordonnées de la carte doivent être alignées sur la hauteur et la largeur de l'image sélectionnée. Les cartes prennent en charge trois types de formes différents:
- rect - un rectangle ou une figure à quatre côtés
- poly - un polygone ou une figure à plusieurs côtés
- cercle - un cercle
Pour créer les zones, vous devez isoler les coordonnées spécifiques que vous souhaitez mapper. Une carte peut comporter une ou plusieurs zones définies sur l'image qui, lorsqu'elles sont cliquées, ouvrent un nouveau lien hypertexte.
Pour un rectangle , vous cartographiez uniquement les coins supérieur gauche et inférieur droit. Toutes les coordonnées sont listées sous la forme x, y (over, up). Donc, pour le coin supérieur gauche 0,0 et le coin inférieur droit 10,15 vous tapez 0,0,10,15. Vous l'incluez ensuite dans la carte:
Pour un polygone , vous cartographiez chacun x, y coordonner séparément. Le navigateur Web connecte automatiquement le dernier ensemble de coordonnées au premier. tout ce qui est à l'intérieur de ces coordonnées fait partie de la carte.
Cercle les formes 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 du centre du cercle. Ainsi, pour un cercle dont le centre est 122 122 et un rayon de 5, vous écrivez 122 122,5:
Toutes les zones et formes peuvent être incluses dans la même étiquette de carte:
Considérations
Les cartes-images étaient beaucoup plus courantes entre le Web 1.0 et le début des années 2000 - les cartes-images 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 établirait une carte.
Les approches modernes encouragent la conception réactive et utilisent des feuilles de style en cascade pour contrôler l'emplacement des images et des hyperliens sur une page.
Bien que la balise de carte soit toujours prise en charge par la norme HTML, l'utilisation d'appareils mobiles avec des facteurs de forme réduits peut entraîner des problèmes de performances inattendus avec les cartes d'image. De plus, des problèmes de bande passante ou des images brisées attribuent la valeur d'une carte d'image.
Alors, n'hésitez pas à continuer à utiliser cette technologie stable et bien comprise - sachant qu'il existe actuellement des alternatives plus efficaces en vogue avec les concepteurs Web.
