Load Different Image each time Page Loads

**chanduroo** · 02-20-2007, 10:13 AM

I need help in writing a script that opens different image in the webpage each time it is opened - ( i have 10 images and one of these must be loaded at random every time).

Some scripts I found are suitable only for IE6 . I need the script to suit all browsers - IE4, 5, 6 ,7; Netscape above 4.0, Mozilla, Opera and other browsers.

I also need to add another requirement:
When the source of the webpage is opened - it should not show the script (obviously if we have the script as a .js file it won't) and also it should not display <script> </script> either at that place where the image is randomized.
I remember having seen this feature in some website but I do not remember it now.

Can anyone help me?

Thanks in advance.

**codeexploiter** · 02-20-2007, 11:13 AM

1. For your first query the following kind of programming will give you what you want

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#image
{
	width:760px;
	border: 1px solid #000;
	height:auto; /*You can use a predefined height here if you can have images with the similar height;*/
}

</style>
<script type="text/javascript">
//The array which is going to hold the image information. Store the image info along with their correct path; I've omitted the path here as I've stored the images in the same folder where my web page resides.
var imageArray = new Array();

imageArray[0] = "1.jpg"; //You can replace these image file names with your own image names.
imageArray[1] = "2.jpg";
imageArray[2] = "3.jpg";
imageArray[3] = "4.jpg";
function doIt()
{
	var rand = Math.floor(Math.random()*4); //Generating a random number between 0 and 3 here in your case you can replace 4 with 11 if you have 10 images
	
	var imgPath = "<img src='"+imageArray[rand]+"' alt='heder' border='0' align='absmiddle' />";
	
	document.getElementById("image").innerHTML = imgPath;
	
}
</script>
</head>

<body>
<div id="image"></div>
<script type="text/javascript">
doIt();
</script>
<br>
<br>
<br>
Other texts
</body>
</html>

Please note that in the above source code I've used my image name you need to change it into your image names. As you mentioned you have 10 images so you have to initialize the image array with all your 10 elements.

Don't forget to change the random number line the one which I indicated in red color with a number which is equal to the number of total images you have + 1.

2. Check this link

**chanduroo** · 02-20-2007, 11:37 AM

Thanks.

But still, I need the other queries to be answered too. Can you please suggest me where to look in for a solution?

Thanks again

**jscheuer1** · 02-20-2007, 03:23 PM

If you can have <script src="some.js" type="text/javascript"></script> on the page, it can be anywhere on the page. More easily somewhere after where the image will be but, using onload, it could be anywhere on the page.

Using the above example (there are better ways to code that but, since it works, I will not go into that here), this could be in the some.js file:

Code:

//The array which is going to hold the image information. Store the image info along with their correct path; I've omitted the path here as I've stored the images in the same folder where my web page resides.
var imageArray = new Array();

imageArray[0] = "1.jpg"; //You can replace these image file names with your own image names.
imageArray[1] = "2.jpg";
imageArray[2] = "3.jpg";
imageArray[3] = "4.jpg";
function doIt()
{
	var rand = Math.floor(Math.random()*4); //Generating a random number between 0 and 3 here in your case you can replace 4 with 11 if you have 10 images
	
	var imgPath = "<img src='"+imageArray[rand]+"' alt='heder' border='0' align='absmiddle' />";
	
	document.getElementById("image").innerHTML = imgPath;
	
}
doIt();

and the body portion of the markup could look like so:

HTML Code:

<body>
<div id="image"></div>
<br>
<br>
<br>
Other texts
<br>
<br>
<br>
more content
<script src="some.js" type="text/javascript"></script>
</body>

**Ryan Fitton** · 02-21-2007, 11:07 AM

I have found this script on Dynamic Drive and it lets you change your pictures. Click on this link here.

http://www.dynamicdrive.com/dynamici...reqcontent.htm

Thread: Load Different Image each time Page Loads

Thread Tools

Search Thread

Load Different Image each time Page Loads

Bookmarks

Bookmarks

Posting Permissions