Ajax Example
Screen shot
PHP Page

<?php
$con=mysql_connect('localhost','root','') or die('Mysql not connected');
mysql_select_db('product',$con) or die('DataBase not connected');
?>
<html>
<head>
<script type="text/javascript" src="ajax.js">
</script>
</head>
<body>
<table width="100%" height="226" border="1" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="26%" height="21">Product Category</td>
<td width="74%">&nbsp;</td>
</tr>
<tr>
<td height="182" valign="top">
<?php
$query="select * from tbl_category";
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<a href="javascript:product(<?php echo $row['id']; ?>)"><?php echo $row['cat_name']; ?></a><br>
<?php
}
?>
</td>
<td valign="top"><div id="showproducts">
Your Product show here
</div>
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
<br />
</body>
</html>

Javascript Page (save as ajax.js)

<html>
<body>
<script type="text/javascript" language="javascript">
var XMLHttpRequestObject=false;

function product(cat_id)
{

if(window.XMLHttpRequest)
{
XMLHttpRequestObject=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
}


XMLHttpRequestObject.onreadystatechange=function()
{
if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
{
document.getElementById("showproducts").innerHTML=XMLHttpRequestObject.responseText;
}
}
XMLHttpRequestObject.open("GET","showproducts.php?id="+cat_id,true);
XMLHttpRequestObject.send();
}
</script>
</body>
</html>

PHP Page(save as showproducts.php)

<?php
$con=mysql_connect('localhost','root','') or die('Mysql not connected');
mysql_select_db('product',$con) or die('DataBase not connected');

$id=$_GET["id"];
$query="select * from tbl_productdetails WHERE cat_id = '".$id."'";
$result = mysql_query($query);
while($row = mysql_fetch_array($result))
{
?>
<img src="<?php echo "flowers/".$row['product_image']; ?>" />
<?php
}
?>

DataBase

--
-- Database: `product`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_category`
--

CREATE TABLE IF NOT EXISTS `tbl_category` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`cat_name` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=5 ;

--
-- Dumping data for table `tbl_category`
--

INSERT INTO `tbl_category` (`id`, `cat_name`) VALUES
(1, 'Red Flower'),
(2, 'Blue Flower'),
(3, 'Green Flower'),
(4, 'Yellow Flower');

-- --------------------------------------------------------

--
-- Table structure for table `tbl_productdetails`
--

CREATE TABLE IF NOT EXISTS `tbl_productdetails` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`cat_id` int(11) NOT NULL,
`product_image` varchar(255) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=8 ;

--
-- Dumping data for table `tbl_productdetails`
--


INSERT INTO `tbl_productdetails` (`id`, `cat_id`, `product_image`) VALUES
(1, 1, 'red1.jpeg'),
(2, 1, 'red2.jpeg'),
(3, 4, 'yellow1.jpeg'),
(4, 2, 'blue1.jpeg'),
(5, 2, 'blue2.jpeg'),
(6, 3, 'green1.jpeg'),
(7, 4, 'yellow2.jpeg');

You can download source code here