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

Cómo crear permutas con múltiples imágenes en Dreamweaver - dummies

Antes de comenzar a crear un diseño de página más complejo con el comportamiento de Intercambiar imagen de Dreamweaver, observe una página finalizada. Con el comportamiento Cambiar imagen, puede reemplazar cualquiera o todas las imágenes de una página.

Cuando usa el comportamiento Intercambiar imagen, es importante hacer que todas las imágenes que intercambie tengan el mismo tamaño (alto y ancho) Si las imágenes no son del 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 Cambiar imagen con una serie de imágenes que no tienen el mismo alto y ancho, tiene algunas opciones:

Recortar 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 al combinar dos imágenes verticales por cada horizontal. 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 luego ajuste el tamaño de esa imagen para que el archivo tenga el mismo tamaño que una imagen horizontal.

Crea un archivo de imagen del tamaño de tu imagen más grande, configura el fondo en un color neutro, como el negro o el blanco, y luego inserta todas las otras imágenes en el fondo para que puedas guardarlas todas con el mismo tamaño de archivo.

Siga estos pasos para usar el comportamiento de Intercambiar imagen:

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

Cada una de las tres fotos en el diseño de la página del Tower Bridge en Londres tiene dos copias: una miniatura y una versión 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.

2 Asigne un nombre a sus imágenes en el inspector de propiedades.

Para orientar sus imágenes a JavaScript, que es cómo funcionan los comportamientos, primero otorgue a cada imagen una ID única. La identificación de la imagen no es lo 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.

3Elegir ventana → Comportamientos.

Se abre el panel Comportamientos. Puede arrastrar el panel Comportamientos en otro lugar de la página y puede expandirlo arrastrando su parte inferior o lateral. También puede cerrar otros paneles abiertos para hacer más espacio haciendo clic en la barra gris oscuro 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 de Intercambiar imagen.

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

6Especifique las imágenes para intercambiar en el cuadro de diálogo Cambiar imagen.

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

7En la parte inferior del cuadro de diálogo Cambiar imagen, seleccione la opción Imágenes cargadas para indicar al navegador que cargue todas las imágenes en la memoria 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, cancele la selección de la opción Restaurar imágenes en movimiento.

La opción Restaurar imágenes OnMouseOut significa que cuando se completa un evento (como cuando se saca el mouse de la miniatura activada), se reemplaza la imagen original. De forma predeterminada, Dreamweaver preselecciona esta opción para el comportamiento de Swap Image. Puede deseleccionar esta opción si encuentra que reemplazar la imagen original cada vez que coloca el cursor sobre otra miniatura distrae.

9Después de especificar todas las configuraciones para el comportamiento, haga clic en Aceptar.

El nuevo comportamiento aparece en el panel Comportamientos.

10 Especifique un evento para el comportamiento.

Después de aplicar la acción, puede regresar y especificar qué evento activará la acción. De forma predeterminada, Dreamweaver aplica el evento OnMouseOver cuando usa la acción Swap Image, pero puede cambiar ese evento a uno 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 Cambiar imagen a otras imágenes en una página, repita los pasos 5 a 10, haciendo clic para seleccionar la imagen que desea utilizar como desencadenante y luego especificando la imagen correspondiente que debe intercambiarse.

12 Pruebe su trabajo en un navegador.

No puede ver los efectos de comportamientos como este hasta que haga clic en el botón Vista en vivo en la parte superior izquierda del espacio de trabajo en Dreamweaver o obtenga una vista previa de su página en un navegador web.