Curso de html. ¿Cómo crear Mapas de Imagen en Html?.

Ya vimos en la página que hablaba sobre crear enlaces, como podiamos convertir una imagen en un enlace. Ahora se trata es de convertir una zona determinada o región de una imagen en una zona donde se puede pulsar, para ir a otra página o parte de la actual donde se encuentra la imagen.

Estas zonas se definen como puntos calientes.

Para crear estos puntos calientes, primero necesitamos generar un mapa de coordenadas, que incluirá otras etiquetas y atributos, que ayudarán a identificar exactamente la zona a marcar.

Este mapa lo generamos con el elemento <map> </map>. En el debemos señalar con un identificador único o <id> y de momento quedaría el código así:

El atributo name, se pone por motivos de compatibilidad, ya que algunos navegadores no soportan el selector id.

Una vez creado el elemento de bloque, tenemos que señalar cuales son los puntos calientes, para ello utilizamos la etiqueta <area>, cuya síntexis es la siguiente:

<area href=»pagdedestino.html» shape=»» coords=»» alt=»» />

Vamos a ver que es cada atributo que acompaña a la etiqueta area:

Bueno ya tenemos las partes que componen la etiqueta area que a su vez forma parte de la etiqueta map. Ahora viene lo más complicado, que no es otra cosa que calcular las coordenadas que nos harian falta, para crear alguna forma activa donde después podamos hacer clic.

Para realizar esto, primero debemos saber las coordenadas que los navegadores aplican a una imagen, es decir cómo se encargan los navegadores de medir una imagen, para ser posteriormente dividida en coordenadas por nosotros.

He colocado un dibujo, para intentar explicaros el proceso a seguir. Espero no me tengais en cuenta el poco arte que corre por mis venas a la hora de dibujar. En primera instancia pensé en buscar alguna imagen que poder descargar de internet, pero luego pensando en los derechos de autor y el tener que buscar una imagen libre y bla,bla,bla…. al final pensé, que para explicaros lo que os tengo que explicar, cualquier monigote que dibujase valdría. Y así es como nació el pollito maleducado de la imagen. Sería gracioso, que alguien me lo quisiese comprar como eslogan de alguna campaña publicitaria, o como mascota de algún torneo deportivo, jejeje.

Bueno bromas a parte, os cuento que los navegadores miden una imagen empezando por la esquina superior izquierda. He puesto marco a la imagen, para que cada lado haga las veces de un eje bidimensional, donde el borde superior representa el eje de las X y el borde izquierdo al eje de las Y.
Por tanto a la esquina superior izq, le corresponderian las coordenadas (0,0). La primera cifra corresponderia al eje X que aumenta hacia la derecha y la segunda al eje Y que aumenta hacia abajo, ambas separadas por un caracter de coma,«,». A modo de ejemplo os he colocado unas coordenadas ficticias, ya que no están calculadas, (50,60), donde el 50 sería eje X y el 60 el eje Y. El punto resultante, sería la coordenada del punto caliente que podía formar parte de una figura establecida con el atributo shape.

Ahora veamos como se forman las figuras, según el tipo o forma (shape) de cada una, para ello hay que saber lo siguiente:

Vamos a intentar poner en práctica todo lo anterior, creando distintas puntos calientes en el pollito.

primero vamos a crear una forma circle en la mano izquierda, para ello necesitamos tres datos:
coordenada x, coordenada Y, y el radio.

 

Posteriormente tan solo nos quedará añadir el atributo usemap a la etiqueta de imagen <img />, que representa el dibujo, de esta manera:

 

<img src=»pollito.png» usemap=»#partedelaimagen» alt=»pollito maleducado» />

Si acercais el puntero del ratón a la mano vereis como cambia, si pinchais os llevará al principio de la página.

Si hemos dado con las coordenadas, cosa nada fácil, la mano sería la única zona del dibujo donde poder pinchar con el ratón.

Ahora haremos lo mismo, apuntando al diente izquierdo con forma cuadrada. Solo necesitamos dos coordenadas como antes dijimos, la esquina superior izq y la inferior derecha.

el código quedaria así:

Y modificariamos también la etiqueta de imagen:

<img src=»pollito2.png» usemap=»#partedelaimagen2″ alt=»pollito maleducado2″ />

Si os fijais, hemos cambiado el atributo shape, lo hemos puesto como rect, también hemos cambiado los nombres de los mapas » id, lo que es totalmente lógico, ya que los id son selectores únicos, solo puede haber uno por página y por supuesto hemos cambiado la imagen, ya que una imagen solamente puede llamar a un elemento map cada vez, con el atributo usemap.

Solo quedaría hacer una zona caliente en forma de polígono, pero el procedimiento es exactamente igual a los dos anteriores, tan solo tendriamos que cambiar el shape, encontrar las coordenadas punto a punto, he ir poniéndolas seguidas, ya sabeis, primero X1,Y1,X2,Y2…….etc. Elegir el nombre de los selectores «id», la imagen, que podeis controlar con un selector de clase y aplicarle un float, para que el texto se situe alrededor. Por último no olvidar que la etiqueta <area> e <img>, son de autocierre por tanto se deben cerrar no olvidando el espacio correspondiente.
(<area   />).

Una forma de localizar los puntos o coordenadas, de manera un poco más desahogada, al menos yo la utilizo y me parece bastante efectiva, sobre todo en formas poligonales con numerosas coordenadas. Consiste en buscar los puntos como si se tratasen de formas circulares, aplicando el shape=»circle», ya que las coordenadas de X e Y, son los centros de las figuras circulares.
Podeis empezar con un radio medio-grande e ir bajándolo, hasta llegar a dejarlo en radio=1, de esta forma localizareis los puntos de cada esquina del polígono o rectángulo, mas rápidamente. Conviene que los vayais apuntando aparte y cuando ya los tengais todos, cambiar nuevamente el shape por «poly» o «rect».

Uno de los posibles usos de los mapas de imagen, podría ser en (nunca mejor dicho) mapas geograficos, o en tiendas online, donde la página principal es una imagen a forma de escaparate llena de productos a la venta. En fin la imaginación es poderosa, seguro se os ocurren mejores ideas donde aplicar esto que a mí.