Randomizer Help

[SipherDrakon]

I am using a javascript to randomly display pictures on my site, but there has to be two sets.

Basically on one side is the original artwork the client submits, next to it there is some text, then on the right is the artwork created on one of our products.

I want the images to change everytime the page is loaded, but the two sets have to coinside. Like, I can't have one piece of artwork on the left, but showing a different piece of artwork created on a product, to the right.

If thats at all confusing let me know, here is the code I have been working with. Any help would be appreciated.

	<td>
<!-- left -->
<table border="0" cellpadding="0" cellspacing="0" id="table13">
<tr>
	<td>
	<img src="images/t_11.gif" width="10" height="9" alt="" border="0"></td>
	<td background="images/t_13.gif">
	<img src="images/t_12.gif" width="6" height="9" alt="" border="0"></td>
	<td background="images/t_13.gif" align="right">
	<img src="images/t_14.gif" width="6" height="9" alt="" border="0"></td>
	<td>
	<img src="images/t_15.gif" width="10" height="9" alt="" border="0"></td>
</tr>
<tr valign="top">
	<td background="images/t_fon_left.gif">
	<img src="images/t_21.gif" width="10" height="6" alt="" border="0"></td>
	<td rowspan="2" colspan="2">
<!-- in -->
<table border="0" cellpadding="0" cellspacing="0" width="124" height="124" id="table14">
<tr>
	<td>
<p class="center" align="center">&nbsp; <!--webbot bot="HTMLMarkup" startspan -->
<script language="JavaScript">
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="images/originals/art1a.jpg"
myimages[2]="images/originals/art2a.jpg"
myimages[3]="images/originals/art3a.jpg"
myimages[4]="images/originals/art4a.jpg"
myimages[5]="images/originals/art5a.jpg"
myimages[6]="images/originals/art6a.jpg"
myimages[7]="images/originals/art7a.jpg"
myimages[8]="images/originals/art8a.jpg"
myimages[9]="images/originals/art9a.jpg"
myimages[10]="images/originals/art10a.jpg"
myimages[11]="images/originals/art11a.jpg"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>
<!--webbot bot="HTMLMarkup"
endspan -->&nbsp;</p></td>
</tr>
</table>
<!-- /in -->
	</td>
	<td background="images/t_fon_right.gif">
	<img src="images/t_23.gif" width="10" height="6" alt="" border="0"></td>
</tr>
<tr valign="bottom">
	<td background="images/t_fon_left.gif">
	<img src="images/t_31.gif" width="10" height="7" alt="" border="0"></td>
	<td background="images/t_fon_right.gif">
	<img src="images/t_33.gif" width="10" height="7" alt="" border="0"></td>
</tr>
<tr>
	<td>
	<img src="images/t_41.gif" width="10" height="10" alt="" border="0"></td>
	<td background="images/t_fon_bot.gif">
	<img src="images/t_42.gif" width="6" height="10" alt="" border="0"></td>
	<td background="images/t_fon_bot.gif" align="right">
	<img src="images/t_44.gif" width="6" height="10" alt="" border="0"></td>
	<td >
	<img src="images/t_45.gif" width="10" height="10" alt="" border="0"></td>
</tr>
</table>
<!-- /left -->
	</td>
	<td><p class="center" align="center">
&nbsp;</p>
	<p class="center" align="center">&nbsp;</p>
	<p class="center" align="center">
&nbsp;&nbsp;&nbsp; &nbsp;<font size="4" color="565656">Becomes: &nbsp;&nbsp; </font></p></td>
	<td>
<!-- left -->
<table border="0" cellpadding="0" cellspacing="0" id="table17">
<tr>
	<td>
	<img src="images/t_11.gif" width="10" height="9" alt="" border="0"></td>
	<td background="images/t_13.gif">
	<img src="images/t_12.gif" width="6" height="9" alt="" border="0"></td>
	<td background="images/t_13.gif" align="right">
	<img src="images/t_14.gif" width="6" height="9" alt="" border="0"></td>
	<td>
	<img src="images/t_15.gif" width="10" height="9" alt="" border="0"></td>
</tr>
<tr valign="top">
	<td background="images/t_fon_left.gif">
	<img src="images/t_21.gif" width="10" height="6" alt="" border="0"></td>
	<td rowspan="2" colspan="2">
<!-- in -->
<table border="0" cellpadding="0" cellspacing="0" width="124" height="124" id="table18">
<tr>
		<td>
<p class="center" align="center">&nbsp; <!--webbot bot="HTMLMarkup" startspan -->
<script language="JavaScript">
function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="images/wbpssmll.gif"
myimages[2]="images/magbcsmll.gif"
myimages[3]="images/fnb4smll.gif"
myimages[4]="images/basmsmll.gif"
myimages[5]="images/art12a.jpg"
myimages[6]="images/ct4smll.gif"
myimages[7]="images/puzg.gif"
myimages[8]="images/kthrtsmll.gif"
myimages[9]="images/mpsmll.gif"
myimages[10]="images/mugsmll.gif"
myimages[11]="images/ktrdsmll.gif"

//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="../products/wbps.html"
imagelinks[2]="../products/magbc.html"
imagelinks[3]="../products/fnb4.html"
imagelinks[4]="../products/basm.html"
imagelinks[5]="../products/ktrd.html"
imagelinks[6]="../products/ct4.html"
imagelinks[7]="../products/puzg.html"
imagelinks[8]="../products/kthrt.html"
imagelinks[9]="../products/mp.html"
imagelinks[10]="../products/mug.html"
imagelinks[11]="../products/ktrd.html"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')
}
random_imglink()
//-->
</script>
<!--webbot bot="HTMLMarkup"
endspan -->&nbsp;</p></td></tr></table>
<!-- /in -->
	</td>
	<td background="images/t_fon_right.gif">
	<img src="images/t_23.gif" width="10" height="6" alt="" border="0"></td>
</tr>
<tr valign="bottom">
	<td background="images/t_fon_left.gif">
	<img src="images/t_31.gif" width="10" height="7" alt="" border="0"></td>
	<td background="images/t_fon_right.gif">
	<img src="images/t_33.gif" width="10" height="7" alt="" border="0"></td>
</tr>
<tr>
	<td>
	<img src="images/t_41.gif" width="10" height="10" alt="" border="0"></td>
	<td background="images/t_fon_bot.gif">
	<img src="images/t_42.gif" width="6" height="10" alt="" border="0"></td>
	<td background="images/t_fon_bot.gif" align="right">
	<img src="images/t_44.gif" width="6" height="10" alt="" border="0"></td>
	<td >
	<img src="images/t_45.gif" width="10" height="10" alt="" border="0"></td>
</tr>
</table>
<!-- /left -->
	</td>

[FrankTheTank]

Step one - name your files so that the pairs are easily matched up. For instance, leftImg1.jpg would pair up with rightImg1.jpg. The names themselves are not important, just make sure they are consistent and you can calculate them easily.

Next, write a bit of code to pick a random number in your range and store it in a variable.

Finally, write the code to set the src attribute of the two images to their names with, like this:

document.getElementById('leftImg').src = "leftImg" + myRandomNumber + ".jpg"

Also set the other images src attribute using the same variable and the appropriate name.

Frank

[SipherDrakon]

Originally Posted by FrankTheTank

Step one - name your files so that the pairs are easily matched up. For instance, leftImg1.jpg would pair up with rightImg1.jpg. The names themselves are not important, just make sure they are consistent and you can calculate them easily.

Done I have art(number)a.jpg for left side and art(number)b.gif for right side.

Originally Posted by FrankTheTank

Next, write a bit of code to pick a random number in your range and store it in a variable.

I have no idea how to do this, I got the existing code as a free code bit. JS is pretty greek to me.

Originally Posted by FrankTheTank

Finally, write the code to set the src attribute of the two images to their names with, like this:

document.getElementById('leftImg').src = "leftImg" + myRandomNumber + ".jpg"

Also set the other images src attribute using the same variable and the appropriate name.

I understand this part, but would that take the place of this:

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0></a>')

or am I completely messing this up?

Also the second set has links associated with it so the coding at the end of that one is this:

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<a href='+'"'+imagelinks[ry]+'"'+'><img src="'+myimages[ry]+'" border=0></a>')

[FrankTheTank]

Originally Posted by SipherDrakon

I understand this part, but would that take the place of this:

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0></a>')

Yes. You want to avoid usibng document.write - it's poor code and it's a pain in the butt to maintain that. Instead, create the image tags for the two images, and then use JavaScript to set the src. We can also set the href of your link.

So, instead of this...

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0></a>')

Use this:

<img src="" border="0" id="imageA">
<a href="" id="linkB"><img src="" border="0" id="imageB"></a>

<script type="text/javascript">
    var ry = Math.floor((Math.random()*myimages.length) + 1) )

    document.getElementById('imageA').src = 'myimages' + ry + 'a.jpg';
    document.getElementById('imageB').src = 'myimages' + ry + 'b.jpg';
    document.getElementById('linkB').href = 'mylink' + ry + 'b.html';

</script>

Your code is written up like you have an array of names and links - if that's the case, you'll want to keep how you have that part set up and adapt it for my use above.

Also note that I changed your random number code slightly - the random function gives you a number greater or equal to 0 and less than 1, so when you multiply by x, you may get 0 when you round down but never x. Adding 1 to it means the number you get is between 1 and x, inclusive. Otherwise you get a number between 0 and x-1. You can adjust that to taste by adding or subtracting different ways.

Frank

[SipherDrakon]

I just can't wrap my head around this. . . this is what i have, but it doesn't do anything. I can't understand it. I did research on it, but i still can't seem to grasp this:

Here is the javascript put between the body tags:

<script language="JavaScript">
var myimages1=new Array()
//specify random images below. You can have as many as you wish
myimages1[1]="images/originals/art1a.jpg"
myimages1[2]="images/originals/art2a.jpg"
myimages1[3]="images/originals/art3a.jpg"
myimages1[4]="images/originals/art4a.jpg"
myimages1[5]="images/originals/art5a.jpg"
myimages1[6]="images/originals/art6a.jpg"
myimages1[7]="images/originals/art7a.jpg"
myimages1[8]="images/originals/art8a.jpg"
myimages1[9]="images/originals/arta9.jpg"
myimages1[10]="images/originals/art10a.jpg"
myimages1[11]="images/originals/art11a.jpg"

var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="images/originals/art1b.gif"
myimages[2]="images/originals/art2b.gif"
myimages[3]="images/originals/art3b.gif"
myimages[4]="images/originals/art4b.gif"
myimages[5]="images/originals/art5b.gif"
myimages[6]="images/originals/art6b.gif"
myimages[7]="images/originals/art7b.gif"
myimages[8]="images/originals/art8b.gif"
myimages[9]="images/originals/art9b.gif"
myimages[10]="images/originals/art10b.gif"
myimages[11]="images/originals/art11b.gif"

//specify corresponding links below
var imagelinks=new Array()
imagelinks[1]="../products/wbps.html"
imagelinks[2]="../products/magbc.html"
imagelinks[3]="../products/fnb4.html"
imagelinks[4]="../products/basm.html"
imagelinks[5]="../products/ktrd.html"
imagelinks[6]="../products/ct4.html"
imagelinks[7]="../products/puzg.html"
imagelinks[8]="../products/kthrt.html"
imagelinks[9]="../products/mp.html"
imagelinks[10]="../products/mug.html"
imagelinks[11]="../products/ktrd.html"

var ry = Math.floor((Math.random()*myimages.length) + 1) );

    document.getElementById('imageA').src = 'myimages1' + ry + 'a.jpg';
    document.getElementById('imageB').src = 'myimages' + ry + 'b.gif';
    document.getElementById('linkB').href = 'imagelinks' + ry + 'b.html';

</script>

And here are the tags for image 1 and image 2

image 1

<img src="images/originals/art1a.jpg" border="0" id="imageA" alt="Original Artwork">

image 2

<a href="../products/wbps.html" id="linkB"><img src="images/originals/art1b.gif" border="0" id="imageB" alt="Art on Product"></a>

But it again, doesn't do anything, it just loads the two original images and thats it. But i still want them to be random starting out, the old code worked, but couldnt mesh the two images together. I can't even get this script to work. Ugggghhh.

[SipherDrakon]

sweet, I got it, I had to change around your coding just a little to get it to work, but thank you for the idea to use getelementbyid.

the + signs and the stuff in quotations just made the function point to that exact wording, which was fine for the images, but the links were where i had to begin to change the coding, also I had to rechange the random function, it gave me an undefined number a few times, so i started the numbers from 0 and took out the +1 on the function, so this is what i came up with and it is working perfectly. Thank you, so much.

<script language="JavaScript">
var images=new Array();
//specify random images below. You can have as many as you wish
images[0]="images/originals/art1a.jpg";
images[1]="images/originals/art2a.jpg";
images[2]="images/originals/art3a.jpg";
images[3]="images/originals/art4a.jpg";
images[4]="images/originals/art5a.jpg";
images[5]="images/originals/art6a.jpg";
images[6]="images/originals/art7a.jpg";
images[7]="images/originals/art8a.jpg";
images[8]="images/originals/art9a.jpg";
images[9]="images/originals/art10a.jpg";
images[10]="images/originals/art11a.jpg";

var myimages=new Array();
//specify random images below. You can have as many as you wish
myimages[0]="images/originals/art1b.gif";
myimages[1]="images/originals/art2b.gif";
myimages[2]="images/originals/art3b.gif";
myimages[3]="images/originals/art4b.gif";
myimages[4]="images/originals/art5b.gif";
myimages[5]="images/originals/art6b.gif";
myimages[6]="images/originals/art7b.gif";
myimages[7]="images/originals/art8b.gif";
myimages[8]="images/originals/art9b.gif";
myimages[9]="images/originals/art10b.gif";
myimages[10]="images/originals/art11b.gif";

//specify corresponding links below
var imagelinks=new Array();
imagelinks[0]="../products/wbps.html";
imagelinks[1]="../products/magbc.html";
imagelinks[2]="../products/fnb4.html";
imagelinks[3]="../products/basm.html";
imagelinks[4]="../products/ktrd.html";
imagelinks[5]="../products/ct4.html";
imagelinks[6]="../products/puzg.html";
imagelinks[7]="../products/kthrt.html";
imagelinks[8]="../products/mp.html";
imagelinks[9]="../products/mug.html";
imagelinks[10]="../products/ktrd.html";

var ry = Math.floor(Math.random()*myimages.length);
function rotatePictures() {
    document.getElementById('imageA').src = images[ry];
    document.getElementById('imageB').src = myimages[ry];
    document.getElementById('linkB').href = imagelinks[ry];
}
onload=rotatePictures; 
</script>

and of course the images are as such, those didn't change at all.

<img src="images/originals/art1a.jpg" border="0" align="center" valign="center" id="imageA" alt="Original Artwork" width="124" height="124">

and image 2

<a href="../products/wbps.html" id="linkB"><img src="images/originals/art1b.gif" align="center" valign="center" border="0" id="imageB" alt="Art on Product" width="124" height="124"></a>

[FrankTheTank]

Sorry, I tried to post a little more help the other night but I had some connection problems. Glad to see you worked it out.

Frank

[JMRKER]

Not to butt in on success, but the following may have some advantages:

PHP Code:

<html>
<head>
<title>Randomize Art Display</title>
<script type="text/javascript">
var images = [
//specify random images below. You can have as many as you wish
"images/originals/art|1a.jpg|1b.jpg|Original Artwork 1|Art on Product 1|../products/wbps.html",
"images/originals/art|2a.jpg|2b.jpg|Original Artwork 2|Art on Product 2|../products/magbc.html",
"images/originals/art|3a.jpg|3b.jpg|Original Artwork 3|Art on Product 3|../products/fnb4.html",
"images/originals/art|4a.jpg|4b.jpg|Original Artwork 4|Art on Product 4|../products/basm.html",
"images/originals/art|5a.jpg|5b.jpg|Original Artwork 5|Art on Product 5|../products/ktrd.html",
"images/originals/art|6a.jpg|6b.jpg|Original Artwork 6|Art on Product 6|../products/ct4.html",
"images/originals/art|7a.jpg|7b.jpg|Original Artwork 7|Art on Product 7|../products/puzg.html",
"images/originals/art|8a.jpg|8b.jpg|Original Artwork 8|Art on Product 8|../products/kthrt.html",
"images/originals/art|9a.jpg|9b.jpg|Original Artwork 9|Art on Product 9|../products/mp.html",
"images/originals/art|10a.jpg|10b.jpg|Original Artwork 10|Art on Product 10|../products/mug.html"
"images/originals/art|11a.jpg|11ab.jpg|Original Artwork 11|Art on Product 11|../products/ktrd.html"];

var ry = Math.floor(Math.random()*images.length);
function rotatePictures() {
  var tmp = images[ry].split('|');
  document.getElementById('imageA').src = tmp[0]+tmp[1];
  document.getElementById('imageA').alt = tmp[3];
  document.getElementById('imageB').src = tmp[0]+tmp[2];
  document.getElementById('imageB').alt = tmp[4];
  document.getElementById('linkB').href = tmp[5];
}
onload=rotatePictures;
</script>
</head>
<body>
<img src="images/originals/art1a.jpg" border="0" align="center" valign="center" id="imageA" alt="Original Artwork" width="124" height="124">

<a href="../products/wbps.html" id="linkB">
<img src="images/originals/art1b.gif" align="center" valign="center" border="0" id="imageB" alt="Art on Product" width="124" height="124">
</a>


</body>
</html>


Advantages
1. You can keep the path, filenames, descriptions and links in one array for easier maintanence.
2. It alters the descriptions for the images also.
3. You can have non-sequential filenames that would still be referenced as one, for example:
"images/originals/art|thumbnailImage.jpg|fullImage.jpg|Original Artwork 1 - Small|Art on Product 1 - Large|../products/wbps.html",
4. Less code to maintain and mis-type.


Note, you could alter so that filenames and 'alt=' descriptions are adjacent if that is important to you (just reset the assignments of the '=tmp[xx]' statements)

You can also add a <div> tag and include 'alt' descriptions under or above images displayed.
but that would depend upon you design needs.