www.webdeveloper.com
Page 1 of 2 12 LastLast
Results 1 to 15 of 25

Thread: [RESOLVED] Javascript - Mouse over image popup on table

  1. #1
    Join Date
    May 2010
    Posts
    13

    resolved [RESOLVED] Javascript - Mouse over image popup on table

    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).

    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. The code I have written so far:

    Code:
     <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 table 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>
    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!!

  2. #2
    Join Date
    Mar 2010
    Posts
    2,803
    One way of doing it is with the 'skeleton' code below:

    You will need to have your own code to get $pic_path and $prod_id from the database for each row in your table.

    But the code should be the jist of what you are after.

    PHP Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <script type="text/javascript">
    <!--

        function showPopup(picPath) {
             document.getElementById("imgPopup").src = picPath;
        }

    //-->
    </script>

    </head>
    <body>
     
    <table summary="">
    <tr>
         <td onmouseover="showPopup('<?php echo $pic_path?>')"><?php echo $prod_id?></td>
    </tr>
    </table>
     
    <div id="popUpContainer">
        <img id="imgPopup" src="" alt="" />
    </div>
     
    </body>
    </html>

  3. #3
    Join Date
    Feb 2010
    Posts
    184
    There are some nesting problems with your code .e.g. missing </td>, </tr> and <div> in some places. It also looks like your missing the php tags <?php and ?> for the part just after the script.

    It would have been more useful if you provided a link.

    Regardless of those problems, the key problem is your not swapping the images each time you call showPopup. The image is fixed to ../photos/{$row['pix']}!

    To fix this either pass in the image src to showPopup or work it out from the link in which your onmouseover is attached to. The former being preferable.

    Here is a full prototype:

    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">
    #popup {
    	display: none;
    	position: absolute;
    }
    </style>
    <script type="text/javascript">
    <!--
    	function getPopup() {
    		return document.getElementById('popup');
    	}
    	
    	function showPopup(anchor, img_src) {
    		var popup = getPopup();
    		// add image
    		popup.innerHTML = "<img src='" + img_src + "' alt='' />";
    		
    		// position popup
    		popup.style.top = (anchor.offsetTop + anchor.offsetHeight + 5) + 'px';
    		popup.style.left = anchor.offsetLeft + 'px';
    		popup.style.display = 'block';
    	}
    	
    	function hidePopup() {
    		var popup = getPopup();
    		popup.style.display = 'none';
    	}
    	-->
    </script>
    </head>
    <body>
    <a href="http://www.google.com" onmouseover="showPopup(this, 'http://www.google.com/logos/pacman10-hp.png')" onmouseout="hidePopup()">Google</a> <br />
    <a href="http://www.webdeveloper.com" onmouseover="showPopup(this, 'http://www.webdeveloper.com/forum/images/webdev-logo2.gif')" onmouseout="hidePopup()">Web Developer</a>
    <div id="popup"> </div>
    </body>
    </html>
    Cool my 100th Post.
    Last edited by letmehaveago; 05-27-2010 at 01:05 AM. Reason: code didn't validate

  4. #4
    Join Date
    May 2010
    Posts
    13

    Javascript - Popup on table

    Hi Letmehaveago,

    Thank you for your post. I am new to php, SQL and Javascript but its definitely been interesting learning. I agree with what you are saying (if I understand correctly) but the image names are stored in MySQL and not at set locations. I want the pic to change as you hover over different product_IDís. i.e. I want the Pic field in MySQL to set the address e.g. '../photos/{$row['pix']}' with {$row['pix']} variable changing with hover. I hope this makes sense. Thanks again for all your help.

  5. #5
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I want the Pic field in MySQL to set the address e.g. '../photos/{$row['pix']}' with {$row['pix']} variable changing with hover
    You can't do that directly, php & MySQL are server side.

    letmehaveago outlined the solution
    Code:
    onmouseover='ShowPopup(this, {$row['pix']});'
    The image name is passed to ShowPopup which changes the image in #hoverpopup.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  6. #6
    Join Date
    May 2010
    Posts
    13

    Unhappy Javascript - Mouse over image popup on table

    Tried the below code as recommended but I can't seem to get it to work. What am I doing wrong:

    <style type="text/css">
    #popup {
    display: none;
    position: absolute;
    }
    </style>
    <script type="text/javascript">
    <!--
    function getPopup() {
    return document.getElementById('popup');
    }

    function showPopup(anchor, img_src) {
    var popup = getPopup();
    // add image
    popup.innerHTML = "<img src='" + img_src + "' alt='' />";

    // position popup
    popup.style.top = (anchor.offsetTop + anchor.offsetHeight + 5) + 'px';
    popup.style.left = anchor.offsetLeft + 'px';
    popup.style.display = 'block';
    }

    function hidePopup() {
    var popup = getPopup();
    popup.style.display = 'none';
    }
    -->
    </script>


    <a href='result.php?product_ID={$row['product_ID']}' onmouseover='ShowPopup(this,{$row['pix']});' onmouseout='hidePopup();'>{$row['product_ID']}</a>

    <div id="popup"> </div>

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Does the image src render the correct path? Look at the generated code.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  8. #8
    Join Date
    May 2010
    Posts
    13
    It seems to be rendering to the correct img address in source code, just no popup.

  9. #9
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    What JavaScript errors do you get?
    At least 98% of internet users' DNA is identical to that of chimpanzees

  10. #10
    Join Date
    May 2010
    Posts
    13
    When the page loads it says down the botton done but with errors. These are the errors I get. When I check the lines of code there is no text there?????

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
    Timestamp: Fri, 28 May 2010 09:20:05 UTC


    Message: Syntax error
    Line: 54
    Char: 16
    Code: 0
    URI: http://localhost/mdx/site/show_stock.php


    Message: Syntax error
    Line: 67
    Char: 16
    Code: 0
    URI: http://localhost/mdx/site/show_stock.php


    Message: Syntax error
    Line: 80
    Char: 16
    Code: 0
    URI: http://localhost/mdx/site/show_stock.php


    Message: Syntax error
    Line: 93
    Char: 16
    Code: 0
    URI: http://localhost/mdx/site/show_stock.php


    Message: Syntax error
    Line: 106
    Char: 16
    Code: 0
    URI: http://localhost/mdx/site/show_stock.php


    Message: Syntax error
    Line: 119
    Char: 16
    Code: 0
    URI: http://localhost/mdx/site/show_stock.php

  11. #11
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Check the errors in a different browser; the information is usually better.
    At least 98% of internet users' DNA is identical to that of chimpanzees

  12. #12
    Join Date
    Mar 2010
    Posts
    2,803
    or if you don't have access to a different browser, post the code from a few lines either side of the line number in the error message.

  13. #13
    Join Date
    Jul 2007
    Posts
    386
    Here is a full example:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test dirve</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">
    #container {
        position:relative;
    }
    
    #popup {
        background-color:#fff;
        border:1px solid #000;
        padding:2px;
        position:absolute;
        z-index:10;
    }
    
    .hide {
        display:none;
    }
    </style>
    <script style="text/javascript">
    
    var popup;
    var loading = new Image(15, 15);
        loading.src = 'http://www.havertys.com/wcsstore/Havertys/images/loading_small.gif';
    
    window.onload = function()
    {
        popup = document.getElementById('popup');
        popup.appendChild(loading);
        var tds = document.getElementById('ptable').getElementsByTagName('td');
        var totalTds = tds.length;
        
        for (var i = 0; i < totalTds; i++)
        {
            if (tds[i].className != 'pid')
                continue;
            
            tds[i].onmouseover = function(){ showPopup(this); }
            tds[i].onmouseout = function(){ hidePopup(); }
        }
    }
    
    function showPopup(obj)
    {
        var pid = obj.innerHTML;
        var x = obj.offsetLeft;
        var y = obj.offsetTop;
        
        popup.style.left = x + 5 + 'px';
        popup.style.top = y + obj.offsetHeight + 5 + 'px';
        popup.className = '';
        
        var img = new Image();
            img.onload = function(){
                popup.innerHTML = '';
                popup.appendChild(this);
            }
            img.src = 'http://www.foroswebgratis.com/imagenes_foros/5/4/7/4/9/691312naruto_shippuden_collection_v2_by_neon_drane.jpg';
    }
    
    function hidePopup()
    {
        popup.innerHTML = '';
        popup.appendChild(loading);
        popup.className = 'hide';
    }
    </script>
    </head>
    <body>
    
    <div id="container">
        <div id="popup" class="hide"></div>
        <table id="ptable" cellpadding="4" cellspacing="1" border="1">
            <tbody>
                <tr>
                    <th>ID</th>
                    <th>Type</th>
                    <th>Price</th>
                </tr>
                <tr>
                    <td class="pid">1</td>
                    <td>Car</td>
                    <td>Honda</td>
                </tr>
                <tr>
                    <td class="pid">2</td>
                    <td>Car</td>
                    <td>Toyota</td>
                </tr>
                <tr>
                    <td class="pid">3</td>
                    <td>Bike</td>
                    <td>Ducatti</td>
                </tr>
            </tbody>
        </table>
    </div>
    
    </body>
    </html>
    Unluckily for me the laptop where I made that code only had Internet Explorer 8 w/ compatibility view. I tested it on FF, Opera, Safari and Chrome (latest versions).

    If you have any trouble post it here.

  14. #14
    Join Date
    May 2010
    Posts
    13
    I still canít work out why this code from ďletmehaveagoĒ dosenít work for me it seems to be exactly what I am after. I ran the original code with the google and web developer logoís and it worked without fault. It was perfect!!! For some reason when I substitute in the PHP variables it all goes wrong. In IE when run it it says done but with errors (see last post for errors) when run on FF it loads fine but no pop up. Can anyone please help me fix this or is it impossible to add PHP variables to a mouseover popup? I would like to thank everyone who has been trying to help so far I really appreciate your efforts. Here are the two codes:

    Works fine!!!

    [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">
    #popup {
    display: none;
    position: absolute;
    }
    </style>
    <script type="text/javascript">
    <!--
    function getPopup() {
    return document.getElementById('popup');
    }

    function showPopup(anchor, img_src) {
    var popup = getPopup();
    // add image
    popup.innerHTML = "<img src='" + img_src + "' alt='' />";

    // position popup
    popup.style.top = (anchor.offsetTop + anchor.offsetHeight + 5) + 'px';
    popup.style.left = anchor.offsetLeft + 'px';
    popup.style.display = 'block';
    }

    function hidePopup() {
    var popup = getPopup();
    popup.style.display = 'none';
    }
    -->
    </script>
    </head>
    <body>
    <a href="http://www.google.com" onmouseover="showPopup(this, 'http://www.google.com/logos/pacman10-hp.png')" onmouseout="hidePopup()">Google</a> <br />
    <a href="http://www.webdeveloper.com" onmouseover="showPopup(this, 'http://www.webdeveloper.com/forum/images/webdev-logo2.gif')" onmouseout="hidePopup()">Web Developer</a>
    <div id="popup"> </div>
    </body>
    </html>
    [\CODE]


    Not Working!!!!

    [CODE]
    <style type="text/css">
    #popup {
    display: none;
    position: absolute;
    }
    </style>
    <script type="text/javascript">
    <!--
    function getPopup() {
    return document.getElementById('popup');
    }

    function showPopup(anchor, img_src) {
    var popup = getPopup();
    // add image
    popup.innerHTML = "<img src='" + img_src + "' alt='' />";

    // position popup
    popup.style.top = (anchor.offsetTop + anchor.offsetHeight + 5) + 'px';
    popup.style.left = anchor.offsetLeft + 'px';
    popup.style.display = 'block';
    }

    function hidePopup() {
    var popup = getPopup();
    popup.style.display = 'none';
    }
    -->
    </script>
    //// php connection and row extraction script

    <a href='result.php?product_ID={$row['product_ID']}' onmouseover='ShowPopup(this,{$row['pix']});' onmouseout='hidePopup();'>{$row['product_ID']}</a>

    <div id="popup"> </div>
    [\CODE]

  15. #15
    Join Date
    Mar 2010
    Posts
    2,803
    to help debug this bit:

    Code:
    //// php connection and row extraction script
    
    <a href='result.php?product_ID={$row['product_ID']}' onmouseover='ShowPopup(this,{$row['pix']});' onmouseout='hidePopup();'>{$row['product_ID']}</a>
    
    <div id="popup"> </div>
    maybe try the following:

    1) open the web page in your browser on your local or 'real' server (since it contains php code)

    2) right click the web page and select 'view source'

    3) scroll down to the above code and check that the php values that were substituted for the above variables are correct and that the syntax of the code inside the <a> is correct.

    4) if the code inside the <a> is incorrect then either fix the syntax in the source code and/or go back to your "// php connection and row extraction script" and fix it so that the correct values are outputed.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles