Random Image Script for more than one image slot

L

Linda

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
 
L

Lee

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
Click to expand...

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>
 
M

Mick White

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

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
...
Click to expand...

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
 
L

Linda

Dear Lee!

Fabulous! What an elegent script - easy to read and edit! It's works
perfectly, thank you so much!
 
L

Linda

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
 
M

Mick White

Linda said:
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.
Click to expand...

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Pyautogui, cv2 and cannot find image 0
Code For New Image Every Time The Page Refreshes? 0
How Do I Set text on an Image and use the image as a border? 7
Image not changing between "mute" & "un-mute" images. 5
Image overlay and comparison code error. 2
I am trying to detect Which image id="" was clicked ? 22
Only one table shows up with the information 2
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1

Members online

Total: 30 (members: 1, guests: 29)
Robots: 452

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,055
Latest member
SlimSparkKetoACVReview

Latest Threads

Top