ACTIVIDAD 06
MAPA DE IMAGENES
Ing. Victor Manuel Chumpitaz Avalos. 1
Mapa de Imágenes
• 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 explicar, como podemos crear este tag html y los diferentes
atributos que posee este tag.
• Como veremos, 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.
Ing. Victor Manuel Chumpitaz Avalos. 2
1. 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= “mapa1”, para indicar el nombre del
mapa.
• Por tanto si queremos hacer un mapa que se llame ejemplo 1, escribiremos: <map name= “
mapa1”>
1.1 Etiqueta 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.
1.1.1 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.
Ing. Victor Manuel Chumpitaz Avalos. 3
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.
<area shape="RECT" coords="X1,Y1,X2,Y2" href="#">
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.
<area shape="CIRCLE" coords="X1,Y1,R" href="#">
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.
<area shape="POLY" coords=" X1,Y1, X2,Y2, X3,Y3, X4,Y4" href="#">
Ing. Victor Manuel Chumpitaz Avalos. 4
1.1.2 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”
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.
1.1.3 Atributo href
Aquí deberemos indicar el destino del área.
Ing. Victor Manuel Chumpitaz Avalos. 5
2. Usemap este es un atributo de la etiqueta <img>
Hasta ahora se ha indicado cómo podías escribir un mapa de imágenes y cómo definir su
área, pero no se ha 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=“#mapa1”, siendo mapa1 el nombre del mapa de imágenes que queramos
utilizar.
Ing. Victor Manuel Chumpitaz Avalos. 6
Ing. Victor Manuel Chumpitaz Avalos. 7
