Efecto en Roll Over

Sedran · #1 (**permalink**) 27/10/2011, 17:20

Hola, hice un roll over con 2 imagenes y me preguntaba si hay alguna manera de hacer la transicion de imagenes con algun efecto tipo desvanecer o algo para que no sea tan drastico el cambio de imagenes.

Gracias

caricatos · #2 (**permalink**) 27/10/2011, 17:33

Hola:

Fíjate en esto: Transiciones: Introducción

Saludos

Sedran · #3 (**permalink**) 27/10/2011, 18:08

Para el efecto de esa página si o si tiene que ser presionando un boton? No se puede hacer que al pasar el mouse por la imagen cambie?

emprear · #4 (**permalink**) 27/10/2011, 22:21

Podés hacerlo con jQuery

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
<title>Roll Over con Fade Jquery</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
img { border:0px; }
ul.img_list {
    display:inline;
    float:left;
    height:280px;
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
}   
    
li.image_on a {
    display:block; 
    width:280px; 
    height:280px; 
    position:relative;
}   
 
li.image_on a .rollover {
    display:block; 
    position:absolute; 
    top:0; 
    left:0; 
    width:280px; 
    height:280px; 
    background:url(img_on.png);
}
</style>
 
<script type="text/javascript">         
$(document).ready(function(){
 
    $(".rollover").css({'opacity':'0'});
    $('.img_list a').hover(
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 1);
        },
        function() {
            $(this).find('.rollover').stop().fadeTo(500, 0);
        }
    )
 
});     
</script>
</head>
<body>
<ul class="img_list">
<li class="image_on"><a href="#"><span class="rollover"></span><img src="img_off.jpg" alt="" width="280" height="280" /></a></li>
</ul>
</body>
</html>

saludos

caricatos · #5 (**permalink**) 28/10/2011, 03:46

Hola:

Cita:

Iniciado por Sedran

Para el efecto de esa página si o si tiene que ser presionando un boton? No se puede hacer que al pasar el mouse por la imagen cambie?

Pues sí que es posible, tan solo deben programarse los eventos adecuados: Rollover fundido

Saludos