Mapas de imágenes con HTML

Explicamos detalladamente el proceso para crear mapas de imágenes, osea, imágenes que tienes varios enlaces asociados en distintas áreas.
En capítulos anteriores hemos podido adentrarnos en el elemento básico de navegación del web: El enlace hipertexto. Hemos visto que estos enlaces son palabras, textos o imágenes que, al pinchar sobre ellos, nos envían a otras páginas o zonas.

Los mapas de imágenes es un nuevo planteamiento de navegación que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geométricas y funcionan exactamente del mismo modo que los otros enlaces. Podéis ver el funcionamiento de uno en este enlace.

En un principio, estos mapas no eran directamente reconocidos por los navegadores y recurrían a tecnologías de lado del servidor para ser visualizados. Hoy en día pueden ser implementados por medio de código HTML tal y como veremos en este capitulo.

Podemos utilizar estos mapas, por ejemplo, en portadas donde damos a conocer cada una de las secciones del sitio por medio de una imagen. También puede ser muy práctico en mapas geográficos donde cada ciudad, provincia o punto cualquiera representa un enlace a una página.

En cualquier caso, el uso de estos mapas ha de estar sistemáticamente acompañado de un texto explicativo que dé a conocer al usuario la posibilidad de hacer clic sobre los distintos puntos de la imagen. Frases como "Haz clic sobre tal icono para acceder a tal información" resultan muy indicativas a la hora de hacer intuitiva la navegación por los mapas de imágenes. Por otro lado, no esta de más introducir esa misma explicación en el atributo alt de la imagen.

Así pues, un mapa de imagen esta compuesto de dos partes:

  • La imagen propiamente dicha que estará situada como de costumbre dentro de la etiqueta <body> de nuestro documento HTML.
  • Un código, situado en el interior de la etiqueta <map>, que delimitara por medio de líneas geométricas imaginarias cada una de las áreas de los enlaces presentados en la imagen.
Imagen que ilustra el manejo de coordenadas en imágenes Las líneas geométricas que delimitan los enlaces, es decir, las áreas de los enlaces, han de ser definidas por medio de coordenadas. Cada imagen es definida por unas dimensiones de ancho (X) y alto (Y) y cada punto de la imagen puede ser definido por tanto diciendo a que altura (x) y anchura (y) nos encontramos. De este modo, la esquina superior izquierda corresponde a la posición 0,0 y la esquina inferior derecha corresponde a las coordenadas X,Y. Si deseamos saber qué coordenadas corresponden a un punto concreto de nuestra imagen, lo mejor es utilizar un programa de diseño grafico como Photoshop o Paint Shop Pro.

La mejor forma de explicar el funcionamiento de este tipo de mapas es a partir de un ejemplo práctico. Supongamos que tenemos una imagen con un mapa como esta:

Pulsa para ver la página de mis amigos Pulsa para ver mi novia Pulsa para conocer a mi Familia Pulsa para conocer mi trabajo Mapa de imágenes. Pulsa en cada una de los círculos.
Pulsa en los círculos para acceder a las secciones!

Dentro de ella queremos introducir un enlace a cada uno de los elementos que la componen. Para ello, definiremos nuestros enlaces como zonas circulares de pequeño tamaño que serán distribuidas a lo largo y ancho de la imagen.

Veamos a continuación el código que utilizaremos:

<table border=0 width=450><tr><td align="center">
<map name="mapa1">
<area alt="Pulsa para ver la página de mis amigos" shape="CIRCLE" coords="44,36,29" href="#">
<area alt="Pulsa para ver mi novia" shape="CIRCLE" coords="140,35,31" href="#">
<area alt="Pulsa para conocer a mi Familia" shape="circle" coords="239,37,30" href="#">
<area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" coords="336,36,31" href="#">
</map>
<img src="images/html/mapa1.gif" width="380" height="72" alt="Mapa de imágenes. Pulsa en cada una de los círculos." border="0" usemap="#mapa1">
<br>
Pulsa en los círculos para acceder a las secciones!
</td></tr></table>

Nota: Los href de las áreas van a #
Este es un ejemplo parcial de utilización de los mapas, faltaría colocar los href con valores reales y no con la #. Cada uno de los enlaces de las áreas -atributo href de la etiqueta <area>- deberían llevar a una página web. El ejemplo quedaría completo si creasemos todas las páginas donde enlazar las áreas y colocasemos los href dirigidos hacia dichas páginas. Como no hemos hecho las páginas "destino" hemos colocado enlaces que no llevan a ningún sitio, que, como puedes ver, se indica con el caracter "#".

Podéis observar, tal y como hemos explicado antes, que nuestro mapa consta de dos partes principales: la imagen y la etiqueta <map> que define las áreas de cada enlace.

Cada área se indica con una etiqueta <area>, que tiene los siguientes atributos:

alt
Para indicar un texto que se mostrará cuando situemos el ratón en el área.

shape
Indica el tipo de área.

coords
Las coordenadas que definen el área. Serán un grupo de valores numéricos distintos dependiendo del tipo de área (shape) que estemos definiendo.

href
Para indicar el destino del enlace correspondiente al área.

En este caso hemos utilizado unas áreas circulares (shape="CIRCLE"), que se definen indicando el centro del círculo -una coordenada (X,Y) y el radio, que es un número entero que se corresponde con el número de pixels desde el centro hasta el borde del círculo.

Tipos de áreas: shape distintas

Distintos tipos de áreas. Shape distintas. Existen tres tipos de áreas distintas, suficientes para hacer casi cualquier tipo de figura. En el dibujo que acompaña estas líneas se puede ver una representación de las áreas, que detallamos a continuación.

shape="RECT"
Crea un área rectangular. Para definirla se utilizan las coordenadas de los puntos de la esquina superior izquierda y la esquina inferior derecha. Tal como están nombradas dichas coordenadas en nuestro dibujo, el área tendría la siguiente etiqueta:

<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">

shape="CIRCLE"
Crea un área circular, que se indica con la coordenada del centro del círculo y el radio. A la vista de nuestro dibujo, la etiqueta de un área circular tendría esta forma:

<area shape="CIRCLE" coords="X1,Y1,R" href="#">

shape="POLY"
Este tipo de área, poligonal, es la más compleja de todas. Un polígono queda definido indicando todos sus puntos, pero atención, los tenemos que indicar en orden, siguiendo el camino marcado por el perímetro del polígono. A la vista del dibujo y los nombres que hemos dado a los puntos del polígono, la etiqueta <area> quedaría de esta forma.

<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">

Autor

Rubén Alvarez

Redactor de DesarrolloWeb.com

Compartir

Comentarios

Ikiam

10/11/2007
Me agrada mucho los manuales de esta pagina y he de decir que sin saber casi nada de programcion web, creo que vale aclarar que los mapas en imagenes "FUNCIONAN" bien excepto cuando trabajas con tamaño de imagenes por porcentajes, tambien funciona en tal situación, pero es muy impresiso y algo "difil de manejar" crio que es asi, no estoy seguro.
Un saludo desde la mitad del mundo.

ricardo

10/12/2008
me ha ayudado muxa la informacion pero si me pudieras ayudar mas con est tema esqe nuestro jefe nos ha mandado un trabajo muy importante qe tiene qe ver con esto, y yo qe soy nuevo en la empresa nose aun qe hacer podrias ayudarme un poquillo qe tal estas tu qe sabes manejarte con esto nose podrais decirme algo por aqui vale venga gracias y necesito ayuda sinome matan en el curro xd

andrea

26/5/2009
Pregunta
Oye disculpa copie el mismo codigo em mi pag pero no se ve la imagen como hago responde plis proyecto de liceo gracia sesta muy bueno...

Mario

29/5/2009
EXCELENTE
Muy buen artículo, no lo había encontrado tan bien explicado.

Muchas gracias!!

kazbam

03/7/2009
Muy Bien!!!
Gracias por la info, me tocó desarrolar un website y el que coordina el trabajo me dijo que hiciera la imagen, luego la cortara en todas las secciones que tendrían enlaces y la rearmara usando tablas para que pareciera una sola imagen. ¡Qué lata! Con esto quedó de lujo y sin tanto trabajo.
Muchas gracis.

amadeo

05/8/2009
buenisimo
me ayudo mucho... estoy haciendo un curso y lo explicaron maso menos ... lo entendi mejor por aca muchas gracias

jos

16/8/2009
Mapas de imagen con HTML
Cuando ponemos el cursor encima de una zona del mapa de imagen,aparece un rectangulo con el texto que indica lo que vamos a encontrar si pinchamos.
¿Porqué transcurridos unos segundos desaparece?
¿Se puede dejar fijo para que no desaparezca mientras no quitemos el cursor de encima?
( me sería de mucha utilidad) GRACIAS.

GabrielRAM

13/9/2009
Excelente tutorial!
Lo use y en un par de minutos ya tenia todo listo! Muchas gracias por el tutorial, me resulto muy util!!!

alexander

04/12/2009
util
muy bueno sirven muy bien gracias

ULTREICH

05/2/2010
Mil Gracias.
Mil Gracias por el artículo. Me ha servido sobremanera.
Soy nuevo en ésto pero ya logre hacer mi primera imagen con multi hipervinculos.
Saludos

HUGO

31/3/2010
MAPAS DE IMAGENES
EXCELENTE Y CLARO TU COMENTARIO SOBRE ESTE TEMA.

Omar

09/5/2010
Duda con href
Hola.! Primero que nada, muchas gracias por el artículo, es bastante bueno.!!!

Y ya que estamos en eso... una duda: como prueba, hise todo prácticamente como está en el texto para el mapa circular con link a una página [yo puse google...]

Todo sale de maravilla, sólo que al poner el cursor sobre la imagen no aparece acceso a la página, ni tampoco al darle click se abre ésta...
a qué se puede deber esta situación?

monis

17/5/2010
DUDAS
Muy interesante tu articulo, lo que no entiendo es que cuando uno abre le block de notas, digamos quiere solo poner la coodenadas de las esdquinas del rectanngulo, pues ovio uno la guarda com.htm y bare como pagina web, pero cuando le doy clip sobre las esquinas no me funciona.

de que forma hay que pone las coordenadas.

gracias

bye

Alexander

21/5/2010
Muy bueno pero falta disponer la imagen para hacer la práctica
Muy bueno pero falta disponer la imagen para hacer la práctica, inicialmente no sabía porqué no me funcionaba, luego me di cuenta que la imagen no quedaba a disposición.

Sebas

02/6/2010
incrustar el código map en CSS
Muy bueno el articulo. Quisiera saber como usar ese codigo en un archivo CSS que ya tengo para mi pagina. Mi archivo CSS incrusta la imagen en el html. ¿Donde coloco la etiqueta <map> que asigna las coordenadas para esa imagen?
Muchas gracias!

oscar

02/9/2010
a medias
fantastico tutorial, me quedo todo clarisimo, lo use para poner el contact table del myspace en el top banner y solo surgio un problema, las etiquetas no funcionan
le puse bien las coordenadas, los links y todo pero solo me sale la imagen y la etiqueta de la misma, lo demás como si no existiera....
sabes por que?

3ze018

19/10/2010
Muchas gracias
Muy buena explicación, me es de mucha ayuda ahora que estoy aprendiendo HTML... y debo confesar que me tenia un poco confundido este tema pero ya logre captar muy bien.
Muchas gracias.... xDDD!!1

Lancro

20/10/2010
Esta parte es crucial
Esta parte es muy importante para diseñar tu web con el photoshop y despues hacer que ese dibujo sirva de algo, en la mayoria de manuales html que me he leido, ademas de enfocarse en otras cosas, esta parte venia explicada muy superficialmente, aqui viene estupenda, felicidades por el articulo.

raper10

22/10/2010
muy bueno
un saludo a todo el staff de desarrollo web es una excelente sitio web aunque novato; me he estado quebrando la cabeza haciendo ejercicios y tratando de entender los temas a la perfeccion que voy viendo en el manual de html aunque quiero comentar que todo esta muy bien explicado solamente es, que son temas nuevos para mi y me tardo un poquito en procesarlos; hablando de esto entendi perfectamente todo poner cordenadas utilizar la etiqueta map etc excepto una cosa que no me ha quedado clara yo se como sacar el radio o el diametro de un circulo pero fisicamente o sea con un lapiz un cuaderno y una regla, pero no se como hacerlo por medio de la pc no se si se puede sacar por medio de photoshop cs5 o con otro programa ayuda por favor. de antemano gracias

steven

11/11/2010
exelente
gracias que buen tutorial es magnifico me sirvio de mucha ayuda!!! saludos desde colombia!!!

makartur

29/11/2010
dudas-map-area-shape-circle
Hola.
No sé como aplicar las coordenadas del asunto al que me refiero.
X e Y sé buscar en photoshop, pero el valor del radio como se halla? Porque el radio no es un punto o píxel en la imagen, es una línea.

Gracias de todas formas.
mamurrai

Ariel

26/12/2010
Gracias
Muchas gracias por todos los tutoriales!

Samuel García

10/1/2011
Pregunta
Como hago un link de una región de una imagen a otra región de la misma imagen. Un ejeplo sería que suponiendo que tengo una imagen del cuerpo completo, cómo puedo hacer que dando clic en la cabeza me lleve a los pies de esa misma imagen.

????

Elisabet

21/2/2011
Colores
Muchisimas gracias por la info ahora mi pregunta es, como puede darle color a las areas. Es que cuando hago las figuras en el mapa no se ven ya que tiene el mismo color del mapa y no hay lineas que delimiten la figura que hago???

Edgar Hernández

27/2/2011
¡Gracias!
Práctico, bien explicado. ¡Felicidades!

Un abrazo.

Leticia

15/3/2011
pregunta???
necesito q me ayudes, e exo 1 mapa de imagenes, pero en el href pongo una direccion de una pagina cuando pinxo en la part de la imagen me da error, no me abre la pagina¿sabeis xq?xfa ayudarme.besotes

PedazoLunar

29/3/2011
Me super sirvió
Muchas gracias por hacer este tipo de trabajo es excelente saludos desde cancun. http://www.youtube.com/pedazolunar

El Guf

10/5/2011
Targe=_Blank
Buenas!

Podrías decirme si es posible que los enlaces se abran en una ventana nueva?

Un saludo!

nicolas

26/5/2011
una pregunta...
como hago para averiguar las coordenadas de la imagen????? osea como se que codigos poner en la etiqueta "coords"?

photodesign

11/8/2011
Sobre SWF
Estoy intentando usar este metodo en un index despues de cargar una pequeña animacion flash, osea un archivo swf y mi intencion es que al pinchar al finalizar el swf, utilizar este metodo para entrar en la web. El problema es que ni usando etiquetas div en diferentes niveles el swf siempre se queda encima del map, y por tanto no es posible hacer click. Si alguien tienen una solucion, estaria encantado de escucharla. Gracias

kuku

27/9/2011
coordenadas en php
necesito desarrollar un sistema en el cual busque una imagen la cual esta almacenada en la base de datos y me la arroje a un mapa atreves de las coordenadas no se como hacer el vinculo

JORGE

31/10/2011
me gusto todo muy entendible gracias
ola que tal la verdad gracias por esto no le entendia pero ya nadamas que en lo de el radio como es???

erm3nda

28/11/2011
Radio
El radio se especifica en píxeles, tan sólo indicando el número.

Viendo el código fuente de esta misma pagina se puede observar...

shape="CIRCLE" coords="336,36,31" (Este código pertenece al último circulo del ejemplo)

Ojo* Radio es radio, radio 31 da un alto/ancho de 62px sobre el circulo... hay que tenerlo en cuenta.

Montse

20/1/2012
Muchas gracias y una duda!!
Muchas gracias por la explicación!!!
El código funciona perfectamente pero tengo una consulta.
¿Porqué cuando lo utilizas con el buscador Safari, al clickar encima de la zona con coordenadas, sale un recuadro en gris?
Lo he probado en Firefox y no sale ningún recuadro, simplemente te lleva al enlace nuevo.
Existe alguna manera de que en Safari no salga este recuadro?
Muchas gracias y un saludo,
Montse

Felipe

10/5/2012
MAPEO DE IMAGEN
Hola excelente, pero tengo una pregunta:
Tengo una imagen que quiero enviar por gmail o cualquier mail, en ella hay varios vínculos la imagen la realice en Dreanweaber, utilice mapeo, pero no se como hacer para guardarla y posteriormente enviarla por correo Gmail.

Si me pueden colaborar o facilitarme un tutorial te lo agradezco.

Gracias.

rosario

29/6/2012
necesito ayuda
me toco hacer una pagina en html donde LA IMAGEN LA TENGO QUE DIVIDIR EN VARIAS PARTES ALGO PARECIDO A CORDENADAS EL DETALLE ESQUE NI IDEA DE COMO HACERLO

Rebeca mirian felix da silva

04/10/2012
Evaluación (recuperación de informática).
<table border=0 width=450><tr><td align="center">

<map name="mapa1">

<area alt="Pulsa para ver la página de mis amigos" shape="CIRCLE" coords="927.929,47" href="martes.html">
<area alt="Pulsa para ver mi novia" shape="CIRCLE" coords="531,527,43" href="mercurio.html">
<area alt="Pulsa para conocer a mi Familia" shape="circle" coords="793,307,195" href="sol.html">
<area alt="Pulsa para conocer mi trabajo" shape="CIRCLE" coords="209,164,76" href="saturno.html">

</map>

<img src=milky2.png="0" usemap="#mapa1">
<br>
Pulsa en los círculos para acceder a las secciones!
</td></tr></table>

Jesus

03/11/2012
:) Feliz
Estube lellendo tu articulo y me parece perfecto
lo tendre en practica en este moment que haga una pequeña paina web antes de la grande

rosalia

01/3/2013
gracias
muchas gracias por el articulo, fue de gran ayuda, no habia podido encontrar tan explicado como este..=) sigan asi

yesid

14/6/2013
text en el mapa de imagen
hola a todos,
tengo una imagen, pero no quiero que el texto que tenga la imagen sea imagen, es decir, que el texto que tenga la imagen yo lo pueda ingresar, ¿esto es posible?

carlos

17/10/2013
mapa de imagenes con tema responsive
Yo tengo una duda:
Tengo hecho mi mapa de imagenes con su zona interactiva que funciona perfectamente. Pero lo tengo en un tema Responsive(la web se adapta a la pantalla desde la que estas abriendo la web) que al achicar la web, las imagenes se reducen pero las zonas interactivas no, por lo que todo se descuadra.

He probado de todas formas para que las zonas interactivas cambien de tamaño al igual que las imagenes. Pero no lo consigo.

¿alguien que me pueda echar una mano?

Gracias

Danny Diaz

27/5/2014
¿Funciona en una firma de correo?
¿Funciona esto en una firma de correo?

Herman

07/7/2014
Excelente.
lo mejor es que si abres dreamweaver, puedes modificar las coordenadas manualmente y acomodarlas a tu antojo... muchas gracias