Rollover básico con JavaScript

El efecto Rollover permite cambiar una imagen con otra al momento de pasar el mouse sobre ella.

Para hacer esto:

  1. Agregar una imagen.
<img src="images/excel.jpg" name="imagen">

Es importante que la imagen tenga su propiedad «name», pues esta nos permitirá realizar el efecto deseado

  1. Dentro del código de la imagen, agregaremos las propiedades ‘onmouseover’ y ‘onmouseout’, que son las encargadas de generar el efecto cuando el mouse esta sobre la imagen y cuando el mouse deja de estar sobre la imagen, respectivamente.
<img src="images/excel.jpg" name="imagen" alt="" width="200" height="250" onmouseover="" onmouseout="">
  1. Dentro de cada una de estas dos propiedades, utilizaremos algo de DOM de JavaScript, para modificar la ruta de las imagen y mostrar otra.
<img src="images/excel.jpg" name="imagen" alt="" width="200" height="250" onmouseover="document.imagen.src='images/php.jpg'" onmouseout="document.imagen.src='images/excel.jpg'">

Nota: Si deseas que dicha imagen sea un vínculo, solo agrega la imagen dentro de las etiquetas <a></a> y a estas les agregas los eventos «onmouseover y onmouseout», y los quitas de la etiqueta de imagen. Algo así:

<a href="rollover_basico.html" onmouseover="document.imagen.src='images/php.jpg'" onmouseout="document.imagen.src='images/excel.jpg'"><img src="images/excel.jpg" name="imagen" alt="" width="200" height="250"></a>

 

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

dieciocho − 1 =