El efecto Rollover permite cambiar una imagen con otra al momento de pasar el mouse sobre ella.
Para hacer esto:
- 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
- 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="">
- 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>
