El efecto rollover consiste en cambiar una propiedad cuando el mouse pasa encima del elemento, veamos como cambiar la imagen mostrada cuando se pasa encima con el mouse. Para ello utilizaremos Mootools, el cual tiene métodos para acceder y modificar los elementos html de manera sencilla y lo haremos incluyéndola directamente desde Google Ajax Libraries API.
Creando los elementos HTML
Haremos el rollover de imágenes para un menú, entonces crearemos un div para el menú el cual contendrá los enlaces con imágenes.
<div id="menu">
<a href="#"><img loading="lazy" src="img/btinicio.gif" width="42" height="19" /></a>
<a href="#"><img loading="lazy" src="img/btproductos.gif" width="69" height="19" /></a>
<a href="#"><img loading="lazy" src="img/btservicios.gif" width="61" height="19" /></a>
<a href="#"><img loading="lazy" src="img/btcontacto.gif" width="62" height="19" /></a>
</div>
Las imágenes de rollover tendrán el mismo nombre que las imágenes iniciales pero les terminarán en «-o», entonces si una imagen es btinicio.gif, la imagen de rollover será btinicio-o.gif.
Incluyendo Mootools
En necesario incluir Mootools, actualmente se encuentra en la versión 1.2. En nuestro caso lo haremos directamente desde Google Ajax Libraries API el cual brinda hosting para acelerar la carga y ahorrar ancho de banda. Entonces elegimos la versión minificada.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.3/mootools-yui-compressed.js"></script>
Implementando el rollover
Entonces para crear el rollover, primero seleccionamos todos las imágenes que se encuentran en el div con identificador «menu«, luego de ello obtenemos la extensión de cada imágenes para posteriormente agregarle el termnación «-o». Entonces tendremos el siguiente código:
window.addEvent('domready', function() {
$$('#menu img').each(function(img){
var src = img.getProperty('src');
var ext = src.substring(src.lastIndexOf('.'), src.length);
img.addEvent('mouseenter', function() {
this.setProperty('src', src.replace(ext, '-o'+ext));
});
img.addEvent('mouseleave', function() {
this.setProperty('src', src);
});
});
});
Como pueden ver utilizamos los eventos mouseenter para detectar cuando el mouse esta encima de la imagen para cambiar de imagen y mouseleave que detecta cuando hemos salido de la imagen para restaurar la imagen original.
[download id=»22″ autop=»false»]
