469,325 Members | 1,467 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,325 developers. It's quick & easy.

How to show dynamic popup on mouseover of thumbnail

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:

Expand|Select|Wrap|Line Numbers
  1. $query=" SELECT * FROM table";
  2. $result=mysqli_query($cxn,$query)or die("Couldn't execute query.");
  4.   while($row = mysqli_fetch_assoc($result))            
  5.   {
  6.     $f_price = number_format($row['price'],2);
  8.  echo "<table class='Products' cellspacing='0'
  9.                width='100%'>";
  10.    echo "<tr><th class='head'>Product ID</th><th class='head'>P_type</th><th class='head'>Price</th>
  11.    </tr>\n";  
  12.     echo "<tr class= 'trow'>\n";
  13.     echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>{$row['product_ID']}</a></td>\n";
  14.     echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>{$row['P_type']}</a></td>\n";
  15.     echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>$f_price</a></td>\n";
  17. }
  18. 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!!
May 25 '10 #1
1 4391
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:

Expand|Select|Wrap|Line Numbers
  1.  <script type="text/javascript" >
  2.     function ShowPopup(hoveritem)
  3.     {
  4.         hp = document.getElementById("hoverpopup");
  6.         // Set popup to visible
  7.         hp.style.top = hoveritem.offsetTop + 18;
  8.         hp.style.left = hoveritem.offsetLeft + 20;
  10.         hp.style.visibility = "Visible";
  11.     }
  13.     function HidePopup()
  14.     {
  15.         hp = document.getElementById("hoverpopup");
  16.         hp.style.visibility = "Hidden";    
  17.     }
  18. </script>
  19. $query=" SELECT * FROM table";   $result=mysqli_query($cxn,$query)or die("Couldn't execute query.");
  21. while($row = mysqli_fetch_assoc($result)) 
  22. {
  23. $f_price = number_format($row['price'],2);
  24. $product= {$row['product_ID']}
  26. echo "<table class='Products' cellspacing='0'
  27. width='100%'>";
  28. echo "<tr><th class='head'>Product ID</th><th class='head'>P_type</th><th class='head'>Price</th>
  29. </tr>\n"; 
  30. echo "<tr class= 'trow'>\n";
  31. 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";
  32. echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>{$row['P_type']}</a></td>\n";
  33. echo " <td class= 'item'><a href='result.php?product_ID={$row['product_ID']}'>$f_price</a></td>\n";
  35. }
  36. echo "</table>\n";
  37. </div>
  39.   <div id="hoverpopup" style="visibility:hidden; position:absolute; top:120px; left:1px; width: 169px; height: 140px;">
  41. <?php
  42.  $query=" SELECT * FROM bikes WHERE product_ID=$product ";
  43. $result=mysqli_query($cxn,$query)or die("Couldn't execute query.");
  44. $row = mysqli_fetch_assoc($result);
  45. echo "<table>\n";
  46.      echo "<tr><td><a href='../photos/{$row['pix']}' border='1'>
  47.     <img src='../photos/{$row['pix']}' border='1' width='200' height='200' />$unit</tr>\n";
  50. echo "</table>\n";
  51. ?>
  52. </div>    
Can someone please help me? Thanks in advance.
May 26 '10 #2

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by Samuel Rhodes | last post: by
3 posts views Thread by SE.Computerguy | last post: by
4 posts views Thread by fran_j_diaz | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
reply views Thread by mdpf | last post: by
reply views Thread by harlem98 | last post: by
reply views Thread by listenups61195 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.