Random Image Script for more than one image slot

Discussion in 'Javascript' started by Linda, Jan 6, 2005.

  1. Linda

    Linda Guest

    Greetings:

    I have found a random image script that I like. It is located here:
    http://www.javascriptcity.com/scripts/local/simage3.htm

    I'd like to edit this to have 4 different slots for images with a
    different set of 5 images for each slot, something like this page:
    http://www.uchsc.edu

    The script says /* no need to edit past this point (unless you want to
    add more image slots) */

    Does this mean that you can add more pictures to your array, or, that
    you can add more image slots to your web site? Any thoughts on how to
    edit this?

    Or, do you have another script that can do the same thing? That is,
    have random images for 4 different slots on one page? I have searched
    a number of web sites and newsgroups and the script located above is
    the closest I have found.

    BTW; I tried copying and editing the script from the colorado page
    http://www.uchsc.edu but couldn't get it to work.

    TIA!

    Linda
    Linda, Jan 6, 2005
    #1
    1. Advertising

  2. Linda

    Lee Guest

    Linda said:
    >
    >Greetings:
    >
    >I have found a random image script that I like. It is located here:
    >http://www.javascriptcity.com/scripts/local/simage3.htm


    That script does a bad job of generating random numbers.
    You can replace "one", "two", "three", and "four" with the id values of your
    images, and replace the list of URLs under each one with the URLs that you want
    to select from for that image. In this example, they're all the same because I
    ran out of demo images. You have add any number of images with any number of
    URLs for each one:

    <html>
    <head>
    <script type="text/javascript">
    var data = [ "one",
    [ "http://www.azphx.com/dhtml/tmp/alpha6464.jpg",
    "http://www.azphx.com/dhtml/tmp/beta6464.jpg",
    "http://www.azphx.com/dhtml/tmp/gamma6464.jpg",
    "http://www.azphx.com/dhtml/tmp/delta6464.jpg"
    ],
    "two",
    [ "http://www.azphx.com/dhtml/tmp/alpha6464.jpg",
    "http://www.azphx.com/dhtml/tmp/beta6464.jpg",
    "http://www.azphx.com/dhtml/tmp/gamma6464.jpg",
    "http://www.azphx.com/dhtml/tmp/delta6464.jpg"
    ],
    "three",
    [ "http://www.azphx.com/dhtml/tmp/alpha6464.jpg",
    "http://www.azphx.com/dhtml/tmp/beta6464.jpg",
    "http://www.azphx.com/dhtml/tmp/gamma6464.jpg",
    "http://www.azphx.com/dhtml/tmp/delta6464.jpg"
    ],
    "four",
    [ "http://www.azphx.com/dhtml/tmp/alpha6464.jpg",
    "http://www.azphx.com/dhtml/tmp/beta6464.jpg",
    "http://www.azphx.com/dhtml/tmp/gamma6464.jpg",
    "http://www.azphx.com/dhtml/tmp/delta6464.jpg"
    ]
    ];


    function randomImages(d) {
    for(var i=0;i<d.length-2;i+=2) {
    document.getElementById(d).src=
    d[i+1][Math.floor(Math.random()*d[i+1].length)];
    }
    }
    </script>
    </head>
    <body onload="randomImages(data)">
    <h3>One</h3>
    <img id="one" src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg">
    <h3>Two</h3>
    <img id="two" src="http://www.azphx.com/dhtml/tmp/beta6464.jpg">
    <h3>Three</h3>
    <img id="three" src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg">
    <h3>Four</h3>
    <img id="Four" src="http://www.azphx.com/dhtml/tmp/delta6464.jpg">
    </body>
    </html>
    Lee, Jan 6, 2005
    #2
    1. Advertising

  3. Linda

    Mick White Guest

    Linda wrote:
    > Greetings:
    >
    > I have found a random image script that I like. It is located here:
    > http://www.javascriptcity.com/scripts/local/simage3.htm
    >
    > I'd like to edit this to have 4 different slots for images with a
    > different set of 5 images for each slot, something like this page:
    > http://www.uchsc.edu
    >...


    http://www.mickweb.com/javascript/random/randomImageOnload.html
    function displayRandomImage(imageName,array){
    document.images[imageName].src=array[new Date().getTime()%array.length];
    }
    urls=["images/cs1.jpg","images/cs2.jpg","images/cs3.jpg","images/cs4.jpg"]

    <body onload="displayRandomImage('csmember',urls)">
    <!-- csmember is the NAME of the image receiving the random changes -->

    //<img src="whatever.gif" name="csmember">

    Get this working, and with a slight modification we can have as many
    random images as you could possibly want.
    Mick
    Mick White, Jan 7, 2005
    #3
  4. Linda

    Linda Guest

    Dear Lee!

    Fabulous! What an elegent script - easy to read and edit! It's works
    perfectly, thank you so much!
    Linda, Jan 7, 2005
    #4
  5. Linda

    Linda Guest

    Hi Mick!

    Thanks so much for responding. Your script is easy to use, and looks
    great. The thing I wanted was more than one
    image on the page that could be randomized. Check out what Lee posted.
    It works great.

    Thanks again for taking the time to respond to my request. I really
    appreciate it!

    Linda
    Linda, Jan 7, 2005
    #5
  6. Linda

    Mick White Guest

    Linda wrote:

    > Hi Mick!
    >
    > Thanks so much for responding. Your script is easy to use, and looks
    > great. The thing I wanted was more than one
    > image on the page that could be randomized. Check out what Lee posted.
    > It works great.


    Indeed it does, but I would use the document.images collection for
    greater backwards compatibilty.
    Mick

    >
    > Thanks again for taking the time to respond to my request. I really
    > appreciate it!
    >
    > Linda
    >
    Mick White, Jan 7, 2005
    #6
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Merciadri Luca
    Replies:
    4
    Views:
    809
  2. Replies:
    3
    Views:
    186
    Josef Moellers
    Nov 1, 2007
  3. Bob Rashkin
    Replies:
    5
    Views:
    72
    Dennis Lee Bieber
    Dec 23, 2013
  4. Steven D'Aprano
    Replies:
    0
    Views:
    90
    Steven D'Aprano
    Dec 23, 2013
  5. Replies:
    3
    Views:
    82
    Gary Herron
    Dec 23, 2013
Loading...

Share This Page