How to show dynamic popup on mouseover of thumbnail

[Gards035]

I’m writing because I need help with a problem that has been frustrating me for about a week now and I am desperate for a solution. I recently built my first website using PHP and MySQL and am trying to add feature/function that will pop up a photo thumbnail when the mouse is placed over a certain field in a table. I still want the field to link to the place it goes, just when you hover over it a thumbnail showing the image of the product appears e.g. a catalogue list that links to more information about a product but you can see the product from the catalogue list by hovering over a section (I hope this makes sense).

The code I have written so far to populate the table looks like:

$query=" SELECT * FROM table";
$result=mysqli_query($cxn,$query)or die("Couldn't execute query.");

  while($row = mysqli_fetch_assoc($result))            
  {
    $f_price = number_format($row['price'],2);

 echo "<table class='Products' cellspacing='0'
               width='100%'>";
   echo "<tr><th class='head'>Product ID</th><th class='head'>P_type</th><th class='head'>Price</th>
   </tr>\n";  
    echo "<tr class= 'trow'>\n";
    echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>{$row['product_ID']}</a></td>\n";
    echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>{$row['P_type']}</a></td>\n";
    echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>$f_price</a></td>\n";

}
echo "</table>\n";

What I am after is a photo thumbnail to popup showing the product when you hover over the Product_ID field. The photos are kept in a folder on the server with the photo’s name stored in the SQL db. If someone could help me with a way to do this and some code it really would be a big help. I’ve done a lot of reading on the internet over the past week and I seems that a lot of people are looking for the same sort of thing but no one can provide an accurate solution. Please help!!

[Gards035]

Update: Dynamic Popup thumbnail on mouseover

I have been trying to fix this problem myself but I just can’t seem to get it right. I can make an image popup but it seems to be the same image for every product, I want them to change as you hover over the different product ID’s. This is what I have:

 <script type="text/javascript" >
	function ShowPopup(hoveritem)
	{
		hp = document.getElementById("hoverpopup");
		
		// Set popup to visible
		hp.style.top = hoveritem.offsetTop + 18;
		hp.style.left = hoveritem.offsetLeft + 20;

		hp.style.visibility = "Visible";
	}

	function HidePopup()
	{
		hp = document.getElementById("hoverpopup");
		hp.style.visibility = "Hidden";	
	}
</script>
$query=" SELECT * FROM table";   $result=mysqli_query($cxn,$query)or die("Couldn't execute query.");

while($row = mysqli_fetch_assoc($result)) 
{
$f_price = number_format($row['price'],2);
$product= {$row['product_ID']}

echo "<table class='Products' cellspacing='0'
width='100%'>";
echo "<tr><th class='head'>Product ID</th><th class='head'>P_type</th><th class='head'>Price</th>
</tr>\n"; 
echo "<tr class= 'trow'>\n";
echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']} id='hoverover' style='cursor:important;' onMouseOver='ShowPopup(this);' onMouseOut='HidePopup();'>{$row['unit_ID']}</a></td>\n";
echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>{$row['P_type']}</a></td>\n";
echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>$f_price</a></td>\n";

}
echo "</table>\n";
</div>
      
  <div id="hoverpopup" style="visibility:hidden; position:absolute; top:120px; left:1px; width: 169px; height: 140px;">

<?php
 $query=" SELECT * FROM bikes WHERE product_ID=$product ";
$result=mysqli_query($cxn,$query)or die("Couldn't execute query.");
$row = mysqli_fetch_assoc($result);
echo "<table>\n";
     echo "<tr><td><a href='../photos/{$row['pix']}' border='1'>
	<img src='../photos/{$row['pix']}' border='1' width='200' height='200' />$unit</tr>\n";
    

echo "</table>\n";
?>
</div>

Can someone please help me? Thanks in advance.