Rotating Rollover Images

[paulj]

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...

[bcarl314]

You'll probably need to either 1) create a server-side script to send new image paths, or 2) create a javascript to set the images randomly from an array.

[doctordew]

Yeah I remember reading a few things about this before as well. I'm pretty sure I learned about this in glancing over the tutorial in javascript. A simple solution for you would be to just go to the one of many slideshow programs on google and just copy in a slideshow... they could change, but it would ruin the randomness part.

Here's a link to a thing that will give you a random link displayed, maybe you can play with it to get your images.

http://www.w3schools.com/js/tryit.asp?filename=tryjs_randomlink

[levelup]

I have the same problem and now it has been sorted!

[maigan]

"Rollover images" are images that change when the mouse is over them. Rollover Images (or "rollovers" as we'll call them) are popular because they give the image a live feeling... they indicate that something will happen when you click on it.

<SCRIPT TYPE="text/javascript">
<!--
// copyright 1999 Idocs, Inc. http://www.idocs.com/tags/
// Distribute this script freely, but please keep this
// notice with the code.

var rollOverArr=new Array();
function setrollover(OverImgSrc,pageImageName)
{
if (! document.images)return;
if (pageImageName == null)
pageImageName = document.images[document.images.length-1].name;
rollOverArr[pageImageName]=new Object;
rollOverArr[pageImageName].overImg = new Image;
rollOverArr[pageImageName].overImg.src=OverImgSrc;
}

function rollover(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
if (! rollOverArr[pageImageName].outImg)
{
rollOverArr[pageImageName].outImg = new Image;
rollOverArr[pageImageName].outImg.src = document.images[pageImageName].src;
}
document.images[pageImageName].src=rollOverArr[pageImageName].overImg.src;
}

function rollout(pageImageName)
{
if (! document.images)return;
if (! rollOverArr[pageImageName])return;
document.images[pageImageName].src=rollOverArr[pageImageName].outImg.src;
}
//-->
</SCRIPT>