Results 1 to 3 of 3

Thread: Random Rollovers - Please Help!

  1. #1
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Random Rollovers - Please Help!

    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.

  2. #2
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,164
    Thanks
    265
    Thanked 690 Times in 678 Posts

    Default

    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.
    Daniel - Freelance Web Design | <?php?> | <html>| espaŮol | Deutsch | italiano | portuguÍs | catalŗ | un peu de franÁais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  3. #3
    Join Date
    Jan 2007
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •