Une image peut être utilisée comme lien. Dans ce cas le lien est du type hyperimage comme le lien composé de texte se dénomme hypertexte. Nous nous attacherons ici à décrire les possibilités qu'offrent des images en tant que lien.
En effet, les images offrent à l'utlisateur une surface cliquable plus ou moins large selon leurs dimensions. Par conséquent, un découpage en zones distinctes d'un élément graphique peut être un atout indéniable.
Imaginons un utilisateur ayant besoin de fabriquer des liens par rapport aux régions de France, dans cette optique, il lui suffirait de trouver une image adéquate puis de lui appliquer des zones de sensibilités différentes afin de créer une multitude de liens cliquables à partir d'une seule image.
C'est pourquoi, <img src ...> offrent les deux attributs cités plus bas afin de définir le type d'image sensible.
L'attribut ismap définit une image sensible côté serveur.
L'attribut usemap="Nom d'ancre" attribue un nom d'ancre à une image sensible côté client.
La commande map name="Ancre cible" entame la définition des zones sensibles de l'image.
La commande area shape="Forme"* coords="Coordonnées"** href="Adresse cible" permet de décrire une zone sensible.
*Forme | Description | **Coordonnées | Exemple |
---|---|---|---|
rect | Définit une zone rectangulaire | X1, Y1 = Coin supérieur gauche X2, Y2 = Coin inférieur droit |
<area shape="rect" coords= |
circle | Définit une zone circulaire | X, Y = Centre du cercle R = Rayon du cercle |
<area shape="circle" coords= |
polygon | Définit une zone polygonale | X1, Y1 = Premier point du polygone
X2, Y2 = Second point du polygone Xn, Yn = Nième point du polygone |
<area shape="polygon" coords= |
Toutes les coordonnées se prennent à partir de l'origine, c'est-à-dire le coin supérieur gauche de l'image |
![]() |
Une démonstration de cette commande |
<html> <head> <title>Un titre pertinent</title> <meta name="Description" content="..."> <meta http-equiv="Date" content="01/01/2000"> ... </head> <body> <map name="Ancre"> <area shape="Forme" coords="X1,Y1,X2,Y2,..." href="Lien cible"> </map> <img src="Adresse de l'image" width="Valeur" height="Valeur" usemap="#Ancre"> ... Diverses commandes HTML ... </body> </html> |