Random Image on Page Load

[Tyg3r]

I'm sure this has been answered numerous times before, but I can't seem to find an explicit answer to what I need.

Please note: I know the basics of Action Script, but I have NEVER touched java script in a HTML document before. So please, treat me like a little 3 year old.

So... I have a standard index page image with hotspots on it. I would like alternate images to randomly replace that image with each page load (or refresh). Remember, the image has hotspots in exactly the same places.

Any ideas people? links? or tutorials?

[mburt]

Use an array of images:

var imgs = ["image1.gif","image2.gif","image3.gif","image4.gif"]
var rand = Math.round(Math.random()*imgs.length)
onload=function() {
imageid.src = imgs[rand]
}

Replace imageid above with your actual image id tag.

[Tyg3r]

hmmm... i cant seem to get it to work.

[Tyg3r]

I found this

<SCRIPT LANGUAGE="JavaScript">
<!-- Original: Nicholas Lupien (smylex@aol.com) -->

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
var rand1 = 0;
var useRand = 0;

images = new Array;
images[1] = new Image();
images[1].src = "images/image1.jpg";
images[2] = new Image();
images[2].src = "images/image2.jpg";
images[3] = new Image();
images[3].src = "images/image3.jpg";
images[4] = new Image();
images[4].src = "images/image4.jpg";
images[5] = new Image();
images[5].src = "images/image5.jpg";
images[6] = new Image();
images[6].src = "images/image6.jpg";

function swapPic() {
var imgnum = images.length - 1;
do {
var randnum = Math.random();
rand1 = Math.round((imgnum - 1) * randnum) + 1;
} while (rand1 == useRand);
useRand = rand1;
document.randimg.src = images[useRand].src;
}
// End -->
</script>

"image/imagex.jpg" is the path to your random images, where "x" is the
number of the image. Of course you can name your images anything you want,
just be sure to edit the script so that the paths are accurate.



Place this in your HTML doc where you want the random image to appear. Be
sure to put in the correct image height and width for your first image, and
that all images that follow are the same size.

<a href="#" onClick="swapPic();"><img name="randimg" src="images/image1.jpg"
width="197" height="417" border="0" alt=""></a>


-- Michael Barrett

however the randomisation only works when you click on the image. And by changing "onClick" to "onLoad", does nothing at all.

Is there another expression I could use?

[mwinter]

var rand = Math.round(Math.random()*imgs.length)

That will produce values between zero (0) and imgs.length, inclusive, with those two extremes occurring with half the probability of the other values within that range. Use the floor method to produce values in the range 0...imgs.length-1.

imageid.src = imgs[rand]

Never do that. An id attribute value does not translate into global variable in all browsers, and it's a stupid idea even in those browsers where it does (that's not your fault, but there's no reason to use the "feature", either).

For images, one can use the images collection which will lookup an image by either id or name attribute. For the best compatibility across browsers, both attributes should be present on the img element (with the same values, naturally).

Replace imageid above with your actual image id tag.

There's no such thing as an "id tag".

It's in everyone's interests to learn the right terms and use them in discussions. Just think, if I call tags "tags", elements "tags", and attributes "tags", how can the word "tag" possibly remain useful?

window.onload = function() {
    var images = ['image1.jpeg', 'image2.jpeg', 'image3.jpeg'];

    document.images.nameOrID.src = images[Math.floor(Math.random() * images.length)];
};

Whilst I'm being a pedant:

... I know the basics of Action Script, but I have NEVER touched java script ...

Both ActionScript and JavaScript are single words and nouns referring to languages; both implementations of ECMAScript. There's no "Action Script" or "java script".

The "JavaScript Source" is questionable resource. I don't think I've ever seen well-written code coming from there. Avoid it.

Mike

[Tyg3r]

AHA! understood and accomplished Thanks Mike.

See the index image... Stagknight

[blm126]

The "JavaScript Source" is questionable resource. I don't think I've ever seen well-written code coming from there. Avoid it.

I've heard(well,seen actually) you say that about quite a few web sites. Do you know of any websites that have well-written code?

[mwinter]

I've heard(well,seen actually) you say that about quite a few web sites.

It's unfortunate fact that the state of browser scripting is, in general, quite poor. As a result, it's quite easy to find bad examples. It's quite possible that there is quality code in some of the scripts found at the "JavaScript Source" and other script archive sites, but it'll be hidden amongst complete junk.

Do you know of any websites that have well-written code?

No, but I don't go looking. I'd rather write the code myself than search for, and evaluate, the work of others. It might be a waste of time to reinvent the wheel, but if the wheel was created square...

Mike

[Inder]

I want a preloader for a file that i m uploading. so that i know that my file is uploading ,how much % that it uploaded.

[sharonjackson]

Here is a really easy one. You put it in the space where you want the random images to appear. I am sorry I do not know who originally wrote this. change the img src to reflect your site and the names of your images. And off you go!:

<SCRIPT LANGUAGE="Javascript">
function banner() { } ; b = new banner() ; n = 0
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner2.jpg' border='0' ALT='Haunted House'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner3.jpg' border='0' ALT='Graves in the Snow'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner4.jpg' border='0' ALT='Insane Joker'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner5.jpg' border='0' ALT='Fangs'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner6.jpg' border='0' ALT='Screaming Clowns'></A>"
b[n++]= "<A HREF='index.html'><IMG name=randimg SRC='images/interface/banner7.jpg' border='0' ALT='Dead Servant'></A>"
i=Math.floor(Math.random() * n) ;
document.write( b[i] )
</SCRIPT>