I use the jQuery Cycle Plugin to do the rotation on mouse over.
http://jquery.malsup.com/cycle/
Make sure you download the cycle plugin
http://jquery.malsup.com/cycle/download.html
<html>
<head>
<title>Video thumb rotator with jquery Cycle Plugin</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.cycle.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.adimagebg').cycle();
$('.adimagebg').cycle('pause');
$(".adimagebg").hover( function () {
$(this).cycle({
fx: 'fade',
speed: 300,
timeout: 1200
});
},
function(){
$(this).cycle('pause');
});
});
</script>
</head>
<body>
<div class="adimagebg">
<a href="#"><img width="100" src="image1.jpg" border="0" /></a>
<a href="#"><img width="100" src="image2.jpg" border="0" /></a>
<a href="#"><img width="100" src="image3.jpg" border="0" /></a>
</div>
</body>
</html>
View Demo
No comments:
Post a Comment