ROLLOVER

Vamos a aplicar un efecto que al pasar el cursor sobre una o más imágenes de nuestro blog, cambian dinámicamente y cuando el cursor se va de ésta, vuelve a su estado inicial. A este efecto se le llama rollover.

Lo primero que haremos será situarnos en nuestra plantilla Edición de HTML y justo antes de vamos a añadir el siguiente script:



Guardamos los cambios y nos vamos al lugar donde deseamos añadir la imagen con efecto rollover. En este caso lo hacemos en una entrada.

Copiamos y pegamos lo siguiente:

document.ejemplo.src='url-imagen';" onmouseout="document.ejemplo.src='url-imagen';">
"ejemplo" src="url-imagen-1ª" alt = "ejemplo de rollover"width="300" height="300" border= "0">


En url-imagen añadiremos la url de las imágenes que harán el efecto rollover, o sea cambiarán al pasar el cursor.
Donde url-imagen-1ª será la url de la imagen que aparecerá cada vez que carguemos la página.
Si en lugar de esa primera imagen deseamos un texto bastará con suprimir la url y añadir un texto donde dice ejemplo de rollover
En height="300" width="300" cambiaremos el valor por el tamaño deseado para las imágenes.
Si deseamos añadir en una misma página más de un rollover deberemos añadir un nombre diferente a cada rollover. Por ejemplo donde dice "document.ejemplo" y IMG name="ejemplo" lo cambiaremos "document.ejemplo1" por IMG name="ejemplo1"