Tecnología

Inicio

Cómo crear varias rollovers JavaScript en Dreamweaver

Roll-over de una página web para hacer que la imagen cambia cuando debajo del ratón pase por un visitante. Se utiliza en sus enlaces del menú, esta técnica puede ayudar a los visitantes navegar por su sitio con facilidad. Si el diseño de su página necesita más de un área de una página cambia cuando un usuario se sitúa sobre un enlace, Dreamweaver ofrece una manera fácil de cumplir su objetivo con Javascript - sin necesidad de codificación!

Instrucciones

1 Crear imágenes en el software de creación de imagen. Necesitará imágenes base separadas y en caso de vuelco imágenes para cada área del sitio que le gustaría cambiar durante un ratón por encima. En transferencias sin soldadura, el tanto de la base y se ciernen imágenes para un solo caso de vuelco debe ser exactamente el mismo tamaño y deben tener el mismo fondo. Guarde sus imágenes como archivos JPEG o GIF para la Web.

2 Añadir su primera sustitución. En el archivo de Dreamweaver, haga clic en el cursor donde desee que aparezca la imagen de vuelco base. Ahora, haga clic en la flecha al lado del icono de imagen en la barra de herramientas (que es el icono que parece un dibujo de un árbol). En el menú desplegable, seleccione "Imagen de sustitución." También puede hacer clic en Insertar> Objetos de imagen> Imagen de sustitución de la barra principal de Dreamweaver MX menú.

3 Agregue su base y coloque las imágenes utilizando el cuadro de diálogo "Insertar imagen de sustitución". Dale a tu imagen un nombre específico. Va a utilizar este nombre para la adición de su segundo vuelco. Insertar su imagen de sustitución utilizando los dos primeros botones "Examinar" y la imagen base. Marque la casilla "imagen de sustitución de precarga" para instruir a los navegadores para cargar la imagen de sustitución, al mismo tiempo todas las demás imágenes se cargan cuando se abre una página.

4 Configurar el enlace de su primer caso de vuelco. Junto al cuadro de texto llamado "Al hacer clic, ir a URL:", buscar el archivo al que se vinculará su vuelco. Cuando se haya completado, haga clic en el botón Aceptar en la parte derecha del cuadro de diálogo. Guarde el archivo y abrirlo en un navegador para asegurarse de que el enlace de vuelco está funcionando de la manera que lo previsto.

5 Añadir un vuelco adicional que se activará cuando la imagen original se desplaza el ratón sobre. Volver a Dreamweaver e inserte la imagen de base para su segundo vuelco. Abra la ventana de Comportamientos. Resaltar su imagen de base, y haga clic en el menú "+" desplegable de la ventana de Comportamientos para añadir un nuevo comportamiento Javascript. Seleccione la opción "Intercambiar imagen" de la lista de comportamientos. En la lista de archivos en el cuadro de diálogo, seleccione el nombre del archivo que ha designado para una imagen original de su primera de vuelco. A continuación, busque la imagen de la libración de la segunda vuelco utilizando el botón "Examinar" para. Haga clic en "Aceptar" y el segundo en caso de vuelco se debe configurar. Guarde el archivo y revisarlo en un navegador nuevo. Al pasar el ratón la imagen de vuelco original a lo largo, tanto la imagen original y la imagen de segundo vuelco deben cambiar como se configuró.