MAPAS DE

IMAGEN
EN HTML
¿QUÉ SON?
• Un mapa de imagen es la funcionalidad que permite
definir diferentes zonas "pinchables" dentro de una
imagen. El usuario puede pinchar sobre cada una de
las zonas definidas y cada una de ellas puede apuntar
a una URL diferente.
EJEMPLO EXPLICADO
• Muchas agencias de viaje utilizan mapas geográficos para
seleccionar el destino del viaje, un uso de los mapas sería
que una sola imagen que muestre un mapa de todos los
continentes sea dividida por contienentes. De esta forma,
el usuario puede pinchar sobre la zona correspondiente a
cada continente para que el navegador muestre la página
que contiene los viajes disponibles a ese destino.
ESTRUCTURA HTML
• Para crear un mapa de imagen, en primer lugar se
inserta la imagen original mediante la etiqueta
<img/>. A continuación, se utiliza la etiqueta <map>
para definir las zonas o regiones de la imagen. Cada
zona se define mediante la etiqueta <area/>.
<img src="mapa_mundo.gif“ usemap="#continentes" />
<map name="continentes">
<area/>
</map>
ETIQUETA <map>
Etiqueta <map>
Atributos comunes básicos, internacionalización y eventos

name = "texto" - Nombre que identifica

Atributos necesarios de forma única al mapa definido (es
obligatorio indicar un nombre único)
Tipo de elemento Bloque y en línea
Descripción Se emplea para definir mapas de imagen
ETIQUETA <area>
Etiqueta <area>
Atributos comunes básicos, internacionalización, eventos y foco
•href = "url" - URL a la que se accede al pinchar sobre
el área
•nohref = "nohref" - Para áreas no seleccionables
Atributos necesarios
•shape = "default | rect | circle | poly" - Tipo de área
•coords = "lista de números" - Se trata de una lista de
números que indican las coordenadas del área.
Tipo de elemento Etiqueta vacía
Se emplea para definir las distintas áreas que forman
Descripción
un mapa de imagen
FORMAS DE LAS AREAS
• Las zonas o regiones que se pueden definir en una imagen se crean mediante
rectángulos, círculos y polígonos. Se define en los atributos shape y coords.

Shape=
“default”. Selecciona toda el área No lleva.
“rect”. El área será rectangular.
“circle”. El área será circular.
“poly”. El área será poligonal.
coords=
“X1,Y1,X2,Y2” (coordenadas X e Y de los
vertices
“X1,Y1,R” (coordenadas X e Y del centro y
radio del círculo)
“X1,Y1,X2,Y2,...,XnYn” (coordenadas de los
vértices del polígono
MAPA EN LA IMAGEN
• Si una imagen utiliza un mapa de imagen, debe indicarlo
mediante el atributo usemap. El valor del atributo debe ser el
nombre del mapa de imagen definido en otra parte del
mismo documento HTML:
<img src="mapa_mundo.gif" usemap="#continentes" />
PA S O S PA R A
H A C E R U N M A PA
DE IMAGEN EN
HTML
1. INSERTAR LA IMAGEN
MEDIANTE LA ETIQUETA <img>
<img src="figuras.gif"/>
 2. DEFINIR EL MAPA CON LA
ETIQUETA <map>, Y ASIGNARLE
UN NOMBRE MEDIANTE EL
ATRIBUTO NAME
<map name="mapa_figuras">
</map>
3. DEFINIR CADA UNA DE LAS
ÁREAS QUE VA A TENER LA IMAGEN,
AGREGANDO ETIQUETAS <area/>
ADENTRO DE LA ETIQUETA <map>
<map name="mapa_figuras">
<area/>
<area/>
<area/>
<area/>
</map>
4. ASIGNAR LOS ATRIBUTOS DE
shape Y coords A CADA UNA DE
LAS ÁREAS, CORRESPONDIENDO A
LA VISUALIZACIÓN DE LA IMAGEN.
<map name="mapa_figuras">
<area shape="rect" coords="20,25,84,113"/>
<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24"/>
<area shape="circle" coords="130,114,29"/>
<area shape="rect" coords="19,156,170,211"/>
</map>
5. AGREGAR EL ATRIBUTO href A
CADA AREA, CON EL VALOR DE LA
DIRECCIÓN A LA QUE DEBE
DIRIGIRSE CUANDO SE DÉ CLIC.
<map name="mapa_figuras">
<area shape="rect" coords="20,25,84,113" href="rectangulo.html" />
<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24"
href="triangulo.html" />
<area shape="circle" coords="130,114,29" href="circulo.html" />
<area shape="rect" coords="19,156,170,211" href="rectangulo.html" />
</map>
6. ENLAZAR EL MAPA CON LA IMAGEN,
COLOCANDO A LA ETIQUETA < img> EL
ATRIBUTO usemap CON EL VALOR DE
name EN LA ETIQUETA MAP
<img src="figuras.gif" usemap="#mapa_figuras"/>
<map name="mapa_figuras">
<area shape="rect" coords="20,25,84,113" href="rectangulo.html" />
<area shape="polygon" coords="90,25,162,26,163,96,89,25,90,24"
href="triangulo.html" />
<area shape="circle" coords="130,114,29" href="circulo.html" />
<area shape="rect" coords="19,156,170,211" href="rectangulo.html" />
</map>
CÓDIGO COMPLETO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>MapaImagen</title>
</head>
<body>
<img src="figuras.gif" usemap="#mapa_figuras"/>
<map name="mapa_figuras">
<area shape="rect" coords="20,25,84,113" href="rectangulo.html" />
<area shape="polygon"
coords="90,25,162,26,163,96,89,25,90,24" href="triangulo.html" />
<area shape="circle" coords="130,114,29" href="circulo.html" />
<area shape="rect" coords="19,156,170,211" href="rectangulo.html" />
</map>
</body>
</html>
RENDERIZADO/VISUALIZACIÓN
INTEGRANTES
Yamil Acevedo Estrada
Jesús Ambrocio Camargo Leal
Jesús Emmanuel Campos
Santiago
Ángel Antonio Córdova
Álvarez
David Eduardo Espinosa Rojas
Karen Alexa Gonzales Lome
Ximena Jollet López
Gonzales
Jesús federico López
Saturnino
Marcela Martínez Lascurain
German Pozos Reyes
Griselda Sánchez Armenta
Karen Britzet Villalba Gil
FIN