Cómo crear swaps con varias imágenes en Dreamweaver

Cada una de las tres fotos en el diseño de página para el Puente de la Torre de Londres tiene dos copias: una miniatura y una versión más grande. Cuando la página se carga por primera en un navegador web, las tres imágenes en miniatura se colocan en la parte inferior de la página, con la primera de las versiones más grandes correspondientes que se muestran en la principal zona justo por encima de las miniaturas.

Para orientar sus imágenes con javascript, que es como los comportamientos de trabajo, primero dar a cada imagen un identificador único. El ID de imagen no es el mismo que el nombre de archivo de imagen o el texto etiquetar, aunque se pueden usar los mismos nombres o similares. ID de la imagen no deben tener espacios o caracteres especiales.

Se abre el panel Comportamientos. Puede arrastrar el panel Comportamientos en otra parte de la página, y usted puede expandirla arrastrando su parte inferior o lateral. También puede cerrar otros paneles abiertos para hacer más espacio haciendo clic en la barra de color gris oscuro en la parte superior de cualquier panel.

Seleccione la imagen de la página que servirá como detonante de la acción.

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

En la lista de imágenes, seleccione el ID de la imagen que será reemplazado. Haga clic en el botón Examinar para seleccionar la imagen que sustituye a la imagen principal. Si la imagen no está guardado en la carpeta del sitio local, Dreamweaver ofrecerá copiarlo allí para usted.

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

El Imágenes Restaurar onmouseout opción significa que cuando se termina un evento (por ejemplo, cuando el ratón se mueve fuera de la miniatura activación), se sustituye la imagen original. De forma predeterminada, Dreamweaver preselecciona esta opción para el comportamiento Intercambiar imagen. Es posible que desee anular la selección de esta opción si usted encuentra que la sustitución de la imagen original cada vez que sacas el cursor sobre otro miniatura es una distracción.

El nuevo comportamiento aparece en el panel Comportamientos.

Después se aplica la acción, se puede volver atrás y especificar qué evento se activará la acción. De forma predeterminada, Dreamweaver aplica la onmouseover caso cuando se utiliza la acción Intercambiar imagen, pero puede cambiar ese evento a ninguna disponible, como Al hacer clic, que requiere que el usuario haga clic en la imagen para activar la acción Intercambiar imagen.

Para aplicar el comportamiento Intercambiar imagen a otras imágenes en una página, repita los pasos 5-10, al hacer clic para seleccionar la imagen que desea servir como un disparador y luego especificar la imagen correspondiente que debe ser intercambiado.

No se pueden 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 vista previa de la página en un navegador web.