Blog de Daiyiro

#BlogDeDaiyiro es sobre todo Bricolajes de Electrónica/Informática. ¡^-^¡

LO NUEVO:

12.10.13

11 - Edición En HTML - Mapas

MAPAS

Un Mapa es una imagen que permite realizar diferentes Hyperenlaces en función de la "zona" de la imagen que se pulse.



Las directivas para crear mapas son <MAP></MAP> y <AREA>.
La directiva <MAP> identifica al mapa y tiene el parámetro name para indicar el nombre del mapa.



La directiva <AREA> define las áreas sensibles de la imagen. Tiene los siguientes parámetros obligatorios :
shape = "tipo"
Indica el tipo de área a definir.
coords = "coordenadas"
Indica las coordenadas de la figura indicada con shape.
href = "URL"
Indica la dirección a la que se accede si se pulsa en la zona delimitada por el área indicada.
Los tipos de área pueden ser los siguientes:
rect
Área rectangular. Se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha.
poly
Polígono. Se deben especificar las coordenadas de todos los vértices del polígono. El visor se encarga de "cerrar" la figura.
circle
Circulo. Se debe especificar en primer lugar las coordenadas del centro del círculo y a continuación el valor del radio (en puntos).
Si dos áreas se superponen, se ejecutará la que se encuentre en primer lugar en la definición del mapa.

Es importante definir una última área que abarque la totalidad del gráfico para direccionar a una URL "por defecto", con el objeto de contemplar el caso de que no se pulse sobre un área definida.

Veamos un ejemplo completo:


<MAP name = "casa">
<AREA shape = "poly" coords = "2,62,57,62,28,1" href= "tejado.htm">
<AREA shape = "rect" coords = "21,101,35,138" href= "puerta.htm">
<AREA shape = "rect" coords = "2,64,57,138" href= "casa.htm">
<AREA shape = "circle" coords = "80,76,21" href= "arbol.htm">
<AREA shape = "rect" coords = "78,98,85,138" href= "tronco.htm">
<AREA shape = "rect" coords = "0,0,96,138" href= "dibujo.htm">
</MAP>


Para activar el mapa debemos indicar la imagen a mostrar, indicando que dicha imagen es tratada por un mapa. Para ello escribiríamos la siguiente directiva:



 
<IMG src = "grafico.gif" usemap = "#casa">

 
 
Como podemos observar, el proceso mas laborioso es el de determinar las coordenadas. Existen programas como PaintShopPro que permiten realizar este proceso de una manera sencilla, simplemente definiendo las zonas con el ratón. El programa te indica las coordenadas en el status.

1 comentario:

  1. Hola, me gustaría saber como poder averiguar las coordenadas que hay que poner de una imagen para así hacer mapas como en el del ejemplo.

    ResponderEliminar