random images in a table plus links

[keltoid]

I've been to many different site forums and have yet to have my questions answered completely.. maybe your site and members is the one who can do it - I sure HOPE SO! : )

http://newpw.delphi-ts.net/test/testydude3.aspx
^^ Here is a page - everything is working as I want, EXCEPT, I want to make each one of these random images clickable to a specific url...

Can anyone at this forum do this? It would be great if you knew. Also - if you know how to add a matching quote for each image right underneath it, that would be awesome, but having the clickable image is more important right now - thank you all in advance! Am hoping you guys and gals are smarter than the other forums out there! :D

Here is the code:

<style type='text/css'>
td.titlea {
height: 174px;
width: 160px;
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: 160px;
border:1px solid #eeeeee;
vertical-align: bottom;
margin-right:2px;
}

td.titled {
height: 174px;
width: 160px;
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 - 1)) + 1;

indexb = Math.floor(Math.random() * image.length);

while (indexb == index)
{
indexb = Math.floor(Math.random() * image.length);
}
indexc = Math.floor(Math.random() * image.length);

while (indexc == index || indexc == indexb)
{
indexc = Math.floor(Math.random() * image.length);
}

indexd = Math.floor(Math.random() * image.length);

while (indexd == index || indexd == indexb || indexd == indexc)
{
indexd = Math.floor(Math.random() * image.length);
}


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>

<br /><br />

<div style="width:650px; margin-left:9px";><p class="page_title">random image test</p>
<table width='630' cellpadding='0' cellspacing='0' bgcolor="#ffffff" align="left" style="margin-left:6px;">
<tr>
<td class='titlea' style="width:157px"></td>
<td class='titleb' style="width:157px"></td>
<td class='titlec' style="width:157px"></td>
<td class='titled' style="width:157px"></td></tr>

</table>
</div>

If its a new array for links (or captions/quotations), please show me exactly how it looks and where it goes in reference to this code if you'd be so kind. Thanks, hope someone can help me with this!

[Nile]

Hm, this wouldn't be the way that I would go about doing this. Does your server support PHP? If so, then I'd be glad to remake all this code for you.

[keltoid]

That would be great, thanks -- I'm sure it supports php or if not, can.
The other thing is it has to work in an asp.net page like this:

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

As you can see, what I have up there isn't working, though it worked perfect before putting it into the asp.net framework. :(

http://newpw.delphi-ts.net/test99.aspx
^^ as you can see here. ALL I really just want the 4 random images to pull from a folder of about a dozen, and be able to click them to the products...(and kind of don't care how I get there at this point, as long as I can get it as fast as possible .. :) )
any help you can offer is greatly appreciated. I've put a lot of time into many different suggestions and still have nothing to show for it. Thanks!

[riptide]

I would have thought to wrap the images in a clickable link then give them a id and make an array out of the links. But I'm not sure if it's the best way to go about it.

[Nile]

Give this a try:


<style type="text/css">
.img { float: left; width: 157px; height: 168px; }
.img img { border: 0px; }
.img a { border: 0px; color: #000; text-decoration: none; }
</style>
<?php
$images = array(
"images/random1.jpg" => array("image1 details", "#1"),
"images/random2.jpg" => array("image2 details", "#2"),
"images/random3.jpg" => array("image3 details", "#3"),
"images/random4.jpg" => array("image4 details", "#4"),
"images/random5.jpg" => array("image5 details", "#5"),
"images/random6.jpg" => array("image6 details", "#6"),
"images/random7.jpg" => array("image7 details", "#7"),
"images/random8.jpg" => array("image8 details", "#8"),
"images/random9.jpg" => array("image9 details", "#9"),
"images/random10.jpg" => array("image10 details", "#10"));
$random = array_rand($images, 4);
foreach ($random as $key => $value){
echo '<div class="img"><a href="'.$images[$value][1].'"><img src="'.$value.'" />'.$images[$value][0].'</a></div>';
}
?>