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]

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.