6 Replies - 1677 Views - Last Post: 20 November 2012 - 11:13 PM

#1 goku87  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 73
  • Joined: 17-October 09

Multiple images (more than 2) with rollover

Posted 18 November 2012 - 06:59 PM

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.

Is This A Good Question/Topic? 0
  • +

Replies To: Multiple images (more than 2) with rollover

#2 IJET  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 93
  • View blog
  • Posts: 121
  • Joined: 14-October 12

Re: Multiple images (more than 2) with rollover

Posted 18 November 2012 - 07:58 PM

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

Was This Post Helpful? 0
  • +
  • -

#3 goku87  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 73
  • Joined: 17-October 09

Re: Multiple images (more than 2) with rollover

Posted 19 November 2012 - 03:57 AM

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.
Was This Post Helpful? 0
  • +
  • -

#4 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Multiple images (more than 2) with rollover

Posted 20 November 2012 - 01:20 AM

are you looking for something like this...

check this fiddle

http://jsfiddle.net/amit_7soni/tQsZ5/
Was This Post Helpful? 1
  • +
  • -

#5 goku87  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 73
  • Joined: 17-October 09

Re: Multiple images (more than 2) with rollover

Posted 20 November 2012 - 03:41 PM

View Postamit.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!
Was This Post Helpful? 0
  • +
  • -

#6 goku87  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 4
  • View blog
  • Posts: 73
  • Joined: 17-October 09

Re: Multiple images (more than 2) with rollover

Posted 20 November 2012 - 08:04 PM

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?
Was This Post Helpful? 0
  • +
  • -

#7 amit.soni  Icon User is offline

  • D.I.C Head

Reputation: 26
  • View blog
  • Posts: 73
  • Joined: 19-November 10

Re: Multiple images (more than 2) with rollover

Posted 20 November 2012 - 11:13 PM

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

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1