Para realizar un efecto de rollover con imágenes, quizá la mejor opción sea la utilización de sprites con CSS, pero ésta solución puede resultar más sencilla a bastante gente. En "Easy Image Rollover Script With jQuery" me he encontrado una función que de una forma sencilla nos permite crear rollovers.
<script language="javascript">
$(document).ready( function() {
peps.rollover.init();
});
peps = {};
peps.rollover = {
init: function() {
this.preload();
$(".roll").hover(
function () { $(this).attr( 'src', peps.rollover.newimage($(this).attr('src')) ); },
function () { $(this).attr( 'src', peps.rollover.oldimage($(this).attr('src')) ); }
);
},
preload: function(){
$(window).bind('load', function() {
$('.roll').each( function( key, elm ) { $('![]()
').attr( 'src', peps.rollover.newimage( $(this).attr('src') ) ); });
});
},
newimage: function( src ) {
return src.substring( 0, src.search(/(\.[a-z]+)$/) ) + '_hover' + src.match(/(\.[a-z]+)$/)[0];
},
oldimage: function( src ){
return src.replace(/_hover\./, '.');
}
};
Con esta función podemos interactuar con todas las imágenes a las que le hayamos asignado la clase "'roll". Únicamente deberemos nombrar a la imagen del rollover del mismo modo pero añadiendo '_hover'. Por ejemplo, para la imagen "MiBoton.gif", la imagen de rollover será "MiBoton_hover.gif".
Ver ejemplo en funcionamiento » »
Descargar ejemplo completo » »
