Cómo cambiar Guión de imágenes en mouseover en XHTML

Los elementos dinámicos añadir interactividad a una página Web. Uno de esos elementos permite a los desarrolladores colocar dos imágenes en una sola ubicación. Cualquiera que sea la imagen de muestra depende de si el visitante tiene su puntero del ratón sobre la imagen cargada inicialmente. Agregar un efecto de este tipo puede ser cambiado dentro de los documentos XHTML utilizando una línea de código.

Instrucciones

1 Sube dos imágenes a un servidor Web. Ambas imágenes deben ser de tamaño idéntico. Tenga en cuenta sus rutas de URL.

2 Poner en marcha un editor HTML. Utilice Bloc de notas (PC) o TextEdit (Mac) si una no está disponible. Ambos vienen preinstalados en los sistemas operativos Windows o Apple.

3 Seleccione "Archivo" y "Abrir" en el menú de navegación del programa. Elija el archivo XHTML, donde se integrará el guión de imagen.

4 Coloque el siguiente script donde la imagen debe residir:
<Img src = "image_one.jpg" onmouseover = "this.src = 'image_two.jpg'" onmouseout = "this.src = 'image_one.jpg'" />

Reemplazar "image_one.jpg" y "image_two.jpg" con las rutas de URL de las imágenes subidas. El "src" inicial es la imagen que se muestra al cargar la página. La imagen está vinculada a "onmouseover" es lo que se muestra cuando el ratón se mueve sobre la imagen inicial. "OnMouseOut" es la imagen que se muestra cuando el cursor se retira del área de la imagen.

5 Seleccione "Archivo" y "Guardar" en el menú de navegación del programa. Asegúrese de que la extensión del archivo es .htm o .html. HTML y XHTML utilizan esas extensiones.

6 Cargar el archivo en un servidor Web. Vista previa para confirmar la secuencia de comandos funciona correctamente.