Random Image Load with image specific hovers (rollovers)

[PhoenixDigitalMedia]

Hi,

Is there a way to randomly load an image and when you hover over a specific image, a hover image will be in place?

Basically I know how to do a random image load.

Each specific image needs a rollover.

Here is an example of what I need, but obviously I need random images to load, but you can see why I need specific hover images.

http://www.lanmark360.com/people.html

Thanks!

[midhul]

You can use javascript's Math.random() function. I'll show you an example of how you can do it by storing your images in an array, and later randomly picking one of the images.

Say you have:

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

The following javascript should do the work:

function randomPick(arr) {

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

  return selected;
}


images = 
[ 

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



function randomHover () {

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

  myImage.src = selImage;
  

}

function resetState() {

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

}

[PhoenixDigitalMedia]

OK, I have about 27 images. I want random images to appear on the page, and have hover images for them, basically using CSS "hover" effect.

The problem is, I don't want any images to repeat on the page.

I am so lost on this but I need to get this done. I appreciate your reply, midhul, but I am a bit confused.

[midhul]

Okay, even I'm sort of confused with what you want.
Let's get these cleared first:

When a user moves his or her mouse over the randomly picked image, the mouse over image will also be selected in random? Or is it only random for picking what images to display on the page?

If you don't want images to be repeated, then after all the 27 images have been completed, what is supposed to happen?