visiblement ça ne passionne pas les foules... mais je vais quand même publier mon travail
J'ai modifié le script du post précedant ( Thumbnail Mouseover Fade Effect with jQuery) afin de le rendre compatible avec IE 6, 7 et 8 et Mozilla
dans le BODY
<ul class="gallery">
<li>
<a href="#" class="thumb"><img src="images/imageA-2.jpg" border=0 alt="" class="a" /><img src="images/imageA.jpg" border=0 alt="" class="b" /></a>
</li>
<li>
<a href="#" class="thumb"><img src="images/imageB-2.jpg" border=0 alt="" class="a" /><img src="images/imageB.jpg" border=0 alt="" class="b" /></a>
</li>
<li>
<a href="#" class="thumb"><img src="images/imageC-2.jpg" border=0 alt="" class="a" /><img src="images/imageC.jpg" border=0 alt="" class="b" /></a>
</li>
<li>
<a href="#" class="thumb"><img src="images/imageD-2.jpg" border=0 alt="" class="a" /><img src="images/imageD.jpg" border=0 alt="" class="b" /></a>
</li>
</ul>
dans le HEADER
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img.b").hover(
function() {
$(this).animate({"opacity": "0"}, 800);
},
function() {
$(this).animate({"opacity": "1"}, 800);
});
});
</script>
<style>
div.fadehover {
float:left;
margin:10px;
}
img.a {
width:100px;
z-index: 10;
}
img.b {
position: absolute;
margin-left:-100px;
width:100px;
}
ul.gallery {
width: 708px; /*--Adjust width according to your scenario--*/
list-style: none;
margin: 0; padding: 0;
border: 0px solid #ccc;
display: block;
}
ul.gallery li {
width: 100px; /*--Width of image--*/
height: 67px; /*--Height of image--*/
display: block;
margin:2px;
float: left;
border: 0px solid #ccc;
}
ul.gallery li a.thumb {
width: 100px; /*--Width of image--*/
height: 67px; /*--Height of image--*/
padding: 0px;
border: 0px solid #ccc;
cursor: pointer;
}
</style>
Modifié par thomasv (20 Oct 2009 - 17:55)