0

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>  
2
Contributors
9
Replies
25
Views
3 Years
Discussion Span
Last Post by jonsan32
1

Are you looking to have two seperate groups of images and choose an image from each group two display (I.E. Pool A has 5 images and Pool B has 6 images. Choose 1 random image from Pool A and one from Pool B)

Or are you looking to just have one set of images and you want the script to pick two of those images instead of just one and display both of them.

0

The first. 2 groups of images. Some of the athletes are in a few pictures, and I'm trying to avoid them appearing twice on the same page at the same time.

Thank you for any help you're willing to provide.

1

Not exactly the most efficient way but you would need to change the name for all occurances of the following variables in your second script:

theImages
imgSize
p
whichImage
0

So like...

theImagesx
imgSizex
px
whichImagex

I think I tried that before, but didn't even notice the p until now. If I'm wrong, let me know. I'm gonna go try it out right now. Thanks a ton!

0

Awesome! It finally worked. Thanks a ton.

<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 theImagesx = new Array();
var imgSizex  = new Array();
// do not change this 
// To add more image files, continue with the
// pattern below, adding to the array.
theImagesx[0] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/50friends.png'; imgSizex[0]={height:200};
theImagesx[1] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/willfull.png'; imgSizex[1]={height:200};
theImagesx[2] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/annikafull.jpg'; imgSizex[2]={height:200};
theImagesx[3] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/domfull.jpg'; imgSizex[3]={height:200};
// do not edit anything below this line
var j = 0
var px = theImagesx.length;
var preBuffer = new Array()
for (i = 0; i < px; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImagesx[i]
}
var whichImagex = Math.floor(Math.random()*p);
function showImagex(){
document.write('<img src="',theImagesx[whichImagex],'"',
               ' width="',imgSizex[whichImagex].width,'" "',
               ' height="',imgSizex[whichImagex].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 showImage(){
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">
showImagex();
</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>  
0

Sorry, guess it worked in my editor... but not on my page. I've since renamed both by adding z to one set and x to the other on all the variables you mentioned. If you get a sec and can see what I've done wrong, please let me know.

Thank you either way. You've taught me a great deal. Have a great day.

<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>



<center>
<table width="1000" height="400">
<tr>
<td rowspan="2" width="150">

<SCRIPT LANGUAGE="JavaScript">
// Set up the image files to be used. 
var theImagesx = new Array();
var imgSizex  = new Array();
// do not change this 
// To add more image files, continue with the
// pattern below, adding to the array.
theImagesx[0] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/50friends.png'; imgSizex[0]={height:200};
theImagesx[1] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/willfull.png'; imgSizex[1]={height:200};
theImagesx[2] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/annikafull.jpg'; imgSizex[2]={height:200};
theImagesx[3] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/domfull.jpg'; imgSizex[3]={height:200};
// do not edit anything below this line
var j = 0
var px = theImagesx.length;
var preBuffer = new Array()
for (i = 0; i < px; i++){
   preBuffer[i] = new Imagex()
   preBuffer[i].src = theImagesx[i]
}
var whichImagex = Math.floor(Math.random()*px);
function showImagex(){
document.write('<img src="',theImagesx[whichImagex],'"',
               ' width="',imgSizex[whichImagex].width,'" "',
               ' height="',imgSizex[whichImagex].height,'">');
}
</script>

<SCRIPT LANGUAGE="JavaScript">
showImagex();
</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" width="150">


<SCRIPT LANGUAGE="JavaScript"> 
// Set up the image files to be used. 
var theImagesz = new Array();
var imgSizez  = new Array();
// do not change this 
// To add more image files, continue with the
// pattern below, adding to the array.
theImagesz[0] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/trevorfull.jpg'; imgSizez[0]={height:200};
theImagesz[1] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/joeyfull.jpg'; imgSizez[1]={height:200};
theImagesz[2] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/evanfull.png'; imgSizez[2]={height:200};
theImagesz[3] = 'https://dl.dropboxusercontent.com/u/5739741/OMAR/images/Players/emmafull.png'; imgSizez[3]={height:200};
// do not edit anything below this line
var j = 0
var pz = theImagesz.length;
var preBuffer = new Array()
for (i = 0; i < pz; i++){
   preBuffer[i] = new Imagez()
   preBuffer[i].src = theImagesz[i]
}
var whichImagez = Math.floor(Math.random()*pz);
function showImagez(){
document.write('<img src="',theImagesz[whichImagez],'"',
               ' width="',imgSizez[whichImagez].width,'" "',
               ' height="',imgSizez[whichImagez].height,'">');
}
</script>
<SCRIPT LANGUAGE="JavaScript">
showImagez();
</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>  
This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.