Comment créer une imagemap sans éditeur d’imagemap
ce qu’il faut savoir
• Utilisez des images 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 d’une image, ajoutez une propriété 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 de l’éditeur d’images cliquables. La plupart des éditeurs d’images vous montreront les coordonnées de votre souris lorsque vous pointez sur une image, c’est-à-dire toutes les données dont vous avez besoin pour démarrer avec les images cliquables.
Jonathan Munster/Getty Images
Créer une image cliquable
Pour créer une image cliquable, sélectionnez d’abord l’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.
Lors de l’insertion de l’image, vous ajouterez une propriété supplémentaire pour identifier les coordonnées de la carte :
class= »syntaxe-ql »>
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 choisissez. Les cartes prennent en charge trois types de formes différents :
- rect – forme rectangulaire ou quadrilatérale
- poly — Polygone ou forme de polygone
- cercle – un cercle
Pour créer une zone, vous devez isoler les coordonnées spécifiques que vous souhaitez cartographier. Une carte peut consister en une ou plusieurs zones définies sur une 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 (haut, haut).Donc, pour le haut à gauche 0,0 et le bas à droite 10,15, vous pouvez taper 0,0,10,15. puis incluez-le dans la carte :
class= »syntaxe-ql »>
pour un polygonevous mappez chaque x,y Coordonner séparément. Le navigateur Web concatène automatiquement le dernier ensemble de coordonnées avec le premier ensemble ; tout ce qui se trouve dans ces coordonnées fait partie de la carte.
class= »syntaxe-ql »>
cercle Une forme n’a besoin que de deux coordonnées, comme un rectangle, mais pour la deuxième coordonnée, vous pouvez spécifier un rayon ou une distance à partir du centre du cercle. Ainsi, pour un cercle de centre 122,122 et de rayon 5, vous pouvez écrire 122,122,5 :
class= »syntaxe-ql »>
Toutes les régions et formes peuvent être incluses dans la même étiquette de carte :
class= »syntaxe-ql »>
Précautions
Les images cliquables étaient plus courantes à l’ère du Web 1.0 des années 1990 et du début des années 2000. Les images cliquables constituaient souvent la base de la navigation sur les sites Web. Un concepteur créerait une sorte d’image pour indiquer les éléments de menu, puis configurerait la 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 la page.
Bien que la norme HTML prenne toujours en charge les marqueurs de carte, 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 corrompues peuvent affecter la valeur des images cliquables.
N’hésitez donc pas à continuer à utiliser cette technique stable et facile à comprendre – sachant qu’il existe des alternatives plus efficaces Mode avec des webdesigners.
Merci de nous en informer!
Dites-nous pourquoi !
D’autres détails ne sont pas assez difficiles à comprendre
