HTML nos permite la opción de crear diferentes enlaces url dentro de una misma imagen. Es decir, podemos hacer que diferentes partes de una imagen tengan enlaces que nos permitan ir a diferentes destinos.
Las fotos en las que queramos introducir un mapa de imágenes deberán ser de uno de estos tres formatos: .jpg, .gif o .png, que son los tres formatos recomendables para todos los navegadores.
A continuación vamos a explicarte como podemos crear este tag html y los diferentes atributos que posee este tag. Como veremos a lo largo del artículo, lo difícil de crear un mapa de imágenes no es el mapa en sí, sino encontrar las coordenadas en la imagen. Aunque existen programas de edición de imágenes que nos ayudarían en esa tarea.
El tag map
Cómo ya podemos suponer, <map> es el tag necesario para poder crear un mapa de imágenes en html. Por supuesto, posee un cierre: </map>.
Este tag debe ir acompañado del atributo name= “x”, para indicar el nombre del mapa. Por tanto si queremos hacer un mapa que se llame ejemplo 1, escribiremos: <map name= “ejemplo1”>
Atributo area
El mapa de imágenes lleva un área dentro de la cual podremos pinchar para dirigirnos al destino que hayamos preestablecido. Pero, por supuesto, esa área se la tenemos que indicar al navegador para que la interprete.
La zona del enlace se indica dentro de la etiqueta, estableciendo las coordenadas de dicha área. También podemos escribirle un texto alternativo, un “alt”, al área.
Existen tres tipos de áreas. Vamos a explicártelas a continuación.
Atributo shape
Este atributo nos indicará el tipo de área que es. Como hemos dicho existen tres tipos: rectangular (rect), poligonal (poly) o circular (circle) y cada una de ellas tiene unas características diferentes. Vamos a profundizar un poco más en ellas.
- shape=“rect” : Este tipo de área crea un mapa de imagen rectangular. Para definir la zona que incluirá ese mapa deberemos definir la esquina superior izquierda del área y la esquina inferior derecha.
- shape=“circle” : Este tipo de área crea un mapa de imagen circular. Nosotros sólo debemos indicarle el centro de la circunferencia y el radio del mismo.
- shape=“poly” : Este tipo de área es la más versátil de todas, la que más posibilidades nos ofrece, ya que nos permite crear una zona personalizada. Para crearla debemos indicarle los diferentes puntos del polígono que hagamos y de una forma ordenada, siguiendo el camino que nosotros hemos trazado para hacerlo.
Bien, pero…¿y cómo indicamos las coordenadas? Gracias al siguiente atributo.
Atributo coords
El atributo coords se escribe de la siguiente forma: coords= “x,x,x,x”, entendiendo que cada “x” representa un punto en la imagen. Cada coordenada debe ir separada por comas.
Y el dónde nos dirigirá esa área nos lo indicará el atributo “href”
Atributo href
Aquí deberemos indicar el destino del área.
usemap
Hasta ahora te habíamos indicado cómo podías escribir un mapa de imágenes y cómo definir su área, pero no te habíamos dicho cómo indicar qué imagen es la que llevará el mapa. Esta acción se hace gracias al atributo usemap.
Este atributo se escribe de la siguiente forma: usemap=“#x”, siendo x el nombre del mapa de imágenes que queramos utilizar.
Nosotros hemos querido hacerte un ejemplo con la imagen que puedes ver más abajo. Dentro de estas bolas de billar, nosotros hemos hecho un mapa de imágenes con un área circular que coincide con la bola amarilla. Nuestra “href” es la página de inicio de este tutorial. También hemos hecho un área poligonal en la bola negra del fondo que te llevará al inicio del tutorial de css y otro área rectangular en el centro de la imagen, que te redirigirá al inicio del tutorial de php.
El código nos ha quedado de la siguiente manera:
<img src="/imagenes/prueba-mapa.jpg" alt="Prueba de mapa de imágenes" width="300" height="214" border="0" usemap="#billar">
<map name="billar">
<area alt="Si clícas aquí irás a la página de inicio del tutorial de html" shape="circle" coords="148,154,44" href="/curso-de-html/">
<area alt="Si clías aquí irás a la página de inicio del tutorial de css" shape="poly" coords="148,59,142,49,135,41,128,38,121,34,125,25,135,16,155,11,177,19,188,27,187,36,177,39,168,46,162,52,160,61" href="/curso-de-css/">
<area alt="Si clías aquí irás a la portada" shape="rect" coords="11,77,288,105" href="/">
</map>
Y el resultado lo verás si clícas en las zonas adecuadas:
¿Y si quieres que ese enlace que dices en href se abra en una página nueva como hay que hacerlo? he probado con target=»_blank» y no lo hace
Gracias por la información, cómo se puede hacer para que si la imagen que estoy mapeando se ajusta al dispositivo… las áreas de link se ajusten también o se mantengan en las coordenadas de la imagen?
Yo lo hice usando una libreria que se llama imageresizer y ajusta las coordenadas de las areas al tamaño que vaya tomando la imagen, oye yo tengo un problema, a ver si lo has realizado, estoy poniendo una imagen y quiero poner un input o un label dentro de un circulo que esta en la imagen, pero no se como hacer para que el elmento html quede anclado a un punto especifico de la imagen,
Hola, yo quiero adaptarlo a una imagen de un mapa de terrenos, lo que quiero es por ejemplo si digo mostrar en el mapa los terrenos libres, een la imagen se ponga el área en color rojo por ejemplo
buenas, estoy buscando un experto en mapeo para solicitar sus servicios
Que necesitas hacer?
Les dejo mi WhatsApp +591 71391070 necesito un desarrollo con un mapa de terrenos URGENTE
muy buen articulo gracias
Es posible definir el comando map en un archivo css para no tener que repetir el mismo codigo en todos los archivos html ?
Como puedo poner esa imagen mapeada en una firma electrónica?