[goku87]

I saw recently on facebook how if you hover over an album in someone's images, it will "rollover" through random images within that album, in essence a mini-slideshow. How in the world do they do that? I've roamed the internet for a good two hours and can't seem to find a good explanation as to how it is done with more than two images (the static image and the rollover image). If anyone could point me in the right direction it would be greatly appreciated.

[IJET]

Just create an array of images and randomly select one on hover. Here's an old code I found awhile back that should work:

HTML

	<img id="hover" src="two.png" onmouseover="onHover();" onmouseout="resetState();">

Javascript

function randomSelect(arr) {

  var selected = arr[Math.floor(Math.random()*arr.length)]

  return selected;
}


images = 
[ 

"image1.png",
"image2.png",
"image3.png",
"image4.png"
]



function onHover () {

  var myImage = document.getElementById('hover');
  var selImage = randomSelect(images);

  myImage.src = selImage;
  

}

function resetState() {

  var myImage = document.getElementById('hover');
  myImage.src = "something.png";

}

This post has been edited by IJET: 18 November 2012 - 08:04 PM

[goku87]

Well, the thing is, when you hover, it doesn't just rollover to just one image. After about 1-2 seconds it changes again to another image, and continues until you no longer hover your mouse over the image, after which it reverts to the original image...if that makes sense. I've had little issue finding little snippets and tutorials on rollovers and transitions and such, but I've not been able to learn more about this "mini-slideshow" thingamajig.

[amit.soni]

are you looking for something like this...

check this fiddle

http://jsfiddle.net/amit_7soni/tQsZ5/

[goku87]

amit.soni, on 20 November 2012 - 02:20 AM, said:

are you looking for something like this...

Yes! This is exactly what I was looking for! I pick it apart and try to figure out how it works and then ask questions if I have any. Thank you!

[goku87]

So I got it working with my images (randomly selects a handful to display), however I seem to have a problem in the loop. Whenever it gets to the last image it seems to pause for twice as long as the interval was set to. Is there a way to remedy this?

[amit.soni]

here's the updated fiddle

http://jsfiddle.net/...7soni/tQsZ5/11/

if you still find any problem.. let me know.. i'll try to solve it...

Happy Coding />

This post has been edited by amit.soni: 20 November 2012 - 11:14 PM