| View previous topic :: View next topic |
| Author |
Message |
grizzly straight
Joined: 07 Jun 2006
Posts: 7
|
 Posted: Wed Jun 07, 2006 10:58 pm Post subject: How do i display a random image? |
 |
|
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: |
<HTML>
<HEAD>
<script type="text/javascript" language="JavaScript">
<!-- Copyright 2002 Bontrager Connection, LLC
//
// Type the number of images you are rotating.
NumberOfImagesToRotate = 5;
// Specify the first and last part of the image tag.
FirstPart = '<img src="pic';
LastPart = '.jpg" height="150" width="200">';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</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 www.campusgoal.com
| 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>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">
<!-- Search Google -->
<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>
<!-- Search Google -->
<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.  |
|
| Back to top |
|
 |
|
|
Phate
500+ Club
Joined: 21 Nov 2004
Posts: 818
Location: 127.0.0.1
|
| Posted: Thu Jun 08, 2006 1:14 am Post subject: Re: How do i display a random image? |
|
|
| 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. |
|
| Back to top |
|
|
grizzly straight
Joined: 07 Jun 2006
Posts: 7
|
| Posted: Thu Jun 08, 2006 1:40 am Post subject: Re: How do i display a random image? |
|
|
| Im pretty sure it does, ill give it a try. thanks again |
|
| Back to top |
|
|
lalalogic
100+ Club
Joined: 16 Aug 2005
Posts: 200
|
| Posted: Thu Jun 08, 2006 8:49 am Post subject: Re: How do i display a random image? |
|
|
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: |
| <img src="images/table.jpg" width="166" height="117" /> |
with
| Code: |
<script type="text/javascript" language="JavaScript"><!--
printImage();
//--></script>
|
in
| Code: |
| <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: |
| LastPart = '.jpg" height="150" width="200">'; |
or leave it out as the tutorial says
| Quote: |
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: |
| LastPart = '.jpg">'; |
instead and change your cell dimensions. Or did you just copy the same width and height from the tut? |
|
| Back to top |
|
|
grizzly straight
Joined: 07 Jun 2006
Posts: 7
|
| Posted: Fri Jun 09, 2006 1:24 am Post subject: Re: How do i display a random image? |
|
|
| i got it to work, thnxs for the break down. |
|
| Back to top |
|
|
grizzly straight
Joined: 07 Jun 2006
Posts: 7
|
| Posted: Sat Jun 10, 2006 10:29 pm Post subject: now i want to use to places for random images |
|
|
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: |
<!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">
<!-- Copyright 2002 Bontrager Connection, LLC
//
// Type the number of images you are rotating.
NumberOfImagesToRotate = 4;
// Specify the first and last part of the image tag.
FirstPart = '<img src="pic';
LastPart = '.jpg" >';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</script>
<script type="text/javascript" language="JavaScript">
<!-- Copyright 2002 Bontrager Connection, LLC
//
// Type the number of images you are rotating.
NumberOfImagesToRotate = 4;
// Specify the first and last part of the image tag.
FirstPart = '<img src="beach';
LastPart = '.jpg" >';
function printImage() {
var r = Math.ceil(Math.random() * NumberOfImagesToRotate);
document.write(FirstPart + r + LastPart);
}
//-->
</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">
<!-- Search Google -->
<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>
<!-- Search Google -->
<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"><!--
printImage();
//--></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"><!--
printImage();
//--></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>
|
|
|
| Back to top |
|
|
|
