ASIGNATURA: Diseño Web y Multimedia I

DOCENTE: Ing. Jorge Fernández A.

TIPO DE ACTIVIDAD: Docencia Práctica Autónoma

DETALLE_ACTIVIDAD: CONSULTA
ASIGNATURA: DISEÑO WEB Y MULTIMEDIA I
DOCENTE: Ing. Jorge Fernández Acevedo
REALIZADO POR: Ortega Quijozaca Galo Andrés
SEMESTRE: Séptimo
FECHA_ENVIO: 16/6/2019
TÍTULO: Mapas de Imagen
AUTOR: Galo Ortega

Consulta
Mapa de Imágenes
Los mapas de imágenes, permiten que los usuarios o en este caso los
programadores puedan especificar, regiones en una imagen o en un objeto y
especificar una acción a cada región de dicha región. Asi que cuando un usuario
activa dicha región se ejecuta la acción.

Ahora podemos decir que un mapa de imagen permite definir diferentes zonas
"pinchables" dentro de una imagen. Por lo que los usuarios pueden pinchar sobre
cada una de las zonas definidas y cada una de ellas puede apuntar a una URL
diferente que lo conducirá al sitio que contiene la URL designada.

Hay dos tipos de mapas de imágenes:

 En el lado del cliente: cuando un usuario activa una región de un mapa de

imágenes en el lado del cliente con un ratón, las coordenadas en píxeles son
interpretadas por el agente de usuario. El agente de usuario selecciona el
vínculo especificado por la región activada y lo sigue.

 En el lado del servidor. Cuando un usuario activa una región de un mapa de

imágenes en el lado del servidor, las coordenadas en píxeles son enviadas
al agente del lado del servidor especificado por el atributo href del elemento
A El agente del servidor interpreta las coordenadas y realiza alguna acción.

Se prefieren los mapas de imágenes en el cliente que los mapas de imágenes en

el servidor por dos razones: son accesibles a las personas que utilizan agentes de
-1-
ASIGNATURA: Diseño Web y Multimedia I
DOCENTE: Ing. Jorge Fernández A.

usuario no gráficos y permiten saber en todo momento si el apuntador está sobre

una región activa o no.

Por tanto, se tienen que emplear los mapas de imagen en el lado del cliente para
evitar problemas de accesibilidad.

¿Cómo se crea un mapa de imagen en el lado del cliente?

Un mapa de imagen en el cliente se define con la etiqueta <map> y cada una de
las zonas activas se define con la etiqueta <area>. La etiqueta <area> posee los
atributos shape y coords (su valor depende del valor de shape), que se emplean
para definir la forma geométrica de la zona activa, y el atributo href, que se emplea
para indicar la acción asociada.

Ejemplo:

Utilizando un círculo, dos rectángulos y un polígono se pueden definir fácilmente

cuatro zonas pinchables en la imagen mediante el siguiente código HTML:

<img src="imagen.gif" usemap="#mapa_zonas" />

<map name="mapa_zonas">
<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="mailto:rectangulo@direccion.com" />
<area shape="default" nohref="nohref" />
</map>

-2-
ASIGNATURA: Diseño Web y Multimedia I
DOCENTE: Ing. Jorge Fernández A.

FECHA DE
<Galo Andrés Ortega, > Ing. Jorge Fernández Acevedo ENTREGA
ESTUDIANTE DOCENTE 15/06/2019

-3-