11107 Suscriptores al Feed del Blog
87 Suscriptores al Feed de Anotaciones Breves
50 usuarios online
Andres en Arte vs Diseño
Rollover sobre imágenes con jQuery
1 COMENTARIO - Publicado hace 13 meses - Clasificado en: JQUERY, TUTORIALES, TIPS, SCRIPTSPara 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 » »
Algunas entradas relacionadas:
- Redimensionar el tamaño de fuente de forma animada con jQuery
- Exportar tablas HTML a Excel con PHP y JQuery
- Autotab: plugin de jQuery para auto-tabulación y filtrado de campos
- Construyendo un verdadero triple click con jQuery
- Ajax con jQuery: el método load()
- Crear cajas de mensajes con CSS y jQuery
- jQuery Easing Plugin
También te puede interesar:
Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.
|
|
|
|
|
COMENTARIOS
 |
Publicado hace 7 meses Dani - Genial! muy chulo.. pero a mi personalmente me gustaria poder hacer lo mismo pero solo con las imagenes que ya se han visitado. Es decir que necesito saber si es posible hacer el efecto en vez de en hover en visited. ¿Es posible? ¿Hay alguna manera de hacer un visited con jQuery? gracias! |
