Mapas de Imágenes con DreamWeaver

dreamweaver
Crear un album de fotos con DreamWeaver
25 diciembre, 2014
dreamweaver
Uso del refresh en DreamWeaver
25 diciembre, 2014

Mapas de Imágenes con DreamWeaver

dreamweaver

Cada vez que usted inserta una imagen a su documento podrá observar en la parte inferior izquierda del panel Propiedades algo similar a lo siguiente:

Estas opciones se despliegan en el panel Propiedades cuando es seleccionada una imagen.

Lo cual indica que usted puede crear mapas de imágenes, un mapa de imagen simplemente es una imagen que se ha divido en varias zonas interactivas. Estas zonas interactivas generaran una cierta acción al hacer click en ellas. Estas acciones implican abrir un nuevo documento, esto se hace a través de vínculos.

En fin, para insertar un mapa de imagen, en primera instancia deberá seleccionar la imagen, seguidamente desde el panel Propiedades en el cuadro de texto Mapa, asigne un nombre que identifique al mapa de imagen, este nombre debe ser exclusivo para ese mapa. Esto es importante hacerlo notar, ya que es posible que usted defina más de un mapa de imagen en un mismo documento, por lo cual es importante diferenciar muy bien un mapa de otro.

Asignándole un nombre adecuado al mapa de imágenes.

Para crear las zonas interactivas tiene tres opciones: La herramienta zona interactiva oval Botón herramienta zona interactiva oval, la herramienta zona interactiva rectángular Botón herramienta zona interactiva rectángular y la herramienta zona interactiva poligonal Botón herramienta zona interactiva poligonal.

Las dos primeras herramientas trabajan de manera similar, debe ubicarse dentro de la imagen y luego arrastrar el cursor del mouse hasta que usted lo considere adecuado.

La tercera herramienta le permitirá crear zonas interactivas irregulares, para trabajar con esta herramienta en primer lugar debe ubicarse dentro de la imagen, para comenzar la zona interactiva haga click al botón izquierdo del mouse, para continuar la construcción de la zona interactiva irregular deberá dar click en las esquinas de lo será dicha zona, Dreamweaver se encargara de unir los puntos trazando una recta entre ellos. Para finalizar la zona interactiva irregular deberá seleccionar la herramienta Puntero Botón herramienta puntero de zona interactiva..

Luego de tener todas las zonas interactivas de nuestro mapa de imagen listas, procederemos a seleccionar cada una de estas zonas y se le asignara un comportamiento. Para asignar los comportamientos a dichas zonas nos dirigiremos al panel Propiedades.

A continuación se detallan las opciones que se presentan en el panel Propiedades:

Vínculo
Como se menciono previamente en este artículo la acción que generan las zonas interactivas al hacer click en ellas es abrir un nuevo documento, esto se hace a través de vínculos. Por lo tanto, podremos realizar lo siguiente:

  • Abrir una nueva página HTML, una imagen, un PDF, entre otros.
  • Crear un vínculo de anclaje con nombre, lo cual conduce a una parte especifica dentro de un documento.
  • Un vínculo de correo electrónico.
  • También cabe la posibilidad de generar vínculos a scripts.
Destino
Acá se encuentran las opciones: _blank, _parent, _top, _self.
alt —Texto Alternativo—
Es muy importante que usted rellene este campo en cada zona interactiva que cree. Macromedia Dreamweaver le advierte sobre ello: Describa el mapa de imágenes en el campo ‘alt‘ del inspector de Propiedades. Esta descripción ayudará a las personas con problemas de visión que utilizan herramientas que les leen páginas web.
Clase
Esto se refiere a alguna clase de estilo para la imagen especificada, esto se puede controlar a través de las hojas de estilo en cascada o CSS, también puede implementarse para algún tipo de script que necesite de este campo para realizar sus funciones.

Al finalizar el rellenado de todas las propiedades de cada una de las zonas interactivas que definio en el mapa de imágenes, haga click en una área en blanco del documento para que de esta manera cambie el panel Propiedades y continue con su trabajo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *