MAPAS EN EL LENGUAJE HTML
Un mapa en HTML es una especie de combinación entre una imagen
y varios enlaces. De manera que, dependiendo de la zona de la
imagen que pinchemos accederemos a un enlace u a otro. Los mapas
son usados frecuentemente para acceder a las diferentes web de una
empresa por medio de una imagen del país o territorio por el que se
extiende.
mapa
Un mapa se define con la etiqueta <map> especificando su nombre mediante el atributo name.
La etiqueta <map> contendrá a su vez etiquetas <area> que definirán
las distintas zonas de la imagen que serán enlaces.
Cada una de las etiquetas <area> contendrá un atributo shape que
indicará la forma del área definida pudiendo tomar los siguientes
valores:
• "rectangle" o "rect" para definir una zona rectangular.
• "circle" o "circ" si es un área circular
• "polygon" o "poly" si es una zona con forma de polígono.
• "default" se utiliza para referirse al resto de la imagen que no
ha sido definida con ninguna región.
Para cada tipo de área habrá que definir sus coordenadas mediante
el atributo coords que varía su valor en función del tipo de forma
escogida:
• Para los rectángulos habrá que indicar las coordenadas de la
esquina superior izquierda (x1,y1) y la esquina inferior derecha
(x2,y2).
• Si es un círculo habrá que especificar el centro (x,y) junto
con el radio r
• Si es un polígono habrá que dar las coordenadas de cada uno de
sus vértices (x1,y1), (x2,y2), ….(xN,yN).
Con el atributo href="" indicaremos la URL a la que enlazará dicha
área, en caso de no desear establecer ningún enlace sustituiremos
este atributo por nohref (al que no le acompaña ningún valor).
Al igual que en las imágenes, se puede usar alt para mostrar un
texto alternativo en el caso que el navegador no pueda mostrarla.
Veamos la utilidad de los mapas con un ejemplo en notepad++:
<html>
<head>
</head>
<body>
<map name="capa_mapa">
<area shape="poly" coords="0,0,415,150" href="href="www.google.es"/>
<area shape="poly" coords="0,180,415,650" href="href="www.idela.es"/>
</map>
<img src="../imagenes/caja_mapa.jpg" usemap="#capa_mapa">
</body>
</html>
Ejemplo en Adobe Dreamwearver:
<body>
<img src="../imagenes/capa_mapa.jpg" alt="url de la capa"
width="415" height="650" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="6,6,411,4,410,183,3,168"
href="http://www.google.es" alt="google.es" />
<area shape="poly" coords="5,173,413,185,413,372,6,370"
href="http:www.ideal.es" alt="ideal.es" />
</map>
</body>
Los se mostrarán como aquí abajo.
