Looking for Random Image Javascript

**spdrcr** · Jan 7, 2001, 21:51

I am making a site and i wanted to have it so that whenever you open a page a different image is shown in the corner of the page. I checked a couple of sites, and couldn't find the code. Can anyone help me here?

SR

**exbabylon** · Jan 7, 2001, 23:00

can you use PHP or perl? Then it would work cross browser.

**spdrcr** · Jan 7, 2001, 23:20

yeah im pretty sure i could use perl...

its virtualave.net if that helps any. well thats the server im on

**spleenboy** · Jan 7, 2001, 23:34

I hope this will help. Here's a quick randomizer in JS . . . (although Perl would be nice)

Code:

function randomPicture() {
	if (document.images) {
		var num = Math.round(Math.random() * 10);
		document.rndimage.src="random" + num + ".jpg";
	}
}

Then put an image into your document and insert "name='rndimage'" into the tag. Use onLoad="randomPicture()" in the body tag. Oh, and name all of the images you want to use (jpg only) with "random" and then a number. The script right now is set up for 10 pictures.

**spdrcr** · Jan 8, 2001, 08:51

did you leave some code out?

it doesnt seem to work...and you don't have to do a preloader with the images right?

SR

**isuru** · Jan 8, 2001, 10:35

Have a look at the Javascript primer at http://www.htmlgoodies.com

There is a section on generating random images

**JAMJAMMO** · Jan 8, 2001, 12:46

here ya go, i found this on some site and it works great. it is a two part script. HEAD & BODY. it originally was a random quote script which i love, but you can use it to randomly display images (either GIF or JPEG format), or text.

This part goes into the head tag, its the image preloader:
[code]
<SCRIPT LANGUAGE="JavaScript">

</script>
[\code]

And this is the script itself, pre configured for 10 images.
[code]
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
[\code]

When you have it installed, could you post the link here? I'd love to see how you impliment it into your site.

**spleenboy** · Jan 8, 2001, 20:04

Sorry about the bad description on that randomizer. Nope, there isn't a preloader with the script I gave. JamJammo's script looks good, use it if you want.

But here's an example page using that script I showed you earlier (with a little modification, so you can include images with any name.) You might want to use an image preloader with this, but I think it would slow down the page, rather than speeding it up. It's pointless to preload all those images to the cache when you'd only be ever using one of them on the page:

Code:

<html>
<head>
<title>Random Pictures</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
//replace the letters with the names of your .jpg images
var imgarray = new Array("A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z");

function randomPicture() {
	if (document.images) {
		var num = Math.round(Math.random() * imgarray.length);
		document.randimg.src="images/" + imgarray[num] + ".jpg";
	}
}


//-->
</SCRIPT>
</head>

<body onLoad="randomPicture()">
<img name="randimg">
</body>
</html>

Hope that makes it more clear!

spleen

The SitePoint Forums have moved.

User Tag List

Thread: Looking for Random Image Javascript

Thread Tools

Display

Bookmarks

Bookmarks

Posting Permissions