Results 1 to 4 of 4

Thread: Random Image Load with image specific hovers (rollovers)

  1. #1
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Random Image Load with image specific hovers (rollovers)

    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!

  2. #2
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Default

    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:

    HTML Code:
    <img id="hover" src="something.png" onmouseover="randomHover();" onmouseout="resetState();">
    The following javascript should do the work:

    Code:
    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";
    
    }
    Last edited by midhul; 05-31-2011 at 03:20 PM.

  3. #3
    Join Date
    May 2011
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Feb 2008
    Posts
    81
    Thanks
    8
    Thanked 5 Times in 5 Posts

    Default

    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?

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
  •