hawking22

Thank you so much, ElanMan. That really helped.

Hey again - I was experimenting and have this tiny bit of code. It works and "cycles" the images each time the user mouses over - but all it needs to do now is repeat itself automatically every few seconds. I've tried to do this via the setInterval() method but it has not worked. Can someone please try this code out in an HTML file and impart some wisdom? Thanks! <script type="text/javascript"> function change(id){ if (id.src.match("/1.jpg")) { id.src = id.src.replace("/1.jpg","/2.jpg"); return false; } if (id.src.match("/2.jpg")) { id.src = id.src.replace("/2.jpg","/3.jpg"); return false; } if (id.src.match("/3.jpg")) { id.src = id.src.replace("/3.jpg","/1.jpg"); return false; } } </script> <img onmouseover="setInterval(change(this),200)" src="http://i1.ytimg.com/vi/p9Eomp-zT0s/1.jpg" />

Hi all I'm trying to achieve what should be an incredibly simple effect, but without success. I have various thumbnails of YouTube videos in a gallery, and I'd like to mouse over each one and have it "animate" or crossfade between various frames of the video. YouTube provides 3 preview images for each video, and so ideally the user would see a small "slideshow" of all 3 images when he mouses over the static thumbnail. A working sample of what I'd like can be seen on the website (Sorry. Link removed), although I would ideally have a "crossfade" effect between each image. So far I've tried Jquery as well as plain Javascript, which would work fine if either language had anything that resembled a "delay" or "pause" function. This really should be incredibly simple, since it's really just 2 steps repeated over and over: 1. Change src attribute of img element 2. Pause for a few seconds Here is the Jquery I've been working with so far. Thank you for any suggestions or help <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".thumbs img").hover( function(){ // Displays image 2 on mouseover, then "pauses" with fadeTo, then image 3. $(this).attr("src", "http://i1.ytimg.com/vi/p9Eomp-zT0s/2.jpg") .fadeTo("slow",1) .attr("src", "http://i1.ytimg.com/vi/p9Eomp-zT0s/3.jpg") }, function(){ // Back to image 1 on mouseout $(this).attr("src", "http://i1.ytimg.com/vi/p9Eomp-zT0s/1.jpg"); } ); }); </script> <div class="thumbs"> <img src="http://i1.ytimg.com/vi/p9Eomp-zT0s/1.jpg"/> </div>