En la ventana de documento, seleccione la imagen.
Última actualización el
25/09/2023
Aprenda a usar los mapas de imágenes en Dreamweaver para crear zonas interactivas para su sitio web.
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.
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.
Nota
Para utilizar zonas interactivas en Dreamweaver, debe estar en la vista de diseño.
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.
En el inspector de propiedades, haga clic en la flecha de ampliación, situada en la esquina inferior derecha, para ver todas las propiedades.
En el campo Mapa, introduzca un nombre exclusivo para el mapa de imágenes. Si utiliza múltiples mapas de imagen en el mismo documento, asigne un nombre exclusivo a cada uno.
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.
En el campo Vínculo, 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.
En la lista desplegable 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.
- _new carga el archivo vinculado en una nueva ventana del navegador.
Nota
La opción Destino no se encontrará disponible hasta que la zona interactiva seleccionada contenga un vínculo.
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.
Repita los pasos 4 a 7 para definir otras zonas interactivas en el mapa de imagen.
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
Utilice la herramienta de puntero para seleccionar una zona interactiva.
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
Utilice la herramienta de puntero para seleccionar la zona interactiva.
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
Utilice la herramienta de puntero 
para seleccionar la zona interactiva.
para seleccionar la zona interactiva.
Arrastre el manejador de zona interactiva para cambiar el tamaño o la forma de la zona interactiva.
Crear sitios web atractivos en Dreamweaver
Diseña, codifica y gestiona sitios web dinámicos en una potente herramienta todo en uno.
