L'etiqueta <map> s'utilitza per definir una imatge amb zones seleccionables.
D'aquest manera un usuari pot punxar sobre cadascuna de les zones seleccionables definides i cadascuna d'elles pot apuntar a una pàgina diferent
Les zones o regions que es poden definir en una imatge es creen mitjançant rectangles, cercles i polígons.
Per crear un mapa d'imatge, en primer lloc s'insereix la imatge original mitjançant l'etiqueta <img>. Seguidament inclourem una etiqueta <map>
Es necessari informar de l'atribut usermap de l'etiqueta <img>. Aquest nom ha de ser el mateix que l'atribut name de l'etiqueta map.
D'aquesta manera es crea una relació entre una imatge i el seu mapa
<img src="exemple.gif" usemap="#imatgeExemple">
<map name="imatgeExemple">
<map name="imatgeExemple">
A continuació cal incloure, dins de l'etiqueta <map>, cadascuna de les àrees que es poden seleccionar de la imatge.
L'etiqueta <area> defineix cadascuna de les àrees dins d'un mapa d'imatge que permet ser seleccionada.
L'element <area> sempre està va dins d'una etiqueta <map>.
L'element <area> sempre està va dins d'una etiqueta <map>.
L'etiqueta <area> té entre altres 4 atributs importants
shape: indica la forma de l'àrea clicable (rectangles, cercles i polígons.)
coords: indica les coordenades de l'àrea clicacle
href: indica l'adreça que ens redirecciona quan cliquem l'àrea
alt: indica un text alternatiu per l'àrea. Va unit a l'atribut href
Exemple:
Exemple:
<!DOCTYPE html> <html lang=es> <head> <meta charset="UTF-8"> </head> <body> <img src="salo-de-lensenyament.jpg" width="512" height="316" border="0" usemap="#map" /> <map name="map"> <!-- #$-:Image map file created by GIMP Image Map plug-in --> <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --> <!-- #$-:Please do not edit lines starting with "#$" --> <!-- #$VERSION:2.3 --> <!-- #$AUTHOR:Super --> <area shape="rect" coords="68,44,236,122"
alt="Salo ensenyament" href="http://www.ensenyament.com/ca/" /> <area shape="circle" coords="380,60,47"
alt="Fira barcelona" href="http://www.firabarcelona.com/ca/" /> </map> </body> </html>
En aquest enllaç podeu veure un exemple de com funciona les etiquetes <map> i <area>
Cap comentari:
Publica un comentari a l'entrada