HTML
Cartes d'image
Recherche…
Syntaxe
-
<img usemap="#[map-name]"> -
<map name="[map-name]"></map> -
<area>
Paramètres
| Tag / Attribut | Valeur |
|---|---|
<img> | Vous trouverez ci-dessous les attributs spécifiques à la carte image à utiliser avec <img> . Les attributs <img> réguliers s'appliquent. |
usemap | Le name de la carte avec un symbole de hachage qui lui a été ajouté. Par exemple, pour une carte avec name="map" , l'image doit avoir usemap="#map" . |
<map> | |
name | Le nom de la carte pour l'identifier. À utiliser avec l'attribut usemap l'image. |
<area> | Vous trouverez ci-dessous des attributs spécifiques à <area> . Lorsque href est spécifié, ce qui rend la <area> un lien, <area> prend également en charge tous les attributs de la balise d'ancrage ( <a> ) à l' exception ping . Voyez-les dans les documents MDN . |
alt | Le texte de remplacement à afficher si les images ne sont pas prises en charge. Ceci n'est nécessaire que si href est également défini sur la <area> . |
coords | Les coordonnées indiquant la zone sélectionnable. Lorsque shape="polygon" , il convient de définir une liste de paires "x, y" séparées par des virgules (ie shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ). Lorsque shape="rectangle" , cela devrait être mis à left, top, right, bottom . Lorsque shape="circle" , cela doit être réglé sur centerX, centerY, radius . |
href | L'URL du lien hypertexte, si spécifié. S'il est omis, la <area> ne représentera pas un lien hypertexte. |
shape | La forme de la <area> . Peut être réglé à default pour sélectionner l'image entière (aucun coords attribut nécessaire), circle ou circ pour un cercle, rectangle ou rect d'un rectangle, et un polygon ou poly pour une région polygonale spécifiée par des points d'angle. |
Remarques
La liste de paramètres ci-dessus est modifiée à partir des documents MDN:
<map>et<area>.Il est possible de créer les coordonnées d'une carte d'image pour une image avec des formes plus simples (comme dans l'exemple d'introduction ci-dessus) avec un éditeur d'image qui affiche les coordonnées (comme GIMP). Cependant, il peut être plus facile en général d'utiliser un générateur de carte d'image, tel que celui-ci .
Introduction aux cartes d'image
La description
Une image cartographie est une image avec des zones cliquables qui agissent généralement comme des hyperliens.
L'image est définie par la <img> et la carte est définie par une <map> avec des balises <area> pour désigner chaque zone cliquable. Utilisez les usemap et name pour lier l'image et la carte.
Exemple de base
Pour créer une carte-image afin de pouvoir cliquer sur chacune des formes de l'image ci-dessous:
Le code serait comme suit:
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>
Vous devriez voir que le navigateur reconnaît les zones lorsque le curseur devient un pointeur. Voir une démonstration en direct sur JSFiddle, ou voir une démonstration ci-dessous:
