Cómo crear intercambios con múltiples imágenes en Dreamweaver

  1. Software
  2. Adobe
  3. Dreamweaver
  4. Cómo crear intercambios con múltiples imágenes en Dreamweaver

Libro Relacionado

Dreamweaver CC para maniquíes

Por Janine Warner

Antes de empezar a crear un diseño de página más complejo con el comportamiento Swap Image de Dreamweaver, mire una página terminada. Con el comportamiento Swap Image, puede reemplazar cualquiera o todas las imágenes de una página.

Cuando utilice el comportamiento Swap Image, es importante que todas las imágenes tengan el mismo tamaño (alto y ancho). Si las imágenes no tienen el mismo tamaño, todas las imágenes, excepto la primera, se estirarán o comprimirán para ajustarse al espacio ocupado por la primera imagen insertada en la página.

Si está utilizando el comportamiento Swap Image con una serie de imágenes que no son todas de la misma altura y anchura, tiene algunas opciones:

Recorte las más grandes para que todas las imágenes tengan el mismo tamaño.

Haga que las imágenes horizontales y verticales ocupen el mismo espacio en su diseño combinando dos imágenes verticales para cada una de ellas. Simplemente cree un archivo en un programa como Photoshop, inserte dos imágenes verticales en el mismo archivo una al lado de la otra y, a continuación, ajuste el tamaño de la imagen para que el archivo tenga el mismo tamaño que una imagen horizontal.

Cree un archivo de imagen del tamaño de su imagen más grande, establezca el fondo a un color neutro, como blanco o negro, y luego inserte todas las demás imágenes en el fondo para que pueda guardarlas todas con el mismo tamaño de archivo.

Siga estos pasos para utilizar el comportamiento Swap Image:

1Crea un diseño de página con todas las imágenes que quieras que se muestren inicialmente.

Cada una de las tres fotos en el diseño de la página del Tower Bridge de Londres tiene dos copias: una en miniatura y otra más grande. Cuando la página se carga por primera vez en un navegador web, las tres imágenes en miniatura se colocan en la parte inferior de la página, y la primera de las versiones más grandes correspondientes se muestra en el área principal justo encima de las miniaturas.

2Nombre sus imágenes en el inspector de propiedades.

Para dirigir sus imágenes con JavaScript, que es cómo funcionan los comportamientos, primero dé a cada imagen un ID único. El ID de la imagen no es el mismo que el nombre de archivo de la imagen o la etiqueta de texto, aunque puede usar nombres iguales o similares. Las identificaciones de imagen no deben tener espacios ni caracteres especiales.

3Elija Window→Behaviors.

Se abre el panel de Comportamientos. Puede arrastrar el panel Comportamientos a otra parte de la página, y puede expandirlo arrastrando su parte inferior o lateral. También puede cerrar cualquier otro panel abierto para hacer más espacio haciendo clic en la barra gris oscura en la parte superior de cualquier panel.

4Seleccione una imagen.

Seleccione la imagen en la página que servirá como disparador para la acción.

5Elija el comportamiento Swap Image.

Con la imagen de disparo seleccionada en el espacio de trabajo, haga clic en el signo más en el panel Comportamientos para abrir la lista desplegable de acciones y seleccione la acción que desea aplicar.

6Especifique las imágenes que desea intercambiar en el cuadro de diálogo Intercambiar imagen.

En la lista Imágenes, seleccione el ID de la imagen que será reemplazada. Haga clic en el botón Examinar para seleccionar la imagen que reemplaza a la imagen principal. Si la imagen no está ya guardada en la carpeta del sitio local, Dreamweaver le ofrecerá copiarla allí para usted.

7En la parte inferior del cuadro de diálogo Cambiar imagen, seleccione la opción Precargar imágenes para indicar al navegador que cargue todas las imágenes en la caché cuando se cargue la página.

Si no selecciona esta opción, puede producirse un retraso cuando se utiliza el intercambio de imágenes.

8Si lo desea, deseleccione la opción Restaurar imágenes con el ratón.

La opción Restore Images OnMouseOut significa que cuando se completa un evento (por ejemplo, cuando se mueve el ratón fuera de la miniatura que lo activa), la imagen original se reemplaza. De forma predeterminada, Dreamweaver preselecciona esta opción para el comportamiento Swap Image. Es posible que desee deseleccionar esta opción si considera que la sustitución de la imagen original cada vez que pasa el cursor por encima de otra miniatura le distrae.

9Después de especificar toda la configuración del comportamiento, haga clic en Aceptar.

El nuevo comportamiento aparece en el panel Comportamientos.

10Especifique un evento para el comportamiento.

Después de aplicar la acción, puede volver atrás y especificar qué evento desencadenará la acción. De forma predeterminada, Dreamweaver aplica el evento OnMouseOver cuando utiliza la acción Swap Image, pero puede cambiar ese evento a cualquier otro disponible, como OnClick, que requiere que el usuario haga clic en la imagen para activar la acción Swap Image.

11 Aplicar comportamientos adicionales.

Para aplicar el comportamiento Swap Image a otras imágenes de una página, repita los pasos 5-10, haciendo clic para seleccionar la imagen que desea que sirva de disparador y, a continuación, especificando la imagen correspondiente que se debe intercambiar.

12Pruebe su trabajo en un navegador.

No podrá ver los efectos de comportamientos como éste hasta que haga clic en el botón de vista en vivo en la parte superior izquierda del espacio de trabajo de Dreamweaver o previsualice su página en un navegador web.

Deja un comentario

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