Comment créer une carte d'image HTML?
Lorsqu'un lien est ajouté à une image en langage HTML (Hypertext Markup Language), ce lien est ajouté à l'image entière. Cela peut poser problème si le programmeur souhaite créer une seule image avec plusieurs zones ou boutons et que chaque zone est utilisée pour un lien différent. Une carte d'image HTML permet au programmeur de spécifier certaines zones où le lien ira, ce qui lui permet d'intégrer plusieurs liens dans une image. Cela se fait en spécifiant une forme pour le lien et en indiquant au HTML quelles coordonnées doivent être utilisées pour le lien.
Les images utilisées pour Internet sont mesurées en pixels. Connaître le nombre de pixels de l’image est la première étape essentielle de la création d’une carte. Par exemple, une image rectangulaire ayant une hauteur de 400 pixels et une largeur de 250 pixels est utilisée. Ensuite, le programmeur doit savoir comment mesurer avec précision la forme en coordonnées pour que la carte-image HTML fonctionne correctement.
Le coin en haut à gauche s'appelle 0,0 lorsque vous utilisez une carte graphique HTML. Dans ce cas, le coin inférieur droit serait 250 400. Les mesures sont faites avec la largeur d'abord, puis la hauteur. Une façon simple d’y penser est que la première mesure indique au HTML à quelle distance du bord gauche il doit aller et le second comment indiquer combien de pixels sont nécessaires. Si le programmeur souhaite qu'un point de la carte se trouve à 10 pixels du bord gauche et à 50 pixels du bas, les coordonnées sont 10,50.
Il existe trois formes différentes que le programmeur peut appeler pour une carte d’image HTML: rect, cercle et polygone. "Rect" signifie rectangle, et le programmeur doit d'abord taper les coordonnées pour le coin en haut à gauche, puis en bas à droite. Un cercle est spécifié en tapant les coordonnées où commence le cercle, puis le rayon du cercle. Un polygone est créé en tapant dans les cinq coordonnées, du haut vers la droite.
Le codage des images HTML va comme ceci: <nom de la carte = "test">
<area href = "url.html" shape = rect coords = "10,50,20,60">
<area href = "url.html" shape = circle coords = "10,50,4">
<area href = "url.html" shape = polygone coords = "10,50,12,55,15,60,13,65,8,55">
Chaque carte-image HTML doit avoir un nom et la section "url.html" est le lien où cette section de la carte-image mènera un utilisateur lorsqu'il cliquera dessus. Lorsque l'image est placée sur le site Web avec HTML, le programmeur doit écrire: usemap = "test". Cela indiquera à l’image quelle image HTML utiliser.