Trying to figure out how to have 2 sets of images display randomly on the same page. I know I have to rename something, but nothing I try is working. Any help would be greatly appreciated. Thanks.
For now I just have the two scripts repeated back to back before the html begins. Within my table, I've listed where the two images would be - again, repeated for now. I like this script because it allows me to resize the images independently, so I couldn't just use a basic random array to accomplish this. And, oh yeah, I'm not very good at coding... so don't go too high over my head with the explanation :-)
<style type="text/css">
#HTML1, #HTML3, #HTML7{
display:none;
}
.avail td{
border-left:1px #aaaaaa solid;
border-right:1px #aaaaaa solid;
}
.number{
font-size:26px;
font-family:arial;
}
.team{
font-family:arial;
}
.EventLink {
display: block;
width: 290px;
height: 110px;
background: url('https://dl.dropboxusercontent.com/u/5739741/OMAR/images/events1.png') top;
text-indent: -99999px;
}
.EventLink:hover {
background-position: 5px 102px;
}
.DetailsLink {
display: block;
width: 290px;
height: 110px;
background: url('https://dl.dropboxusercontent.com/u/5739741/OMAR/images/details1.png') top left;
text-indent: -99999px;
}
.DetailsLink:hover {
background-position: -10px 112px;
}
.SigninLink {
display: block;
width: 290px;
height: 110px;
background: url('https://dl.dropboxusercontent.com/u/5739741/OMAR/images/signin1.png') top;
text-indent: -99999px;
}
.SigninLink:hover {
background-position: 11px 110px;
}
.SignupLink {
display: block;
width: 290px;
height: 110px;
background: url('https://dl.dropboxusercontent.com/u/5739741/OMAR/images/signup1.png') top;
text-indent: -99999px;
}
.SignupLink:hover {
background-position: -2px 122px;
}
</style>
<SCRIPT LANGUAGE="JavaScript">
// Set up the image files to be used.
var theImages = new Array();
var imgSize = new Array();
// do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/50friends.png'; imgSize[0]={height:200};
theImages[1] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/willfull.png'; imgSize[1]={height:200};
theImages[2] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/annikafull.jpg'; imgSize[2]={height:200};
theImages[3] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/domfull.jpg'; imgSize[3]={height:200};
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.floor(Math.random()*p);
function showImage(){
document.write('<img src="',theImages[whichImage],'"',
' width="',imgSize[whichImage].width,'" "',
' height="',imgSize[whichImage].height,'">');
}
</script>
<SCRIPT LANGUAGE="JavaScript">
// Set up the image files to be used.
var theImages = new Array();
var imgSize = new Array();
// do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/trevorfull.jpg'; imgSize[0]={height:200};
theImages[1] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/joeyfull.jpg'; imgSize[1]={height:200};
theImages[2] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/evanfull.png'; imgSize[2]={height:200};
theImages[3] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/emmafull.png'; imgSize[3]={height:200};
// do not edit anything below this line
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.floor(Math.random()*p);
function showImageA(){
document.write('<img src="',theImages[whichImage],'"',
' width="',imgSize[whichImage].width,'" "',
' height="',imgSize[whichImage].height,'">');
}
</script>
<center>
<table width="1000" height="400">
<tr>
<td rowspan="2">
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
</td>
<td align="center"><a class="SigninLink" href="http://bookeo.com/50allstars/customer">Sign-in</a></td>
<td align="center"><a class="SignupLink" href="http://bookeo.com/50allstars/signup">Sign-up</a></td>
<td rowspan="2">
<SCRIPT LANGUAGE="JavaScript">
showImage();
</script>
</td>
</tr>
<tr>
<td align="center"><a class="EventLink" href="http://www.50allstars.com/p/workouts.html">Events</a></td>
<td align="center"><a class="DetailsLink" href="http://www.50allstars.com/p/details.html">Details</a></td>
</tr>
</table><br><br><br><br>
<table width="1000" height="200">
<tr><td width="450" align="center">
<table width=100%><tr><td align="center" style="background-color:#FFFFFF; color:#000000;
padding:4px 4px 4px 4px; letter-spacing:9px; font-size:16px; font-family:arial; font-weight:bold; word-spacing:4px;">
TEAM SPOTS AVAILABLE
</td></tr><tr><td>
<table width=100% cellpadding=2 cellspacing=0 class="avail"><tr>
<td align="center"><span class="team">hs boys</span><br><span class="number">6</span></td>
<td align="center"><span class="team">hs girls</span><br><span class="number">7</span></td>
<td align="center"><span class="team">ms boys</span><br><span class="number">1</span></td>
<td align="center"><span class="team">ms girls</span><br><span class="number">5</span></td>
<td align="center"><span class="team">elem boys</span><br><span class="number">7</span></td>
<td align="center"><span class="team">elem girls</span><br><span class="number">19</span></td>
</tr></table>
</td></tr></table>
</td><td align="RIGHT">
<font style="font-size:17px; font-family:arial; color:#444444; letter-spacing:5px; word-
spacing:4px;">email us anytime<BR><a href="mailto:staff@50allstars.com" style="color:#000000;
text-decoration:none;"><B>staff@50allstars.com</B></a></font>
</td></tr></table>
</center>
