Uf-1302: CREACIN DE PGINAS WEB

CON LENGUAJES DE MARCAS.

ACTIVIDAD: MAPA DE IMAGENES
E IMGENES DE SUSTITUCIN
Fecha: (22-02-2015)

EJERCICIO DE MAPA DE IMGENES ( SITIO DELEGACIONES).

Los mapas de imagen son partes de una imagen que pueden ser utilizadas para asignarle algn
tipo de comportamiento.

Para crear un mapa de imagen es necesario seleccionar previamente la imagen en la que se

desea crear el mapa, y abrir el inspector de propiedades de dicha imagen.

Estando seleccionada la imagen, ya es posible crear un mapa a travs de los botones del

inspector de propiedades que tienen el siguiente aspecto:

Si no te aparecen despliega el panel Propiedades para verlo completo.

Los tres ltimos botones son los que se utilizan para crear los mapas. Dichos mapas pueden
tener forma rectangular, circular, o libre, dependiendo del botn pulsado.

Al pulsar alguno de estos tres botones, cambia la apariencia del puntero al situarlo sobre la
imagen. Entonces ya es posible dibujar el mapa sobre la imagen, pulsando sobre los lugares
donde se desea que comience y finalice el mapa, as como sobre el resto de lugares (en orden)
que se desea que recorra el mapa en el caso de forma libre.

1
 Uf-1302: CREACIN DE PGINAS WEB
CON LENGUAJES DE MARCAS.
ACTIVIDAD: MAPA DE IMAGENES
E IMGENES DE SUSTITUCIN
Fecha: (22-02-2015)

Al estar seleccionado un mapa el inspector de propiedades cambia. Permite asignar un vnculo

y un texto alternativo a ese mapa como puedes ver a continuacin:

El primero de los botones, el de la flecha, debe pulsarse al finalizar la creacin de un mapa,

para que el puntero recupere su forma original al situarse sobre una imagen. De este modo, es
posible mover los puntos del mapa, en el caso de que no hayan sido creados en los sitios
deseados, para ajustarlos mejor a la imagen.

Pasos a realizar

1. Descargar la carpeta material, suministrada por el profesor, para obtener las

imgenes del ejemplo.
2. Enmaquetar la web con etiquetas semnticas: <header>, <section>,<nav>,< footer> y
dar estilos a estas zonas con una hoja de estilos externa.
3. Colocar la imagen del mapa completo en la seccin principal de la web.
4. Crear el mapa de imgenes en las zonas indicadas y enlazar cada una de las etiquetas
<area> obtenidas, dentro de la etiqueta <map>, a los enlaces que se indican en la
figura siguiente.

2
 Uf-1302: CREACIN DE PGINAS WEB
CON LENGUAJES DE MARCAS.
ACTIVIDAD: MAPA DE IMAGENES
E IMGENES DE SUSTITUCIN
Fecha: (22-02-2015)

5. Relacin de links:

http://www.barcelona.cat/
http://www.asturias.es/

http://www.madrid.es/

http://www.valencia.es/

http://www.granada.org/

https://www.facebook.com/ast
http://es.linkedin.com/in/astex

https://www.youtube.com/user/cecotpatronal

6. Para los botones inferiores de likedin, youtube y Facebook, utilizar la opcin de

imgenes de sustitucin de Dreamweaver Cs6.

Imagen de sustitucin. Rollover

Un rollover es una imagen que cambia por otra cuando el puntero se sita sobre ella.
Este tipo de imagen suele utilizarse en los mens o en los botones para desplazarnos a
travs de distintas pginas.

Veamos un ejemplo de rollover. Partiendo de las siguientes imgenes

3
 Uf-1302: CREACIN DE PGINAS WEB
CON LENGUAJES DE MARCAS.
ACTIVIDAD: MAPA DE IMAGENES
E IMGENES DE SUSTITUCIN
Fecha: (22-02-2015)

Para insertar un rollover hay que dirigirse al men Insertar, Objetos de Imagen, a la
opcin Imagen de sustitucin. En la nueva ventana hay que especificar la imagen
original y la de sustitucin.

Es preferible que la opcin Carga previa de imagen de sustitucin est activa. Si se

activa, la imagen de sustitucin se carga cuando se carga la pgina, de este modo se
evitan las demoras debidas a la descarga de la imagen cuando llega el momento de
que aparezca.

El Texto alternativo es el texto que aparece al situar el puntero sobre una imagen, o el
que aparecer en lugar de la imagen en el caso de que por algn motivo sta no pueda
ser mostrada en el navegador.

El texto alternativo puede asignarse a todas las imgenes, no slo a los rollovers.
Puede hacerse a travs del campo Alt del inspector de propiedades de la imagen
seleccionada.