Foros del Web - Ver Mensaje Individual

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