Dando vueltas a cual sería la forma más sencilla de que las imagenes de nuestras páginas web cambiaran al pasar el ratón por encima (rollover), he preparado una sencilla función que evita enguarrar nuestro (X)HTML. Yo me decanto por usar mootools para mi código javascript, pero no resultará dificil portarlo a otros frameworks.

Lo primero que debemos hacer es preparar nuestras imagenes. Es importante la nomenclatura que usamos para nuestras imagenes. La imagen “inactiva” deberá terminar en _off y la que se activará al pasar el ratón en _on, asi que por ejemplo podemos usar estos de imagenes:

boton1_off.png // imagen desactivada
boton1_on.png // imagen activada al pasar el ratón 

No hay que olvidar añadir mootools en la seccion head de nuestra web:

<script src="js/mootools.js" type="text/javascript" charset="utf-8"></script>

Ahora debemos indicar que queremos que esa imagen cambie al pasar el cursor por encima, de una manera muy sencilla. Agregando la clase rollover a nuestra imagen:

<img src="img/boton1_off.png" alt="Prueba rollover" class="rollover" />

Y ya está, no hay que añadir nada más a nuestro (X)HTML.

Esta es la función que iniciará el efecto rollover:

function iniciarRollOver () {
	
 		$$("img.rollover").forEach (function(el) {
			
			el.addEvent("mouseenter", function() {
				var imgPath    = this.getProperty("src");
				var imgPath_on = imgPath.replace(/_off/g,"_on")
				this.setProperty("src", imgPath_on );
			});
			
			el.addEvent("mouseleave", function() {
				var imgPath    = this.getProperty("src");
				var imgPath_off = imgPath.replace(/_on/g,"_off")
				this.setProperty("src", imgPath_off );
			});			
			
		});
   
   }
 
}

Solo nos queda llamar a nuestra función cuando se hayan cargado todos los elementos de la página, para ello recomiendo usar el evento domready de mootools de la siguiente manera.

window.addEvent( "domready", iniciarRollOver );

Espero que os resulte últil. Un saludo.