Two random arrays on same page?

Question

jonsan32 12 Junior Poster in Training

10 Years Ago

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>

image-resize javascript random

2 Contributors
9 Replies
339 Views
22 Hours Discussion Span
Latest Post 10 Years Ago Latest Post by jonsan32

All 9 Replies

GliderPilot 33 Posting Whiz

10 Years Ago

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.

GliderPilot 33 Posting Whiz

10 Years Ago

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

GliderPilot 33 Posting Whiz

10 Years Ago

Correct, don't forget to change your second function call (Line 145) to showImageA()

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

jonsan32 12 Junior Poster in Training · Answer 1 · 2014-04-10T03:13:53+00:00

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.

jonsan32 12 Junior Poster in Training · Answer 2 · 2014-04-10T04:15:06+00:00

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!

jonsan32 12 Junior Poster in Training · Answer 3 · 2014-04-10T04:32:46+00:00

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>

jonsan32 12 Junior Poster in Training · Answer 4 · 2014-04-10T04:46:21+00:00

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>

GliderPilot 33 Posting Whiz · Answer 5 · 2014-04-10T05:03:41+00:00

Line 81 and 118, the new Image() is a function, remove the x and z from that function call

jonsan32 12 Junior Poster in Training · Answer 6 · 2014-04-10T05:30:55+00:00

jonsan32 12 Junior Poster in Training

10 Years Ago

Success. Thanks for the billionth time :-)

Two random arrays on same page?

Recommended Answers Collapse Answers

All 9 Replies

Recommended Answers