ubiquitour.com

Cómo cambiar una imagen en Mouse Rollover

Cómo cambiar una imagen en Mouse Rollover

Cambiar una imagen en un rollover de ratón es una forma popular para añadir interactividad a una página web. Diseñadores web cambian imágenes en una conversión para que la imagen parece moverse, como un botón de cambio para aparecer presionado, cuando un puntero del mouse se mueve sobre él. Otros usos para esta técnica son de entretenimiento, como cuando una foto del gato se convierte en un perro o una imagen de la muñeca cambia a un ghoul y la educación, como cuando la respuesta a una pregunta oculta bajo otra imagen. Rollovers requieren 2 controladores de eventos de JavaScript y 2 o más imágenes para la imagen cambian funcionalidad para funcionar correctamente.

Instrucciones

1 Elegir 2 imágenes a utilizar para el rollover. Para las funciones profesionales, las imágenes deben tener las mismas dimensiones. Para fines de entretenimiento, las dimensiones de las imágenes dependen del resultado deseado del juego. Tenga en cuenta sus nombres de archivo. Nombre de las 2 imagenes "img_1.jpg" y "img_2.jpg" para los propósitos de este ejercicio. Guardar las imágenes en el mismo directorio donde se encuentra el documento HTML.

2 Abra el documento HTML en un editor de texto, como Bloc de notas o TextEdit. El código para el rollover del ratón requiere 2 controladores de eventos de JavaScript para agregar a la página. Uno es el onmouseover, que capta el movimiento del ratón a medida que pasa de la imagen. El otro es onmouseout, que detecta cuando el ratón se ha movido lejos de la imagen.

3 Construir la etiqueta de imagen HTML. Este aspecto:

< img width = "143" height = "39" border = "0"

Alt = "Mueva su ratón sobre mí" id = "button_but" / >

El atributo "src" trae la primera imagen a la página. El resto de atributos es opcional: anchura y altura de declaran las dimensiones de la imagen. "Frontera" coloca un borde alrededor de la imagen. Puede ser píxeles para una frontera. Dejarlo en 0 cuando no hay fronteras son buscadas. El atributo "alt" es necesario para la persiana o ver deteriorada usuarios. El texto dentro de ese atributo es leído por un texto a voz programa así como el navegador cuando el ratón se cierne sobre él. Los controladores de eventos se refieren a las imágenes por el atributo "id", por lo que es importante utilizar un buen nombre.

4 Agregar una etiqueta de ancla alrededor de la etiqueta de imagen. Esta etiqueta tendrá los controladores de eventos. "Javascript: void(0)" se detiene el navegador trate de cargar otra página web.

< a href = "javascript: void(0)" >

< img width = "143" height = "39" border = "0" alt = "Presione este botón" nombre = "button_but" / >

< /a >

5 Precargar las imágenes mediante el uso de JavaScript más en < head > del documento. Las imágenes serán llamadas por las funciones y el atributo "id" le dice a la secuencia de comandos donde poner las nuevas imágenes.

< head >

< script tipo = "texto/javascript" >

función mouseOver()

{

document.getElementById("button_but").src = "img_1.jpg"

}

función mouseOut()

{

document.getElementById("button_but").src = "img_2.jpg"

}

< /script >

< /HEAD >

Asegúrese de cerrar la secuencia de comandos y las etiquetas de cabeza.

6 Agregar los controladores de eventos de JavaScript a la etiqueta de anclaje tal como se muestra a continuación. Observe que "img_1.jpg" se utiliza en el controlador de eventos onmouseover así como la propiedad de fuente de etiqueta de imagen. "Img_2.jpg" está escondido dentro del manejador onmouseout y sólo se verá cuando se mueve el ratón lejos de "img_1.jpg".

< a href = "javascript: void(0)" onmouseover="mouseover()" onmouseout="mouseout()"

< img width = "143" height = "39" border = "0" alt = "Presione este botón" nombre = "button_but" / >

< /a >

Este código indica al navegador para cambiar imágenes cuando rueda el ratón sobre la imagen.

7 Guarde la página y abrirla en un navegador para probarlo. Habilita JavaScript si es necesario y asegúrese de que el código funciona.

8 Subir el archivo y las imágenes en un directorio en su servidor web.

Consejos y advertencias

  • Imágenes se cambian fácilmente hacia fuera agregando nuevas imágenes en el directorio y cambiar sus nombres a los nombres de archivo de imagen actual.
  • Usuarios sin Javascript habilitado no podrán usar esta funcionalidad.