Random Rollovers - Please Help! [Archive]

fragwell

01-24-2007, 01:12 PM

Hello there,

I am new to this forum and quite new to website coding in general and I am after some help with a problem I am having. I would very much appreciate any help at all with this even if it is only a pointer in the right direction.

I have recently made two example pages for my new website that each contains quite basic beginners JavaScript.

One page contains a random image element that when the page is refreshed, another image appears in place of the old one. These are selected from a folder of images I have. This page works perfectly.

My second page contains an image rollover which again works perfectly. I hover the mouse cursor over my image and it changes to another image. I move the mouse cursor off the image and it reverts back to the first one.

What I am after is a combination of both of these. I have searched long and hard on the internet for the last few days and can only seem to find a few people asking for the same thing - no real answers at all. It seems strange to me that this hasn’t been wanted by other people before.

Anyway - what I am after is the following:

I have four main images:

1. 'Albums’ button in dark red
2. ‘Albums’ button in light red
3. ‘Albums’ button in dark blue
4. 'Albums’ button in light blue

What I want is for my page to load and either Image 1 or Image 3 to load after having been randomly selected. I then want to be able to hover over the image and for the correct rollover image to be displayed.

Example - page loads, image 3 is displayed, hover over image and image 3 is replaced by image 4.

I think I understand that in order for this to work, the images to need to be in some sort of array and possibly be stored in their correct pairs.

I hope this all makes sense and that somebody might be able to shed some light on this situation for me.

I thank anybody in advance of any responses.

djr33

01-24-2007, 01:16 PM

Hmm...

Well, here's a general strategy (I won't know the code).

1. Make a random number (1 or 2).
2. Do the mouseover like normal, but...
3. if random=1, use imgs1&2;
4. if random=2, use imgs3&4;

That's about it. You don't need to deal with arrays or anything, though it could be a bit easier to edit later if you wanted to set all that up.

fragwell

01-24-2007, 03:31 PM

Hello again...

...somebody from another forum posted a reply and the code they supplied works!

<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

<script type="text/javascript">

arr=[
["darkred.jpg","lightred.jpg"],
["darkblue.jpg","lightblue.jpg"]
]

onload=function init(){
rdmNum=Math.floor(Math.random()*arr.length)
document.pic.src=arr[rdmNum][0]

document.pic.onmouseover=function(){
this.src=arr[rdmNum][1]
}

document.pic.onmouseout=function(){
this.src=arr[rdmNum][0]
}

}

</script>

</HEAD>
<BODY>

<img src="" alt="" name="pic">

</BODY>
</HTML>