Principio de producción
El principio de hacer imágenes de intercambio es la herramienta Intercambiar imagen aplicada al panel de comportamiento en Dreamweaver. Configúrelo de modo que cuando el mouse pase sobre una determinada imagen de botón, permita que el botón realice un intercambio de imágenes (intercambiadas en una imagen con texto amarillo) y, al mismo tiempo, diseñe el intercambio de imágenes de puntero (intercambiadas en un puntero que apunta a la imagen actual del puntero del botón) para lograr el efecto anterior.
^-^: De hecho, algunas cosas en la página web parecen muy misteriosas, pero en el fondo, es solo un simple cambio de algunas imágenes o algunas capas.
materiales de elaboración
Lo que se demuestra aquí es cómo invertir 7 imágenes de botones, por lo que necesitamos crear un total de 21 imágenes, 14 imágenes de botones y 7 imágenes de puntero, para lograr el efecto que se muestra. Entre ellos, 7 imágenes de botones frontales se denominan B1-1~B1-7 respectivamente, 7 imágenes de botones de fondo se denominan B2-1~B2-7 respectivamente, y 7 imágenes de puntero se denominan Z1~Z7 respectivamente, y sus punteros apuntan a Botones uno al siete. Puede utilizar software de creación de imágenes como Fireworks para crear imágenes de botones.
Método de preparación
1. Cree un archivo de página web.
2. Inserte una tabla de 7 × 2 y combine la columna izquierda de tablas para insertar la imagen del puntero. Las siete tablas de la derecha se utilizan para insertar imágenes de botones.
3. Inserte la primera imagen del puntero Z1 en la tabla de la izquierda e inserte los botones frontales azules B1-1 ~ B1-7 en las 7 filas de celdas de la derecha (el efecto se muestra en la Figura 2).
4. Haga clic en "Ventana (Windows) → Comportamiento" para abrir el panel de comportamiento.
5. Seleccione la primera imagen para configurar el comportamiento. Aquí está la imagen del botón con "Idea guía" escrita, que es la imagen B1-1.
6. Haga clic en el botón más y seleccione Intercambiar imagen en el menú emergente para que aparezca el cuadro de diálogo de intercambio de imagen. La parte principal de nuestra configuración se realizará en este cuadro de diálogo.
7. Haga clic en el botón Examinar en el cuadro de diálogo y luego seleccione la imagen de destino en la que se volteará la imagen del botón. En este caso, es la imagen del botón con texto amarillo, que es la imagen B2-1. Luego haga clic en Aceptar.
8. Repita el paso 6, seleccione la imagen del puntero Z1 en el cuadro de texto de la imagen y luego haga clic en el botón Examinar nuevamente para voltearla al primer archivo del puntero, Z1. Haga clic en Aceptar. Después de completar las operaciones anteriores, los resultados de visualización en el panel de comportamiento se muestran en la Figura 3.
9. Seleccione la imagen del segundo botón B1-2, gírela al botón B2-2 de acuerdo con el método anterior y gire la imagen del puntero a la segunda imagen del puntero Z2.
10. Siga los pasos anteriores y configure las siguientes 5 imágenes para el comportamiento de intercambio de imágenes.
11. Presione F12 para obtener una vista previa y coloque el puntero del mouse sobre cada imagen. ¿Qué te parece?