Enlaces dentro de una imagen

Email this to someoneShare on FacebookShare on Google+Share on LinkedInTweet about this on Twitter

El “image mapping” es una técnica que consiste en introducir dentro de una imágen o fotografía diferentes enlaces. Para ello existen varias formas de realizarlo, desde el tag HTML <MAP> <AREA> hasta recursos web como image-maps.com una web que se encarga de hacernos el trabajo más sencillo y visual.

Mapas de imágenes

<MAP> <AREA>

1. El tag principal entre el que deberá ir nuestro código es <map></map> que identifica que vamos a crear un mapa de imágenes. Este tag lleva asociado el atributo name= “nombre del mapa” al que le sigue entre comillas el nombre del mapa.

2. El siguiente tag es <area> el cual define las áreas que vamos a poder activar en esa imagen:

Shape= entre comillas establecemos el tipo de área a definir: rect (rectangular), poly (poligonal) o circle (circular).

Coords= entre comillas se establecen los pares de coordenadas de cada punto del área a activar. Estas coordenadas las podemos averiguar utilizando un programa de edición de imágenes (el Paint de windows por ejemplo). En las áreas rectangulares se deben especificar las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. En las poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del circulo y el valor del radio.

Href= se indica la dirección, entre comillas, de la página web a la que deseamos que se acceda si hacemos click en un área determinada.

Ejemplo del código anterior:

<img src="/ruta/imagen.jpg" width=145 height=213
    border=0 alt="nombre imagen" usemap="#nombre del mapa">

<map name="imagen">
  <area shape=circle coords="30,25,15"
      href="#"  alt="parte superior">
  <area shape=poly coords="5,170,35,150,
      40,260,30,170,60,180,52,200,
      39,200,30,200,0,195,0,185"
	  href="#"  alt="parte inferior">
</map>

3. Recordar que para que una imagen sea tratada como un mapa, además de el código anteriormente descrito, se debe incluir en el tag de imagen correspondiente a la imagen a mapear el atributo usemap=”#nombre del mapa”.

Online Image Mapper

Es una herramienta online para realizar mapas de imágenes de forma fácil e intuitiva. Los pasos para realizar el mapa son: subir la imagen a tu servidor web o alojarla en algún servidor gratuito, hacer click en Start Mapping y a continuación configurar todas las opciones en caso de que necesites utilizar alguna en especial, en caso contrario las dejaremos por defecto. Lo siguiente será establecer las partes de la imagen que deseas mapear. Redimensiónalas, y luego coloca la URL a la que deseas que esté enlazada la zona de la imagen que acabas de seleccionar, repetir este paso con todos los enlaces. Para finalizar haz clic en “Get Code” y copia el código sin modificarlo en tu web.

Este es un ejemplo de mapa de imagenes realizado con la web Online Image Mapper


opera Firefox Internet Explorer​ Image Map

Sé la primera persona en comentar

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

De conformidad con lo establecido en la LOPD, Adpv Advertising Provider S.L. garantiza la adopción de las medidas necesarias para asegurar el tratamiento confidencial de los datos de carácter personal. Así mismo le informamos de la inclusión de sus datos en un fichero con la finalidad de mantener su relación negocial o contractual con Adpv Advertising Provider S.L. y de la posibilidad de ejercer los derechos de acceso, rectificación, cancelación y oposición en la siguiente dirección: Ercilla, 26, 1Dcha., 48011, Bilbao, Bizkaia. Privacidad.