Make a Javascript updated webpage

Hi Orjan,

Sorry to trouble you again. Have one more question.

I've displayed the required images along with their design codes. And have created a DIV layer which displayes the full image detail on click of Design ID. (See the attached screenshot.)

Currently, I've specified the specific design ID (in query of DIV layer) to display the details. This way I'll have to create separate DIV layers for each image. Instead I want it to work like this:

When I click on any image or its design ID, its detail along with big image should be displayed correspondingly, by taking displayed design_ID (at the left) as a reference point.

What is the correct way of doing this.

Here's my display_image.php code:

<html>

<style type="text/css">

<!--

#design {

	position:absolute;

	left:182px;

	top:32px;

	width:766px;

	height:568px;

	z-index:1;

	visibility: visible;

}

-->

</style>

<script type="text/JavaScript">

<!--


//-->

</script>

<body>

<?php

    // just so we know it is broken

    error_reporting(E_ALL);

    //connect to the db

    $link = mysql_connect("localhost", "root", "") or die("Could not connect: " . mysql_error());

     // select our database

    mysql_select_db("templetree") or die(mysql_error());

     // get the rows from the db

	 

	 

    $sql = "SELECT ID, design_ID FROM sample_design WHERE product_code='BA' ";

	 // the result of the query

    $sql_result = mysql_query("$sql") or die("Invalid query: " . mysql_error());

?>

 

 <table border="0">

 <?php

    while($row = mysql_fetch_array( $sql_result )) {

?>

<tr><td>

 <?php  // Print out the contents of each row into a tag

 echo '<img src="testgetpicture1.php?ID='.$row['ID'].'" width="150" height="150"/><br/>';

 ?>  </tr></td>

<tr><td height="50" align="center" valign="top" ><span onclick="if(document.getElementById('design').style.display=='none') {document.getElementById('design').style.display='block';} else {document.getElementById('design').style.display='none';}" ><?php echo $row['design_ID'];?> </span></td>

</tr>

  

<?php  } ?> </table>


<?php  // close the db link

mysql_close($link); 

?> 


<div id="design" style="display: none;">

<?php

include "Connections/database_connect.php"; 



$query = "SELECT * FROM products, sample_design, design_detail, specification, property WHERE products.product_code=sample_design.product_code AND sample_design.design_ID=design_detail.design_ID AND design_detail.spec_ID=specification.spec_ID AND design_detail.property_ID=property.property_ID AND design_detail.design_ID='TTBA1'";

$result=mysql_query($query);

$row_result = mysql_fetch_assoc($result);


$query2="SELECT * FROM property, design_detail WHERE property.property_ID=design_detail.property_ID AND design_detail.design_ID='TTBA1'";

$result2=mysql_query($query2);

$num=mysql_numrows($result2);



mysql_close();

?>

<table width="1029" border="1" bordercolor="#FF6633" cellpadding="5" cellspacing="0">

<tr>

  <td rowspan="13"><img src="testgetpicture.php?image_id=2" width="384" height="384" align="top" /></td>

</tr>

<tr>

<th><div align="left"><font face="Arial, Helvetica, sans-serif">Product Name</font></div></th>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $row_result['product_name']; ?></font></td>

</tr>

<tr>

<th><div align="left"><font face="Arial, Helvetica, sans-serif">Product Code</font></div></th>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $row_result['product_code']; ?></font></td>

</tr>

<tr>

<th><div align="left"><font face="Arial, Helvetica, sans-serif">Design ID</font></div></th>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $row_result['design_ID']; ?></font></td>

</tr>

<tr>

<th><div align="left"><font face="Arial, Helvetica, sans-serif">Design Description</font></div></th>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $row_result['design_description']; ?></font></td>

</tr>

<tr>

<th><div align="left"><font face="Arial, Helvetica, sans-serif">Price</font></div></th>

<td><font face="Arial, Helvetica, sans-serif">Rs. <?php echo $row_result['price']; ?></font></td>

</tr>


<?php

$i=0;

$f1=mysql_result($result2,$i,"property_name");

?>

<tr>

  <th><div align="left"><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></div></th>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $row_result['spec_name'];?></font></td>

</tr>

<?php

$i=1;


while ($i < $num) {


$f1=mysql_result($result2,$i,"property_name");

$f2=mysql_result($result2,$i,"property_description");

?>


<tr>

  <th><div align="left"><font face="Arial, Helvetica, sans-serif"><?php echo $f1; ?></font></div></th>

<?php

$r=mysql_fetch_assoc($result);


//echo $r['spec_name'];

?>

<td><font face="Arial, Helvetica, sans-serif"><?php echo $r['spec_name'];?></font></td>

</tr>


<?php

$i++;

}

?>

</table>

</div>

</body>

</html>

Thanks,
Astha