Hi all -- I need to put a table w/ 4 cells (across) to display recommended/suggested items. I want them to all be random each time someone visits or refreshes, I will have a current pool of about a dozen images to be pulled from..

I have found the code below, I edited it to be 4 td cells from one, however, as expected, it only pulls the same image randomly into all 4. I would like 4 separate ones.

Can anyone help me to edit this further to call in 4 different random images in the 4 cells? Do I need to have, for example: td.title1 title2 title3 title4 in the css? Thank you in advance.

<head>
<meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
<title><%WindowTitle%></title>
<style type='text/css'>

td.title {
   height: 150px;
   width: 160px;
   padding: 10px; 
   border: 3px solid #666666;
   border-top: none;
   vertical-align: bottom;

}

</style>

<script language="JavaScript" type="text/javascript"><!--

var image = new Array();

image[0] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/1.jpg' ;
image[1] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/2.jpg' ;
image[2] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/3.jpg' ;
image[3] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/4.jpg' ;
image[4] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/5.jpg' ;

var index = Math.floor(Math.random() * image.length);
document.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
//-->
</script>


</head>
<body>

<table width='550' cellpadding='0' cellspacing='0'>
<tr><td class='title' colspan='2'><h1><%Title%> </h1></td>
<td class='title' colspan='2'><h1><%Title%> </h1></td>
<td class='title' colspan='2'><h1><%Title%> </h1></td>
<td class='title' colspan='2'><h1><%Title%> </h1></td></tr>
<tr>
<td class='leftside' width='550' valign='top'>
<!-- BEGIN LEFT SIDE -->

</td></tr></table>


</body>

Recommended Answers

All 20 Replies

Note that Math.random() can give equal results so you have to use variations of the variable index in order to get different pictures in each cell.This works perfect for me:

<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
<title><%WindowTitle%></title>
<style type='text/css'>

td.title {
height: 150px;
width: 160px;
padding: 10px; 
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;

}
td.titles {
height: 150px;
width: 160px;
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titled {
height: 150px;
width: 160px;
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titlef {
height: 150px;
width: 160px;
border: 3px solid #666666;
border-top: none;
vertical-align: bottom;
}
</style>

<script language="JavaScript" type="text/javascript"><!--

var image = new Array();

image[0] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/1.jpg' ;
image[1] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/2.jpg' ;
image[2] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/3.jpg' ;
image[3] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/4.jpg' ;
image[4] = 'http://i48.photobucket.com/albums/f227/wasaaaaa/5.jpg' ;

var index = Math.floor(Math.random() * image.length);
var indexb;
var indexc;
var indexd;
if (index>=0 && index<3)
indexb = index + 2;
else
indexb = index - 2;
if (index!=4)
indexc = index + 1;
if (index!=0)
indexd = index - 1;

document.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
document.write('<style type="text/css"> td.titles { background-image: url('+ image[indexb] +') } </style>');
document.write('<style type="text/css"> td.titled { background-image: url('+ image[indexc] +') } </style>');
document.write('<style type="text/css"> td.titlef { background-image: url('+ image[indexd] +') } </style>');

//-->
</script>


</head>
<body>

<table width='550' cellpadding='0' cellspacing='0'>
<tr><td class='title' colspan='2'><h1><%Title%> </h1></td>
<td class='titles' colspan='2'><h1><%Title%> </h1></td>
<td class='titled' colspan='2'><h1><%Title%> </h1></td>
<td class='titlef' colspan='2'><h1><%Title%> </h1></td></tr>

<!-- BEGIN LEFT SIDE -->

</td></tr></table>


</body>
</html>

George - thank you very much! I will try and check that out today! I will let you know if I got it working in case anyone else will need the info! Thanks alot!

Hey George - it works great -- one thing though that I cannot figure out - I have made like 7 random images, get them in the table cells great -- but titled and titlef, the last two columns occasionally populate with no image at all -- not sure why. I have the code below>

<html>
        <head>
       <meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
        <title><%WindowTitle%></title>
       <style type='text/css'>

td.title {
        height: 177px;
       width: 165px;
        padding: 0px;
        border: 1px solid #666666;
        border-top: none;
        vertical-align: bottom;
       }
 
td.titles {
       height: 177px;
       width: 165px;
       border: 1px solid #666666;
       border-top: none;
       vertical-align: bottom;
        }
		
td.titled {
      height: 177px;
      width: 165px;
      border:1px solid #666666;
      border-top: none;
      vertical-align: bottom;
       }
	   
td.titlef {
      height: 177px;
      width: 165px;
      border: 1px solid #666666;
      border-top: none;
      vertical-align: bottom;
       }
       </style>
       <script language="JavaScript" type="text/javascript"><!--
 
      var image = new Array();
       image[0] = 'http:kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
       image[1] = 'http:kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
       image[2] = 'http:kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
       image[3] = 'http:kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
       image[4] = 'http:kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
	   image[5] = 'http:kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
	    image[6] = 'http:kqimageserver.com/pwimages/new/testimages/random.jpg' ;
		 
		var index = Math.floor(Math.random() * image.length);
       var indexb;
      var indexc;
       var indexd;
       if (index>=0 && index<3)
      indexb = index + 2;
       else
      indexb = index - 2;
        if (index!=4)
      indexc = index + 1;
        if (index!=0)
      indexd = index - 1;
 
      document.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
       document.write('<style type="text/css"> td.titles { background-image: url('+ image[indexb] +') } </style>');
      document.write('<style type="text/css"> td.titled { background-image: url('+ image[indexc] +') } </style>');
      document.write('<style type="text/css"> td.titlef { background-image: url('+ image[indexd] +') } </style>');

      //-->
       </script>
        </head>
       <body>
       <table width='660' cellpadding='0' cellspacing='0'>
       <tr>
       <td class='title'><h1><%Title%> </h1></td>
       <td class='titles'><h1><%Title%> </h1></td>
       <td class='titled'><h1><%Title%> </h1></td>
       <td class='titlef'><h1><%Title%> </h1></td></tr>

      <!-- BEGIN LEFT SIDE -->

      </td></tr></table>
 
      </body>
       </html>

You forgot to put // after http: Also you forgot to create another tds in order to have 7 images in the table and the javascript function(document.write) which writes the images in the table. Also you need to create another variables for the random numbers. This is the code.

<html>
<head>
<meta http-equiv='Content-Type' content='text/html;charset=ISO-8859-1'>
<title><%WindowTitle%></title>
<style type='text/css'>

td.title {
height: 177px;
width: 165px;
padding: 0px; 
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;

}
td.titles {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titled {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titlef {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titleg {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titleh {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
td.titlej {
height: 177px;
width: 165px;
border: 1px solid #666666;
border-top: none;
vertical-align: bottom;
}
</style>

<script language="JavaScript" type="text/javascript"><!--

var image = new Array();

image[0] = 'http://kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
       image[1] = 'http://kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
       image[2] = 'http://kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
       image[3] = 'http://kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
       image[4] = 'http://kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
	   image[5] = 'http://kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
	    image[6] = 'http://kqimageserver.com/pwimages/new/testimages/random.jpg' ;

var index = Math.floor(Math.random() * image.length);
var indexb;
var indexc;
var indexd;
var indexf;
var indexg;
var indexh;
if (index == 0)
{indexb = index + 1;
indexc = index + 2;
indexd = index + 3;
indexf = index + 4;
indexg = index + 5;
indexh = index + 6;}
else if (index == 1)
{indexb = index - 1;
indexc = index + 1;
indexd = index + 2;
indexf = index + 3;
indexg = index + 4;
indexh = index + 5;}
else if (index == 2)
{indexb = index - 2;
indexc = index - 1;
indexd = index + 1;
indexf = index + 2;
indexg = index + 3;
indexh = index + 4;}
else if (index == 3)
{indexb = index - 3;
indexc = index - 2;
indexd = index - 1;
indexf = index + 1;
indexg = index + 2;
indexh = index + 3;}
else if (index == 4)
{indexb = index - 4;
indexc = index - 3;
indexd = index - 2;
indexf = index - 1;
indexg = index + 1;
indexh = index + 2;}
else if (index == 5)
{indexb = index - 5;
indexc = index - 4;
indexd = index - 3;
indexf = index - 2;
indexg = index - 1;
indexh = index + 1;}
else if (index == 6)
{indexb = index - 6;
indexc = index - 5;
indexd = index - 4;
indexf = index - 3;
indexg = index - 2;
indexh = index - 1;}
else if (index == 7)
{indexb = index - 7;
indexc = index - 6;
indexd = index - 5;
indexf = index - 4;
indexg = index - 3;
indexh = index - 2;}

d = document;
d.write('<style type="text/css"> td.title { background-image: url('+ image[index] +') } </style>');
d.write('<style type="text/css"> td.titles { background-image: url('+ image[indexb] +') } </style>');
d.write('<style type="text/css"> td.titled { background-image: url('+ image[indexc] +') } </style>');
d.write('<style type="text/css"> td.titlef { background-image: url('+ image[indexd] +') } </style>');
d.write('<style type="text/css"> td.titleg { background-image: url('+ image[indexf]+') } </style>');
d.write('<style type="text/css"> td.titleh { background-image: url('+ image[indexg]+') } </style>');
d.write('<style type="text/css"> td.titlej { background-image: url('+ image[indexh]+') } </style>');

//-->
</script>


</head>
<body>

<table width='660' cellpadding='0' cellspacing='0'>
<tr><td class='title' colspan='2'><h1><%Title%> </h1></td>
<td class='titles' colspan='2'><h1><%Title%> </h1></td>
<td class='titled' colspan='2'><h1><%Title%> </h1></td>
<td class='titlef' colspan='2'><h1><%Titlw%> </h1></td>
<td class='titleg' colspan='2'><h1><%Title%> </h1></td>
<td class='titleh' colspan='2'><h1><%Title%> </h1></td>
<td class='titlej' colspan='2'><h1><%Title%> </h1></td></tr>

<!-- BEGIN LEFT SIDE -->

</td></tr></table>


</body>
</html>

Okay, thanks -- I'll check it out, but I just want to say I don't want 7 images on the page -- I want four images -- but a pool of about 10 different ones the table pulls from.
If this makes any difference in what you put up there, I would so appreciate one more bit of help -- it seemed to work fine except for some reason the 3rd and 4th td cell pulled in a blank (no) image and I couldn't see why.
Thank you again.

I have a pseudo page up -- can anyone look at it and tell me how I can get my random images to come into the gray bordered cells?? I'd really appreciate it!

http://newpw.delphi-ts.net/test/testy.aspx


I got it to work fine until it got put in asp. net master page.

Hey George and all -- I got it working pretty much, only problem is that the cells sometimes populate with no image at all -- not sure why it would do that - I have ten images to choose from in a folder - I am only displaying four at a time --

George, can you see the possibility for a more random algorithm for 10 images? This is what I have:

var index = Math.floor(Math.random() * image.length);
       var indexb;
      var indexc;
       var indexd;
       if (index>=0 && index<3)
      indexb = index + 2;
       else
      indexb = index - 2;
        if (index!=4)
      indexc = index + 1;
        if (index!=0)
      indexd = index - 1;

not sure if I can do better than that, and how i can stop the odd no image thing from happening. If its any help, it seems to happen only (or most) in the 3rd and 4th cell. titlec and titled)

Here is the relevent code:

<asp:Content ContentPlaceHolderID="cphBody" runat="server">
  <style type='text/css'>

td.titlea {
        height: 174px;
       width: 140px;
        padding: 0px;
        border: 1px solid #eeeeee;
       vertical-align: bottom;
	   margin-right:2px;
       }
 
td.titleb {
       height: 174px;
       width: 160px;
       border: 1px solid #eeeeee;
       vertical-align: bottom;
	    margin-right:2px;
        }
		
td.titlec {
      height: 174px;
      width: 140px;
      border:1px solid #eeeeee;
      vertical-align: bottom;
	   margin-right:2px;
       }
	   
td.titled {
      height: 174px;
      width: 140px;
      border: 1px solid #eeeeee;
      vertical-align: bottom;
	   margin-right:2px;
       }
       </style>
       <script language="JavaScript" type="text/javascript"><!--
 
 var image = new Array();
       image[0] = 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
       image[1] = 'https://www.kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
       image[2] = 'https://www.kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
       image[3] = 'https://www.kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
       image[4] = 'https://www.kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
	   image[5] = 'https://www.kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
	   image[6] = 'https://www.kqimageserver.com/pwimages/new/testimages/random.jpg' ;
	   image[7] = 'https://www.kqimageserver.com/pwimages/new/testimages/random7.jpg' ;
       image[8] = 'https://www.kqimageserver.com/pwimages/new/testimages/random8.jpg' ;
	   image[9] = 'https://www.kqimageserver.com/pwimages/new/testimages/random9.jpg' ;
	   image[10] = 'https://www.kqimageserver.com/pwimages/new/testimages/random10.jpg' ;
		 
		var index = Math.floor(Math.random() * image.length);
       var indexb;
      var indexc;
       var indexd;
       if (index>=0 && index<5)
      indexb = index + 2;
       else
      indexb = index - 2;
        if (index!=4)
      indexc = index + 1;
        if (index!=0)
      indexd = index - 1;
  
      document.write('<style type="text/css"> td.titlea { background-image: url('+ image[index] +') } </style>');
       document.write('<style type="text/css"> td.titleb { background-image: url('+ image[indexb] +') } </style>');
      document.write('<style type="text/css"> td.titlec { background-image: url('+ image[indexc] +') } </style>');
      document.write('<style type="text/css"> td.titled { background-image: url('+ image[indexd] +') } </style>');

      //-->
       </script>

  <table border="0" width="665" cellpadding="0" cellspacing="0" align="left">
    <tr align="left">
      <td class="flash" valign="top">
	    
		 <div align="left">  
          <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="630" height="220"> etc </embed>
          </object>
          <br />		  
          <table class="signup"><tr>
            <td width="159" height="26" align="center"><span>REQUEST A CATALOG </span> </td>
		    <td class="divider" width="471" align="left"><span>EMAIL UPDATES </span>
<asp:TextBox id="txtEmail" runat="server" Width="112px" CssClass="email_text"></asp:TextBox>&nbsp;
    <asp:Button id="btnSubmitEmail" runat="server" Text="sign up" CssClass="email_button" CausesValidation="true"></asp:Button><span>Join now!</span> <a href="http://newpw.delphi-ts.net/signup.aspx"><span>Why?</span></a></span> 
 </td>
		  </tr></table>   <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="txtEmail"
        ErrorMessage="You must enter a valid email address." ValidationExpression="\b[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}\b" CssClass="required" ForeColor=""></asp:RegularExpressionValidator>
      </div>
	  </td>   
    </tr>
    <tr valign="top" align="center">
     <td align="center"><p>
      <table width='630' cellpadding='0' cellspacing='0' bgcolor="#ffffff" align="left" style="margin-left:6px;">
       <tr>
       <td class='titlea' style="width:157px"><h1> </h1></td>
       <td class='titleb' style="width:157px"><h1> </h1></td>
       <td class='titlec' style="width:157px"><h1> </h1></td>
       <td class='titled' style="width:157px"><h1> </h1></td></tr>
       </tr>
      </table>     
        
          <p></p>
          <p></p>           
          <p></p>
      
      </td>
    </tr>
  </table>
</asp:Content>

THANK YOU! If anyone can get this working better, I'll buy you a beer! And by better, I mean that nasty "no image at all" thing never happens! Have a good weekend!

<html>
	<head>
		<title>
			Genrator of random images
		</title>
		<style type='text/css'>
			td{
				height: 174px;
				width: 157px;
				padding: 0px;
				border: 1px solid #eeeeee;
				vertical-align: bottom;
				margin-right:2px;
			}
		</style>
	</head>
	<body>
		<script language="JavaScript" type="text/javascript">
		
			function getRandom (min, max){
				return min + Math.floor(Math.random() * (max - min + 1));
			}
			
			d = document;
			var images = new Array()
			images[0] = 'https://www.kqimageserver.com/pwimages/new/testimages/random.jpg' ;
			images[1] = 'https://www.kqimageserver.com/pwimages/new/testimages/random1.jpg' ;
			images[2] = 'https://www.kqimageserver.com/pwimages/new/testimages/random2.jpg' ;
			images[3] = 'https://www.kqimageserver.com/pwimages/new/testimages/random3.jpg' ;
			images[4] = 'https://www.kqimageserver.com/pwimages/new/testimages/random4.jpg' ;
			images[5] = 'https://www.kqimageserver.com/pwimages/new/testimages/random5.jpg' ;
			images[6] = 'https://www.kqimageserver.com/pwimages/new/testimages/random6.jpg' ;
			images[7] = 'https://www.kqimageserver.com/pwimages/new/testimages/random7.jpg' ;
			images[8] = 'https://www.kqimageserver.com/pwimages/new/testimages/random8.jpg' ;
			images[9] = 'https://www.kqimageserver.com/pwimages/new/testimages/random9.jpg' ;
			images[10] = 'https://www.kqimageserver.com/pwimages/new/testimages/random10.jpg' ;
			
			var selected = new Array ();
			var count = 4;
			cnt = 0;
			
			for(var i = 0;i < count;i++){
				while(true){
					selected[i] = getRandom(0, images.length-1);
					isUnique = true;
					for(var j = i-1; j >= 0 ;j--){
						cnt++;
						if(selected[i] == selected[j]){
							isUnique = false;
							break;
						}
					}
					if(isUnique) break;
				}
			}
			alert(cnt);
			
			for(i = 0;i < count;i++){
				d.write('<style type="text/css"> td.title'+(i+1)+' { background-image: url('+ images[selected[i]] +') } </style>');
			}
			
       </script>
		
		<table>
			<tr>
				<td class='title1'></td>
				<td class='title2'></td>
				<td class='title3'></td>
				<td class='title4'></td>
			<tr/>	
		
		</table>
	</body>
</html>

Wait, I andswered too soon, I will try something else

Couple things go wrong with this -- putting into my page messes up every td cell in it and it is a wreck. Plus, every time I open the page or refresh, a dropdown comes down from the top saying "Page at http://newpw.delphi-ts.net/test/testy2.aspx says" 7 with a big yellow triangle with an exclamation point in it. Every time, it is another one of the numbers, like 4 or 6 or whatever in the pop up.

I can't really refresh it enough times to see if it solved the random empty image cell -- because the page is messed up -- what else can I do -- I tried changing the css from
td { to

td.title {

but that didn't work. Help!


EDIT: George -- it does seem that the random images are filling all of the cells pretty consistently, I did refresh a ton of times and didn't get the blank/empty one at all! If we can just come up with that algorithm with the original td css and cells, I think we might have it!

Please take a look of that page above, and make sure I put everything in there you sent -- THANK YOU

One more observation -- as you can prob tell, I've (unfortunately) been spending a lot of time refreshing - lol

the problem arises when Image1(red) is in the first (index) cell -- it causes the far right FOURTH cell (indexd) to come in blank.

Also, when that first cell (index) comes up with Image10 (dk green), the THIRD cell (indexc) comes in empty. I've tried several combinations of + this number and minus that number but still do not know even WHY no images come in at all.. isn't there a way to dictate that SOME image number comes in when one of those two are in the first cell?? Or that SOME image should populate the cell it wants to make empty if Image1 or Image10 are in the first cell??

Come on guys, I need some math smarts people to come in here, I suspect it is a very simple solution for you smart people! LOL Please, I need to get this.

HERE is the latest page configuration: http://newpw.delphi-ts.net/test/testy.aspx

Ugh, this sucks, this will never work, now i have to try and start all over or something. I cannot find the configuration to install another image if it is for example, image10 and it is supposed to be +1 but there IS NO Image11. Surely there is some code that will just WORK!???

If you don't want to have the yellow traingle popup remove the alert function from the code. I've refreshed the page many times and not having problem when the red is first.
If you want more images specify var count with the wanted number. If you want more images add more tds.
IMPORTANT: Use my last code on page 1 of this thread because I saw you are not using the proper code.
As I see http://newpw.delphi-ts.net/test/testy2.aspx is working without problems even when the red is on first position.

Hi George, yes, I removed the alert but that code did not result in the images showing up once I put it in my asp.net page, which is what I will need.

I will try it again, but I went back to the original coding you gave me that at least had the images coming in. If only I could get it to populate a cell with any image if for example, Image10 is in the index spot and for cell d it is a +1 - but there IS no Image11 -- so it doesn't put anything in there. If there was some way to say

else -- PUT SOME IMAGE IN THERE

that would be awesome. I defer to you as I don't really know if there is a way to do that.

As I see http://newpw.delphi-ts.net/test/testy2.aspx is working without problems even when the red is on first position.

Yes, this works great, but the td { code messes with every td in my page. The page I will be putting this into has more tds than this little test page. You can see that things look very weird, that is (I am assuming) due to the td code doing all of the margins etc throughout.

I tried changing THIS td code back to how you had it, ie: td.titlea, td.titleb etc but it didn't work. Seems like it should, but it didn't. Too bad, because this seems to work really well if only I could get the td info for each specific cell and not all the tds throughout the page. Really frustrating, pulling the old hair out. I could probably get it if I had full days to play with it, but I don't -- I need to figure this out soon, around all of my usual work. Its been a fun week or so. LOL (not!) but i do appreciate your help.

OKAY - two days ago, I guess no one is going to help me anymore. I gotta say I am shocked because I think there are people out there who know this stuff, but no matter where I go to ask about this, no one can answer it. AMazing.

OK, I understood that, but can I change the text under the Image, or is that part of the image, Because I wanted to do that, But with different images and keep the subtitles on the image,
Any help?

All the images are at THIS link

On my images, the text is part of the image, because I thought getting the random images and a matching caption would be even more complicated.. so if you know how to do either one of these with completely random images 100% of the time, and a link from them and a caption -- I will be interested in seeing that.

Anyway.

K,

After a MASSIVE tidy up and a with completely different approach to controlling random images (and captions), we end up with this :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>random test</title>
<meta http-equiv="X-UA-Compatible" content="IE=7">
<meta name="google-site-verification" content="nBLAHBLAH BLAH">
<meta name="google-site-verification" content="n6Lv0vE-0pHJ8t2nbZMJ1kxeE9cM-6AUegAVUUJ1CPA">
<link href="http://newpw.delphi-ts.net/test/newpw.css" rel="stylesheet" type="text/css" />
<link href="http://newpw.delphi-ts.net/test/dropnav.css" rel="stylesheet" type="text/css" />
<link href="http://newpw.delphi-ts.net/test/topnav.css" rel="stylesheet" type="text/css" />
<style type='text/css'>
body {
	background: rgb(255, 255, 255) url(https://www.kqimageserver.com/pwimages/new/site_images/bg_noise.gif); repeat scroll top left;
	margin: 0pt;
}
#masthead {
	background-color: #ffffff;
	align: left;
	margin-left: 6px;
}
#masthead td.title {
	height: 150px;
	width: 160px;
	padding: 0 0 10px 0;
	border: 3px solid #666666;
	border-top: none;
	border-left: none;
	vertical-align: bottom;
}
#masthead td.first {
	border-left: 3px solid #666666;
}
#masthead td.title h1{
	margin: 0;
	padding-left: 3px;
	background-color: #333;
	font-family: arial;
	font-size: 14pt;
}
</style>
<script language="JavaScript" type="text/javascript">
Array.prototype.inArray = function(x){
	for(var i=0; i<this.length; i++){ if(this[i]===x) { return true; } }
	return false;
}
Number.prototype.noRepeatRandomIntegers = function(n){//Generate array of n random positive integers between 1 to Number (inclusive).
	var a = [];
	var max = Math.floor(this);
	n = Math.min(this, n);
	while(a.length < n){
		var x = Math.max( 1, Math.ceil( Math.random() * max ));
		if(!a.inArray(x)){ a.push(x); }
	}
	return a;
};

onload = function(){
	var table = document.getElementById('masthead');
	if(table && table.rows[0]){
		var imgPath = "http://i48.photobucket.com/albums/f227/wasaaaaa/";
		var masthead = [
			{ color:'#848A94', src:'1.jpg', pos:'-500px 0',     caption:'Caption 1' },
			{ color:'#F74552', src:'2.jpg', pos:'-500px -50px', caption:'Caption 2' },
			{ color:'#ADE3EF', src:'3.jpg', pos:'-450px 0',     caption:'Caption 3' },
			{ color:'#DEBEA5', src:'4.jpg', pos:'-150px 0',     caption:'Caption 4' },
			{ color:'#B51873', src:'5.jpg', pos:'-520px -20px', caption:'Caption 5' }
/*
			{ color:'#FFF',    src:'6.jpg',  pos:'0 0',          caption:'Caption 6' },
			{ color:'#FFF',    src:'7.jpg',  pos:'0 0',          caption:'Caption 7' },
			{ color:'#FFF',    src:'8.jpg',  pos:'0 0',          caption:'Caption 8' },
			{ color:'#FFF',    src:'9.jpg',  pos:'0 0',          caption:'Caption 9' },
			{ color:'#FFF',    src:'10.jpg', pos:'0 0',          caption:'Caption 10' },
			{ color:'#FFF',    src:'11.jpg', pos:'0 0',          caption:'Caption 11' },
			{ color:'#FFF',    src:'12.jpg', pos:'0 0',          caption:'Caption 12' }
			//etc.
*/
		];
		var randomIntegers = masthead.length.noRepeatRandomIntegers(4);
		for(var i=0; i<randomIntegers.length; i++){
			var cell = table.rows[0].cells[i];
			if(cell){
				var index = randomIntegers[i]-1;
				cell.style.backgroundImage    = "url(" + imgPath + masthead[index].src + ")";
				cell.style.backgroundPosition = masthead[index].pos;
				cell.firstChild.style.color   = masthead[index].color;
				cell.firstChild.innerHTML     = masthead[index].caption;
			}
		}
	}
};
</script>
</head>

<!--body style="background: rgb(255, 255, 255) url(https://www.kqimageserver.com/pwimages/new/site_images/bg_noise.gif); repeat scroll top left; margin: 0pt; " onload="onPageLoad();"-->
<body>

<form name="aspnetForm" method="post" action="testy.aspx" id="aspnetForm">

<table cellSpacing="0" cellPadding="0"  border="0" align="center">
<tr>
<td style="background-image:url(https://www.kqimageserver.com/pwimages/site_images/shadowL.jpg); width:14px;"></td>
<td>
	<table cellSpacing="0" cellPadding="0" width="880" border="0" align="center">
	<tr>
	<td colspan="2" height="84" width="900"><a id="_ctl0_HyperLink1" href="default.aspx" style="width:880px;"><img src="https://www.kqimageserver.com/pwimages/new/site_images/headerNO.jpg" border="0" /></a></td>
	</tr><tr>
	<td colspan="9" style="background-color:#b4b58d; width:890px; height:30px;"></td>
	</tr><tr>
	<td colspan="2" width="880" height="25" style="background-color:#dcdb94";><div id="sub_menu"></div></td>
	</tr>
	</table>

	<!-- THIS IS THE MAIN section TABLE -->
	<table width="880" border="0" align="center" cellPadding="0" cellSpacing="0" valign="top">
	<tr>
	<td width="665" align="left"valign="top" background="https://www.kqimageserver.com/pwimages/new/site_images/bg_td.gif">
	<!-- THIS WILL BE OVER CERTONAS -->
	<br /><br />
	<div style="width:650px; margin-left:9px";>
	<p class="page_title">random image test</p>
		<table id="masthead" cellpadding="0" cellspacing="0">
		<tr>
		<td class="title first" colspan="2"><h1></h1></td>
		<td class="title" colspan="2"><h1></h1></td>
		<td class="title" colspan="2"><h1></h1></td>
		<td class="title" colspan="2"><h1></h1></td>
		</tr>
		</table>
	</div>
	</td>
	<td width="215" align="left" valign="top" background="https://www.kqimageserver.com/pwimages/new/site_images/col_noise.gif"></td>
	</tr><tr>
	<td width="665" align="left" valign="top" bgcolor="#FEF8D7"></td>
	<td width="215" align="left" valign="top" background="https://www.kqimageserver.com/pwimages/new/site_images/col_noise.gif" >&nbsp;</td>
	</tr><tr>
	<td colspan="2" height="8px" background="https://www.kqimageserver.com/pwimages/new/site_images/dot_line.gif">
	</td>
	</tr>
	</table>
<td style="background-image:url(https://www.kqimageserver.com/pwimages/site_images/shadowR.jpg); width:15px;">
</td>
</tr>
</table>
</form>

</body>
</html>

NOTES:

  1. CSS stylesheets belong in the document head.
  2. Javascript generally belongs in the document head.
  3. For readability, indenting of javascript and html must be consistent and tidy.
  4. Avoid unnecessary whitespace.
  5. By having <table id="masthead" .... > we can control styles within this table without affecting other parts of the page.
  6. The masthead javascript array controls image src, image position, caption and caption color. If you don't need to control image position then set to pos:'0 0' . I included this feature so that your sample images can be used without cropping. Caption colors are chosen to match a key color in the corresponding image.
  7. No need for repeated styles titlea, titleb, titlec, titled.
  8. Avoid document.write like the plague. It is ugly and can have unexpected consequences it you don't know what you're doing.
  9. For clarity, I removed a lot of html not relevant to the demo.

Hopefully this is something like what you want.

Airshow

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.