How do i display a random image?

by **grizzly straight** on Wed Jun 07, 2006 9:58 pm

Ok so im a newb at java and html so bear with me. I am trying to make one of the boxes on my index page display a random picture every time some one goes to it. I have found a script that would do this and have worked on it for a couple of days now with no success. Below i have pasted the script that would do this. I have 5 images the i am trying to rotate which are labeled as pic1.jpg, pic2.jpg and so forth. I have also pasted the html for my index page. I found this java script at the following address http://willmaster.com/possibilities/archives/wmp20020402001.shtml

Code: Select all: <HTML> <HEAD> <script type="text/javascript" language="JavaScript">  </script> </HEAD> <BODY...

Heres the html for my website. I am having trouble trying to get the images appear in the lower left hand box where the beer pong table is. My website is http://www.campusgoal.com

Code: Select all: <!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>Campusgoal - Take a shot</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <div> <table cellpadding="0" cellspacing="0" border="0" width="798"> <tr> <td><a href="index.html"><img src="images/logo.jpg" /></a></td> <td><img src="images/header.jpg" /></td> </tr> <tr> <td height="19" colspan="2" align="center" bgcolor="#000000">  <center> <form method="get" action="http://www.google.com/custom" target="google_window"> <table bgcolor="#000000"> <tr><td width="792" height="32" align="center" valign="top" nowrap="nowrap"> <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25blk.gif" border="0" alt="Google" align="middle"></img></a> <input type="text" name="q" size="31" maxlength="255" value=""></input> <input type="submit" name="sa" value="Search"></input> <input type="hidden" name="client" value="pub-3406164630612512"></input> <input type="hidden" name="forid" value="1"></input> <input type="hidden" name="ie" value="ISO-8859-1"></input> <input type="hidden" name="oe" value="ISO-8859-1"></input> <input type="hidden" name="cof" value="GALT:#CC0000;GL:1;DIV:#000000;VLC:00FF80;AH:center;BGC:FFFFFF;LBGC:000000;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:50;LW:127;L:http://www.campusgoal.com/images/logo.jpg;S:http://;FORID:1;"></input> <input type="hidden" name="hl" value="en"></input> </td></tr></table> </form> </center>  <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td><a href="index.html" onmouseover="document.Home.src='images/navHomeOn.jpg'" onmouseout="document.Home.src='images/navHomeOn.jpg'"><img name="Home" src="images/navHomeOn.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="about.html" onmouseover="document.About.src='images/navAboutOn.jpg'" onmouseout="document.About.src='images/navAbout.jpg'"><img name="About" src="images/navAbout.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="contact.html" onmouseover="document.Contact.src='images/navContactOn.jpg'" onmouseout="document.Contact.src='images/navContact.jpg'"><img name="Contact" src="images/navContact.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="http://www.campusgoal.com/store" onmouseover="document.Store.src='images/navStoreOn.jpg'" onmouseout="document.Store.src='images/navStore.jpg'"><img name="Store" src="images/navStore.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="http://www.facebook.com" onmouseover="document.Face.src='images/facelogo.jpg'" onmouseout="document.Face.src='images/facelogo.jpg'"><img name="Face" src="images/facelogo.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="http://www.myspace.com" onmouseover="document.My.src='images/myspace.jpg'" onmouseout="document.My.src='images/myspace.jpg'"><img name="My" src="images/myspace.jpg" /></a></td> </tr> </table> </td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="798"> <tr> <td><img src="images/1Left.jpg" /></td> <td><img src="images/1PhotoLeft.jpg" /></td> <td><img src="images/1Mid.jpg" /></td> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td colspan="2"><img src="images/1Top.jpg" /></td> </tr> <tr> <td class="text1BG" width="197"> <div class="titleText">Travel</div> <div class="mainText"> Some of the best experiences in college happen away from it. One Travel offers some of the best deals on flights, hotels and cruises. If you are feeling spontaneous or planning for a spring break getaway make sure to check them out.<br /> <br /> <div align="right"> <table cellpadding="0" cellspacing="0" border="0" > <tr> <td><img src="images/iconLink.gif" hspace="5" /></td> <td><a href="http://epartner.onetravel.com/go/go2.cfm?GoID=97003" target="blank">more info....</a></td> </tr> </table> </div> </div> </td> <td><img src="images/1PhotoRight.jpg" /></td> </tr> <tr> <td colspan="2"><img src="images/1Bot.jpg" /></td> </tr> </table> </td> <td><img src="images/1Right.jpg" /></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="798"> <tr> <td><img src="images/2LeftA.jpg" /></td> <td><img src="images/2LeftB.jpg" /></td> <td class="main2BG" width="766"><img src="images/spc.gif" /></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="798"> <tr> <td height="249" valign="top" class="left3ABG"><img src="images/3LeftA.jpg" /></td> <td class="left3BBG" valign="top"><img src="images/3LeftB.jpg" /></td> <td valign="top" width="426"> <table cellpadding="0" cellspacing="0" border="0" width="426" height="100%"> <tr> <td><img src="images/box1TL.jpg" /></td> <td colspan="2"><img src="images/box1T.jpg" /></td> <td><img src="images/box1TR.jpg" /></td> </tr> <tr> <td class="box1LBG" valign="top" height="100%"><img src="images/box1L.jpg" /></td> <td valign="middle" width="186" align="center"><img src="images/table.jpg" width="166" height="117" /> </td> <td class="box1TextBG" valign="top" width="202" height="190"> <div class="titleText">Beer Pong Tables</div> <div class="mainText"> Beer pong is the retired athletes game of choice. With out this sport many college students who were athletes in high school would loose their competitive edge. Bing Bong tables are the player's table of choice. Light weight and durable these tables are excellent for beer pong and flip cup. Check out our store for more information.<br /> <div align="right"> <table cellpadding="0" cellspacing="0" border="0" > <tr> <td><img src="images/iconLink.gif" hspace="5" /></td> <td><a href="http://www.campusgoal.com/store/">more info...</a></td> </tr> </table> </div> </div> </td> <td class="box1RBG" valign="top"><img src="images/box1R.jpg" /></td> </tr> <tr> <td><img src="images/Box1BL1.jpg" /></td> <td colspan="2"><img src="images/box1B.jpg" /></td> <td><img src="images/box1BR.jpg" /></td> </tr> </table> <FORM> <INPUT TYPE="button" VALUE="Take a Shot!" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.campusgoal.com');"> </FORM> </td> <td class="mid3BG" valign="top"><img src="images/3Mid.jpg" /></td> <td valign="top" width="304"> <table cellpadding="0" cellspacing="0" border="0" width="304"> <tr> <td width="19"><img src="images/box2TL.jpg" /></td> <td colspan="2"><img src="images/box2T.jpg" width="295" height="19" /></td> <td width="19"><img src="images/box2TR.jpg" /></td> </tr> <tr> <td height="198" valign="top" class="box2LBG"><img src="images/box2L.jpg" width="19" height="197" /></td> <td valign="middle" width="3" align="center"> </td> <td class="box2TextBG" valign="top" width="292"> <div class="titleText">World News </div> <div class="mainText"> <style> .amazines a { text-decoration: none; color: #333333; font: 10px Arial, sans-serif; font-weight: bold; } a:hover { text-decoration: underline; } </style> <div class="amazines"> <script language="javascript" src="http://www.amazines.com/articlefeed.js?c=,0&m=10&a="></script> </div> <br /><br /> <div align="right"> </div> </div> </td> <td class="box2RBG" valign="top"><img src="images/box2R.jpg" width="19" height="198" /></td> </tr> <tr> <td><img src="images/Box2BL1.jpg" /></td> <td colspan="2"><img src="images/box2B.jpg" width="295" height="19" /></td> <td><img src="images/box2BR.jpg" /></td> </tr> </table> </td> <td class="right3BG" valign="top"><img src="images/3Right.jpg" /></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="827"> <tr> <td width="827" height="28" valign="middle" class="bot4BG logoworks">a concept by Jesse East, Copyright Â© 2006 Campusgoal</td> </tr> </table> </div> </body> </html>

Thanks guys for any help with this.

by **Phate** on Thu Jun 08, 2006 12:14 am

I am not sure how to do it like this, but if your server supports PHP, I have a very simple PHP script you can use.

by **grizzly straight** on Thu Jun 08, 2006 12:40 am

Im pretty sure it does, ill give it a try. thanks again

by **lalalogic** on Thu Jun 08, 2006 7:49 am

Hi grizzly straight

Do you want to display random images of that beer pong table?
According to the tutorial you used, you need to replace

Code: Select all: <img src="images/table.jpg" width="166" height="117" />

with

Code: Select all: <script type="text/javascript" language="JavaScript"></script>

in

Code: Select all: <td valign="middle" width="186" align="center"><img src="images/table.jpg" width="166" height="117" /> </td>

But the width and height of your images are bigger than the ones of your cell, so you either make the images smaller and change the

Code: Select all: LastPart = '.jpg" height="150" width="200">';

or leave it out as the tutorial says

Here is an example image tag:

<img src="logo2.jpg">

If all of your images will have the same height and width, you might also include those in the image tag:

<img src="logo2.jpg" height="150" width="200">

and use

Code: Select all: LastPart = '.jpg">';

instead and change your cell dimensions.

Or did you just copy the same width and height from the tut?

by **grizzly straight** on Fri Jun 09, 2006 12:24 am

i got it to work, thnxs for the break down.

by **grizzly straight** on Sat Jun 10, 2006 9:29 pm

ok so i got the random pictures for my products working fine, but now i also want to display random pictures of beaches on my site. I used the same script for both and changed the name to beaches for the second set or random images thinking that this would work fine howerve i get pictures of beaches in both spots now and no product images, below i pasted the html with both javascripts, im thinking it has to do with the tag i pasted where i want the pictures to be displayed. Any help is appreciated. Thanks again.

Code: Select all: <!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>Campusgoal - Take a shot</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <meta name="description" content=""> <meta name="keywords" content=""> <link rel="stylesheet" type="text/css" href="styles.css" /> <script type="text/javascript" language="JavaScript">  </script> <script type="text/javascript" language="JavaScript">  </script> </head> <body> <div> <table cellpadding="0" cellspacing="0" border="0" width="798"> <tr> <td><a href="index.html"><img src="images/logo.jpg" /></a></td> <td><img src="images/header.jpg" /></td> </tr> <tr> <td height="19" colspan="2" align="center" bgcolor="#000000">  <center> <form method="get" action="http://www.google.com/custom" target="google_window"> <table bgcolor="#000000"> <tr><td width="792" height="32" align="center" valign="top" nowrap="nowrap"> <a href="http://www.google.com/"> <img src="http://www.google.com/logos/Logo_25blk.gif" border="0" alt="Google" align="middle"></img></a> <input type="text" name="q" size="31" maxlength="255" value=""></input> <input type="submit" name="sa" value="Search"></input> <input type="hidden" name="client" value="pub-3406164630612512"></input> <input type="hidden" name="forid" value="1"></input> <input type="hidden" name="ie" value="ISO-8859-1"></input> <input type="hidden" name="oe" value="ISO-8859-1"></input> <input type="hidden" name="cof" value="GALT:#CC0000;GL:1;DIV:#000000;VLC:00FF80;AH:center;BGC:FFFFFF;LBGC:000000;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;LH:50;LW:127;L:http://www.campusgoal.com/images/logo.jpg;S:http://;FORID:1;"></input> <input type="hidden" name="hl" value="en"></input> </td></tr></table> </form> </center>  <table cellpadding="0" cellspacing="0" border="0" align="center"> <tr> <td><a href="index.html" onmouseover="document.Home.src='images/navHomeOn.jpg'" onmouseout="document.Home.src='images/navHomeOn.jpg'"><img name="Home" src="images/navHomeOn.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="about.html" onmouseover="document.About.src='images/navAboutOn.jpg'" onmouseout="document.About.src='images/navAbout.jpg'"><img name="About" src="images/navAbout.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="contact.html" onmouseover="document.Contact.src='images/navContactOn.jpg'" onmouseout="document.Contact.src='images/navContact.jpg'"><img name="Contact" src="images/navContact.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="http://www.campusgoal.com/store" onmouseover="document.Store.src='images/navStoreOn.jpg'" onmouseout="document.Store.src='images/navStore.jpg'"><img name="Store" src="images/navStore.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="http://www.facebook.com" target="blank" onmouseover="document.Face.src='images/facelogo.jpg'" onmouseout="document.Face.src='images/facelogo.jpg'"><img name="Face" src="images/facelogo.jpg" /></a></td> <td><img src="images/spc.gif" width="15" /></td> <td><a href="http://www.myspace.com" target="blank" onmouseover="document.My.src='images/myspace.jpg'" onmouseout="document.My.src='images/myspace.jpg'"><img name="My" src="images/myspace.jpg" /></a></td> </tr> </table> </td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="798"> <tr> <td><img src="images/1Left.jpg" /></td> <td><img src="images/1PhotoLeft.jpg" /></td> <td><img src="images/1Mid.jpg" /></td> <td> <table cellpadding="0" cellspacing="0" border="0" width="100%"> <tr> <td colspan="2"><img src="images/1Top.jpg" /></td> </tr> <tr> <td class="text1BG" width="197"> <div class="titleText">Travel</div> <div class="mainText"> Some of the best experiences in college happen away from it. One Travel offers some of the best deals on flights, hotels and cruises. If you are feeling spontaneous or planning for a spring break getaway make sure to check them out.<br /> <br /> <div align="right"> <table cellpadding="0" cellspacing="0" border="0" > <tr> <td><img src="images/iconLink.gif" hspace="5" /></td> <td><a href="http://epartner.onetravel.com/go/go2.cfm?GoID=97003" target="blank">One Travel</a></td> </tr> </table> </div> </div> </td> <td><script type="text/javascript" language="JavaScript"></script> </td> </tr> <tr> <td colspan="2"><img src="images/1Bot.jpg" /></td> </tr> </table> </td> <td><img src="images/1Right.jpg" /></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="798"> <tr> <td><img src="images/2LeftA.jpg" /></td> <td><img src="images/2LeftB.jpg" /></td> <td class="main2BG" width="766"><img src="images/spc.gif" /></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="798"> <tr> <td height="249" valign="top" class="left3ABG"><img src="images/3LeftA.jpg" /></td> <td class="left3BBG" valign="top"><img src="images/3LeftB.jpg" /></td> <td valign="top" width="426"> <table cellpadding="0" cellspacing="0" border="0" width="426" height="100%"> <tr> <td><img src="images/box1TL.jpg" /></td> <td colspan="2"><img src="images/box1T.jpg" /></td> <td><img src="images/box1TR.jpg" /></td> </tr> <tr> <td class="box1LBG" valign="top" height="100%"><img src="images/box1L.jpg" /></td> <td valign="middle" width="186" align="center"><script type="text/javascript" language="JavaScript"></script>  </td> <td class="box1TextBG" valign="top" width="202" height="190"> <div class="titleText">Campusgoal Store</div> <div class="mainText"> We offer some of the coolest things you can get for your parties. If you're looking for a new beer pong table or wanting to try something new then this is the place to look. We offer great deals on everything we sell so check it out. <br /> <div align="right"> <table cellpadding="0" cellspacing="0" border="0" > <tr> <td><img src="images/iconLink.gif" hspace="5" /></td> <td><a href="http://www.campusgoal.com/store/">Campusgoal e-commerce</a></td> </tr> </table> </div> </div> </td> <td class="box1RBG" valign="top"><img src="images/box1R.jpg" /></td> </tr> <tr> <td><img src="images/Box1BL1.jpg" /></td> <td colspan="2"><img src="images/box1B.jpg" /></td> <td><img src="images/box1BR.jpg" /></td> </tr> </table> <FORM> <INPUT TYPE="button" VALUE="Take a Shot!" onClick="this.style.behavior='url(#default#homepage)'; this.setHomePage('http://www.campusgoal.com');"> </FORM> </td> <td class="mid3BG" valign="top"><img src="images/3Mid.jpg" /></td> <td valign="top" width="304"> <table cellpadding="0" cellspacing="0" border="0" width="304"> <tr> <td width="19"><img src="images/box2TL.jpg" /></td> <td colspan="2"><img src="images/box2T.jpg" width="295" height="19" /></td> <td width="19"><img src="images/box2TR.jpg" /></td> </tr> <tr> <td height="198" valign="top" class="box2LBG"> </td> <td valign="middle" width="3" align="center"> </td> <td class="box2TextBG" valign="top" width="292"> <div class="titleText">World News </div> <div class="mainText"> <style> .amazines a { text-decoration: none; color: #333333; font: 10px Arial, sans-serif; font-weight: bold; } a:hover { text-decoration: underline; } </style> <div class="amazines"> <script language="javascript" src="http://www.amazines.com/articlefeed.js?c=,0&m=10&a="></script> </div> <br /><br /> <div align="right"> </div> </div> </td> <td class="box2RBG" valign="top"><img src="images/box2R.jpg" width="19" height="198" /></td> </tr> <tr> <td><img src="images/Box2BL1.jpg" /></td> <td colspan="2"><img src="images/box2B.jpg" width="295" height="19" /></td> <td><img src="images/box2BR.jpg" /></td> </tr> </table> </td> <td class="right3BG" valign="top"><img src="images/3Right.jpg" /></td> </tr> </table> <table cellpadding="0" cellspacing="0" border="0" width="827"> <tr> <td width="827" height="28" valign="middle" class="bot4BG logoworks">a concept by Jesse East, Copyright Â© 2006 Campusgoal</td> </tr> </table> </div> </body> </html>

How do i display a random image?

How do i display a random image?

now i want to use to places for random images

Who is online