How do I do this rotating image in a web page?

Discussion in 'OT Technology' started by Gen5_EG, Feb 18, 2005.

  1. Gen5_EG

    Gen5_EG :)

    Joined:
    Oct 15, 2001
    Messages:
    468
    Likes Received:
    0
    Location:
    Hawaii
    I want to make a web page that has image swapping capabilities like when you load the web page, a static image is shown, but each time you reload the page or load it at different times, the image changes. How do I do this? An example page that I was looking at was the UNLV (http://www.unlv.edu) web site in which the picture on the left changes each time I refresh the page. How do I do this to my page? Any site explain this or anything?
     
  2. MP

    MP New Member

    Joined:
    Sep 10, 2002
    Messages:
    34,377
    Likes Received:
    0
    Location:
    Silicon Valley
    simple javascript

    Code:
    <SCRIPT LANGUAGE="JavaScript">
    var theImages = new Array()
    
    theImages[0] = '/banners/banner1.jpg'
    
    var j = 0
    var p = theImages.length;
    var preBuffer = new Array()
    for (i = 0; i < p; i++){
       preBuffer[i] = new Image()
       preBuffer[i].src = theImages[i]
    }
    var whichImage = Math.round(Math.random()*(p-1));
    function showImage(){
    document.write('<img src="'+theImages[whichImage]+'">');
    }
    
    </script>
    
     
  3. Gen5_EG

    Gen5_EG :)

    Joined:
    Oct 15, 2001
    Messages:
    468
    Likes Received:
    0
    Location:
    Hawaii
    How do I insert this into my page?? I tried it and it doesn't work.
     
  4. MP

    MP New Member

    Joined:
    Sep 10, 2002
    Messages:
    34,377
    Likes Received:
    0
    Location:
    Silicon Valley

    uhhh, just copy and paste that into whatever html/css/js/php document that you want :dunno:

    I don't know how to explain it if you don't understand
     
  5. WERUreo

    WERUreo Imua!

    Joined:
    Oct 15, 2003
    Messages:
    566
    Likes Received:
    0
    Location:
    Daytona Beach, Florida
    Well, you can't just take that exact Javascript, insert it into the web page, and expect it to work as it is. First, you need to actually populate that array "theImages[]" with the images that you actually want to have being swapped in and out. Right now, there is only one image in the array (/banners/banner1.jpg) which is probably not even there.

    Second, you actually need to put the function call for showImage() in the spot where the image should be placed on the web page. It's one thing to declare the function. You still need to actually call it.

    Yeah, the Javascript may be simple, but you need to actually customize it to work for your specific web site. Simply inserting it as it is won't help.

    By the way, Gen5_EG, what part of Hawai'i are you from? I was born and raised there.
     
  6. MP

    MP New Member

    Joined:
    Sep 10, 2002
    Messages:
    34,377
    Likes Received:
    0
    Location:
    Silicon Valley
    if he's to retarded to not change that then he has more to be worried about.
     

Share This Page