Need to show the larger image when user clicks on the small image

hello,

Can any one please tell me

I am Using php,Mysql,CSS to build my site

In my database i have small images and large images
i am displaying the small images to the right of the main container now i need to show the large image to left side when user clicks on these small images
but when i click on the images it is showing the large image in the new browser

hope u understand my problem
please tell me what wrong am i doing

here is my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
#container
{
float:left;
border:5px solid #666;
position:relative;
width:770px;
height:450px;
margin:20px auto 0 100px;
top:-20px;
}

.styles
{
text-align:center;
margin:190px 390px 0px 20px;
}
#container1
{
float:right;
border:1px solid #9F0;
padding:3px;
height:445px;
width:355px;
margin:-250px 0px 0px 0px;
}
.yourstyle
{
position:absolute;
left:0px;
top:-2px;

}

</style>

</head>

<?php
function connect()
{
$dbhost='aaa';
$dbuser='aa';
$dbpass='aaa';
$conn= mysql_connect($dbhost, $dbuser, $dbpass) or die ('Error connecting to mysql'.mysql_error());
$dbname='hakman';
mysql_select_db($dbname);
return $conn;
}
?>

Image should be shown here when user clicks

</font></p>

<?php
$c=connect();
$query2="select style from styles";
$sql=mysql_query($query2);
$result2=mysql_num_rows($sql); //25

$query="select path from styles "; //0 to 6
$result=mysql_query($query);

$query1="select big_img from styles "; //0 to 6
$result1=mysql_query($query1);

$query3="select style,path from styles ";
$result3=mysql_query($query3);

?>
<div id="container1">
<?php
echo '<table border="1" align="right" width="50px" height="375px" BORDERCOLOR="#9F0">';
for($r=1;$r<=4;$r++)
{
echo '<tr>';
for($d=1;$d<=2;$d++)
{
$obj=mysql_fetch_object($result);
$obj1=mysql_fetch_object($result1);
$obj2=mysql_fetch_object($sql);
$obj3=mysql_fetch_object($result3);
$imageSrc=$obj->path;
$cimage="/images/".$obj->path;
$big="/images/".$obj1->big_img;
$styl=$obj3->style;
$sty2=$obj3->style;

echo '<td><a title="'.$styl.'" href="'.$big.'" id="'.trim($sty2).'"><img width="170px" height="100px" src=" ' . $cimage . ' " /></a></td>';

?>
</div>
<div class="yourstyle" id="<?php echo trim($sty2).'-big'?>"></div>

<?php

}
echo '</tr>';
}
echo'</table>';?>

</div>

?>

</body>
</html>

Need to show the larger image when user clicks on the small image

ravii

vincevincevince

Mahabub

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week