Cómo crear botones animados Rollover

los botones del rollover animados cambian de color, tamaño e incluso la transparencia cuando se despliegue el puntero del ratón sobre ellos. Los vuelcos crean un efecto de animación familiar que muchos usuarios de Internet han llegado a esperar cuando se cierne sobre un botón. Las imágenes de sustitución también pueden proporcionar retroalimentación informativa para un usuario. Por ejemplo, el color de un botón puede cambiar a rojo cuando está a punto de hacer clic en él para llevar a cabo una tarea crítica. Existen múltiples maneras de crear efectos de renovación de botón animados. Si no desea escribir código JavaScript, generar los efectos usando HTML.

Instrucciones

Crear los botones

1 Abra un editor de imágenes y crear un nuevo archivo. Nombre del archivo "antes de vuelco del vehículo."

2 Utilice las herramientas de la elipse o rectángulo para dibujar una forma del botón.

3 Aplicar efectos de bisel para hacer la mirada como una forma de botón. Añadir texto al botón si desea que el botón tenga una etiqueta de texto.

4 Guarda la imagen como archivo GIF. diseñadores de páginas web suelen utilizar el formato GIF al crear imágenes pequeñas.

5 Copiar la imagen y pegarla en un nuevo archivo. Nombre de este archivo "rollover_button2." El navegador mostrará esta imagen cuando se mueve el puntero del ratón sobre el botón.

6 Seleccione el botón y cambiar su color mediante el ajuste de tono y la saturación de la imagen. Consulte la documentación que viene con el editor de imágenes para obtener más información.

7 Aplicar un efecto de sombra al botón si quieren mejorar el efecto 3D.

8 Cambiar el texto del botón si desea que el botón para mostrar un texto diferente cuando el ratón pasa sobre la imagen.

9 Guardar esta imagen como un archivo GIF.

10 Guarde copias de ambas imágenes en un formato original en el programa de edición de imágenes. Photoshop, por ejemplo, tiene un formato nativo de .psd. Paint.Net tiene un formato nativo de PDN. Compruebe el archivo de ayuda que viene con el programa para determinar su formato de imagen nativo. Mediante la creación de copias utilizando este formato, le resultará más fácil hacer cambios en las imágenes si decide actualizar más tarde.

Crear el código HTML

11 Crear un nuevo archivo HTML.

12 Agregue este código a la sección de cuerpo del archivo:

<Img src id = "rolloverTest" src = "before_roller.gif"
onmouseover = "document.images [0] = .src 'before_rollover.gif';"
onMouseOut = "document.images [0] = .src 'after_rollover.gif>

El evento onmouseover mostrará la imagen before_rollover al colocar los elementos emergentes del ratón sobre la imagen. El evento onmouseout mostrará la imagen after_rollover cuando el ratón sale de la imagen. Los valores de los parámetros src coinciden con los nombres de las imágenes de los botones que ha creado.

13 Subir todos los archivos a su sitio web y poner a prueba el efecto de vuelco de animación.

Consejos y advertencias

• Llamar a las funciones de JavaScript si desea crear animaciones complejas de vuelco (ver Recursos). funciones de JavaScript le dan la capacidad para interceptar eventos de ratón y aplicar un estilo CSS personalizado a los botones.