$(document).ready(function () { $(".thumb_wrap img").fadeTo("fast", 0.2); // This sets the opacity of the thumbs when the page loads $(".thumb_wrap img").hover(function () { $(this).fadeTo("fast", 1.0); // This sets the opacity on hover }, function () { $(this).fadeTo("fast", 0.2); // This sets the opacity on mouseout }); $(".thumb_wrap").mouseover(function () { $(this).sprite({ fps: 30, no_of_frames: 14,play_frames: 7}); }); $(".thumb_wrap").mouseout(function () { $(this).sprite({ fps: 30, no_of_frames: 14, start_at_frame: 7, play_frames: 7}); }); });
<!-- a Spritely example. code and graphics by Rafael Gonzalves http://www.gonzalves.fr --> <div class="thumb_wrap"> <img src="http://www.gonzalves.fr/postpic/post_22.png" class="index_thumb" /> </div>
body { background-color: #2c2b2b; } .thumb_wrap { width:240px; height: 269px; float: left; position: relative; cursor: pointer; overflow: hidden; } .index_thumb { width:240px; height: 269px; position: relative; } .index_thumb a:hover { position: relative; color:#000 !important; } .index_thumb img { position: relative; z-index: 10; } .thumb_wrap { background: transparent url(http://www.gonzalves.fr/wp-content/themes/gonzalvesmk3/img/animsprite3.png) 0 0 no-repeat; }