Acerca de los mapeos de imágenes

Un mapa de imagen es una imagen que se ha dividido en regiones o zonas interactivas. Cuando

el usuario hace clic en una zona interactiva, se realiza una acción (se abre un archivo nuevo,

por ejemplo).

Los mapas de imagen del lado del cliente almacenan la información acerca de los vínculos de

hipertexto en el documento HTML en lugar de hacerlo por separado en un archivo de mapa

como hacen los mapas de imagen del lado del servidor. Cuando el visitante de un sitio hace clic

en una zona interactiva, el URL asociado se envía directamente al servidor. Esto hace que los

mapas de imagen del lado del cliente sean más rápidos que los mapas del lado del servidor,

pues el servidor no necesita interpretar dónde ha hecho clic el usuario. Los mapas de imagen

del lado del cliente son compatibles con Netscape Navigator 2.0 y versiones posteriores, NCSA

Mosaic 2.1 y 3.0 y todas las versiones de Internet Explorer.

Dreamweaver no modifica las referencias a mapas de imagen del lado del servidor en

documentos existentes. Puede utilizar mapas de imagen del lado del cliente y del servidor en el

mismo documento. Sin embargo, los navegadores que admiten ambos tipos de mapas de

imagen dan prioridad a los mapas de imagen del lado del cliente. Para incluir un mapa de

imagen del lado del servidor en un documento, deberá escribir el código HTML correspondiente.

Inserción de mapas de imagen del lado del cliente

Cuando inserte un mapa de imagen del lado del cliente, cree una zona interactiva y, a

continuación, defina un vínculo que se abra cuando el usuario haga clic en la zona interactiva.

Nota: Puede crear múltiples zonas interactivas, pero formarán parte del mismo mapa de

imagen.

1. En la ventana de documento, seleccione la imagen.

2. En el inspector de propiedades, haga clic en la flecha de ampliación, situada en la esquina

inferior derecha, para ver todas las propiedades.

3. En el cuadro Mapa, introduzca un nombre exclusivo para el mapa de imagen. Si utiliza múltiples

mapas de imagen en el mismo documento, asigne un nombre exclusivo a cada uno.

4. Para definir las áreas de mapas de imagen, siga uno de estos procedimientos:

Seleccione la herramienta circular y arrastre el puntero sobre la imagen para crear una zona

interactiva circular.

Seleccione la herramienta de rectángulo y arrastre el puntero sobre la imagen para crear una

zona interactiva rectangular.

Seleccione la herramienta poligonal y defina una zona interactiva con forma irregular

haciendo clic una vez en cada esquina. Haga clic en la herramienta de flecha para cerrar la

forma.

Después de crear la zona interactiva, aparecerá el inspector de propiedades de zonas

interactivas.

5. En el cuadro de texto Vínculo del inspector de propiedades de zonas interactivas, haga clic en el

icono de carpeta para localizar y seleccionar el archivo que desea abrir cuando el usuario

haga clic en la zona interactiva o escriba la ruta.

6. En el menú emergente Destino, seleccione la ventana en la que deberá abrirse el archivo o

escriba su nombre.

En la lista emergente figuran los nombres de todos los marcos a los que ha asignado nombres

en el documento actual. Si especifica un marco que no existe, la página vinculada se cargará en

una ventana nueva con el nombre que haya especificado. También puede seleccionar estos

nombres de destino reservados:

_blank carga el archivo vinculado en una ventana de navegador nueva y sin nombre.

_parent carga el archivo vinculado en el conjunto de marcos padre o en la ventana del marco

que contiene el vínculo. Si el marco que contiene el vínculo no está anidado, el archivo

vinculado se cargará en la ventana completa del navegador.

_self carga el archivo vinculado en el mismo marco o ventana que el vínculo. Este destino es el

predeterminado, por lo que normalmente no es preciso especificarlo.

_top carga el archivo vinculado en la ventana completa del navegador, quitando así todos los

marcos.

Nota: La opción Destino no se encontrará disponible hasta que la zona interactiva seleccionada

contenga un vínculo.

7. En el campo Texto alternativo, escriba el texto que desea que aparezca como texto alternativo

en los navegadores que sólo admiten texto o en los que se descargan las imágenes

manualmente. Algunos navegadores muestran este texto como una descripción de herramienta

cuando el usuario mueve el puntero sobre la zona interactiva.

8. Repita los pasos 4 a 7 para definir otras zonas interactivas en el mapa de imagen.

9. Cuando termine de definir el mapa de imagen, haga clic en un área en blanco del documento

para cambiar el inspector de propiedades.

Modificación de zonas interactivas de mapas de imágenes

Puede editar fácilmente las zonas interactivas creadas en un mapa de imagen. Puede mover un

área de zonas interactivas, cambiar el tamaño de las zonas interactivas o adelantar o retrasar

una zona interactiva en un elemento con posición absoluta (elemento PA).

También puede copiar una imagen con zonas interactivas de un documento a otro o copiar una

o más zonas interactivas de una imagen y pegarlas en otra imagen. Las zonas interactivas

asociadas a la imagen también se copiarán en el nuevo documento.

Selección de varias zonas interactivas en un mapa de imagen 1. Utilice la herramienta de puntero para seleccionar una zona interactiva.

2. Siga uno de estos procedimientos:

Mantenga presionada la tecla Mayús mientras hace clic en las otras zonas interactivas que

desea seleccionar.

Presione Control+A (Windows) o Comando+A (Macintosh) para seleccionar todas las zonas

interactivas.

Desplazamiento de una zona interactiva 1. Utilice la herramienta de puntero para seleccionar la zona interactiva.

2. Siga uno de estos procedimientos:

Arrastre la zona interactiva a una nueva área.

Utilice Control y las teclas de flecha para mover una zona interactiva 10 píxeles en la dirección

seleccionada.

Utilice las teclas de flecha para mover una zona interactiva un píxel en la dirección

seleccionada.

Cambio del tamaño de una zona interactiva

1. Utilice la herramienta de puntero para seleccionar la zona interactiva.

2. Arrastre el manejador de zona interactiva para cambiar el tamaño o la forma de la zona

interactiva.