PDA

View Full Version : Javascript random image rotator

jonathaw
06-22-2005, 11:53 PM
Yo, so I have 20 images, named 1.jpg, 2.jpg, etc. I want a random one to load each time the page is viewed, so I have Frankensteined the following code together:

****************************************
<script language="JavaScript">
var length = 20;
var ran_num = Math.round((length-1)*Math.random());

document.write("<img src='splash_pics/"+ran_num+".jpg'>");
document.splash.src = "splash_pics/"+ran_num+".jpg";
</script>

<img id="splash" src="../splash_pics/19.jpg" />
****************************************

The document.write part works just fine, but I need to make sure an image is displayed even if javascript is disabled. So, the second part (document.splash.src...) is what I need to work, because it should override src="../splash_pics/19.jpg" right???
I always get an error that says "document.splash has no properties" and I'm not familiar enough with javascript to know how to fix this. Why this no worky?

BTW, I know this would take about 2 lines of PHP, but... well I'm using javascript.
jonathaw
06-23-2005, 05:09 PM
Well, I've figured it out. My main problem: the script needs to go BELOW the image it's affecting. I'm used to PHP, so I didn't realize that with the script above, it hadn't gotten to the image yet, so it didn't know what to do. Anyways, here's what I came up with:

***********************************
<html>
<head>
<script language="javascript">
//randomly selects an image from seven sequentially
//numbered .gif's every time the page reloads
function splashpic (){
var length = 7;
var ran_num = Math.round((length-1)*Math.random());
ran_num=ran_num+1;
var source = "images/"+ran_num+".gif";
document.images['splash'].src = source;
}
</script>
</head>

<body>
<img id="splash" src="images/1.gif" />
<script language="javascript">
splashpic();
</script>
</body>
</html>
***********************************
jharriso
06-23-2005, 07:42 PM
Jon's having another conversation with himself...

http://forum.oscr.arizona.edu/showthread.php?t=753

:p
Doulie
10-03-2005, 10:10 PM
Ur a genius man, i tweaked your code a little bit and its working fine on my site, thankx.
abudhu
10-03-2005, 10:36 PM
If you want to use PHP which is vastly superior ( :-D )

You can use this:

<?

# selects a random number between 1 and X. X being defined as the amount # of pics you will ultimately have.

srand( microtime() * 1000000);
$var = rand(1,5);

# takes the selected number and assigns the location to the image
# to the variable $logo.

switch($var)
{
case 1: $logo="/Images/Random/BidNightFall2005ErikCaption.jpg"; break;
case 2: $logo="/Images/Random/Spring2005ClassCaption.jpg"; break;
case 3: $logo="Images/Random/Spring2005ClassCaption_2.jpg"; break;
case 4: $logo="Images/Random/ChillCaption.jpg"; break;
case 5: $logo="Images/Random/EdFaceCaption.jpg"; break;
}

# creates an HTML image tag in a string and then displays

$display = " <img src=$logo></img> ";

echo ($display);

?>

Then you can include this one line in the page you want it to display:
<?php include_once dirname(__FILE__)."/random.php"; ?>

Done. :)
jonathaw
10-04-2005, 06:06 PM
Woo, I'm a genius. I would have used PHP, but I already had all my files as .html and it would have been a pain to change it. Plus I wanted to figure it out using javascript anyways. But yeah, go PHP!