PDA

View Full Version : Rotating Rollover Images



Muckiem14
Sep 3rd, 2007, 11:11 AM
Hello. On this (http://www.imikedesigns.com/VintageVillas) page there are three rollover images. I have 3 more rollover images that I would like to rotate on refresh. For example, there are 2 wedding images, 2 corporate images, and two accommodations images and I would like to have a random combination each time the page is viewed. I am not sure how this would be done. I have searched and found random image rotation scripts but im not sure that they would work with rollover images. Can anyone point me in the right direction?

Muckiem14
Sep 4th, 2007, 10:55 PM
Anyone?

Actinia
Sep 5th, 2007, 03:29 PM
First, you need an ID for each of the images that you need to swap. I have inserted an ID into the first image:

<img id="Weddings" src="images/w2.jpg" alt="Weddings" class="wedding" height="203" width="155">

In the head I inserted the following Javascript:

<script type="text/javascript">
function setImages() {
var Im1 = new Array();
Im1[0] = new Image(); Im1[0].src = "images/w2.jpe";
Im1[1] = new Image(); Im1[1].src = "images/c2.jpe";
im = Math.round(Math.random());
var wed = document.getElementById("Weddings");
wed.src = Im1[im].src;
}
onload = setImages;
</script>

I just chose a couple of pre-existing images here. Obviously, you would list and include all the alternatives.

Now, each time you load the page, the first image is a random selection from the list Im1. You would need to modify the line

im = Math.round(Math.random());depending on the number of images. This works for two.

John Rostron

Muckiem14
Sep 5th, 2007, 10:01 PM
Many thanks for the reply. I was actually trying to find out how to do this and still have rollover images. But, since posting the question, I havent been able to find a solution. Instead of javascript, I decided to use a bit of php which I think does the trick. Thanks for the help.