OSCR Help Forums

Jonathan Wilson · 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.

Jonathan Wilson · 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>
***********************************

**Josh Harrison** · 06-23-2005, 07:42 PM

Jon's having another conversation with himself...

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

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.

Amit Budhu · 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.

Jonathan Wilson · 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!

06-22-2005, 11:53 PM	#1
Jonathan Wilson OSCR Alumni Join Date: Oct 2004 Location: LA Posts: 207	Javascript random image rotator 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. __________________

06-23-2005, 05:09 PM	#2
Jonathan Wilson OSCR Alumni Join Date: Oct 2004 Location: LA Posts: 207	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> ********************************** __________________

06-23-2005, 07:42 PM	#3
Josh Harrison OSCR Staff Join Date: Oct 2004 Posts: 1,208	Jon's having another conversation with himself... http://forum.oscr.arizona.edu/showthread.php?t=753 __________________ Support Systems Analyst, Sr - Office of Student Computing Resources Infrastructure Support Associate - Computer Science LEARN lab

10-03-2005, 10:10 PM	#4
Doulie Guest Posts: n/a	Nice job Ur a genius man, i tweaked your code a little bit and its working fine on my site, thankx.

10-04-2005, 06:06 PM	#6
Jonathan Wilson OSCR Alumni Join Date: Oct 2004 Location: LA Posts: 207	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! __________________

10-03-2005, 10:36 PM	#5
Amit Budhu Senior Member Join Date: Nov 2004 Posts: 730	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.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode