PDA

View Full Version : random images in a table plus links



keltoid
09-22-2010, 04:36 PM
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
09-23-2010, 03:50 PM
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
09-23-2010, 05:38 PM
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
09-23-2010, 05:58 PM
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
09-23-2010, 06:21 PM
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>';
}
?>