Question

im having trouble getting a popup using javascript to show table data onmouseover when mousing over images returned in a table from the DB, now the problem i have isnt with actualy getting the onmouseover working (a previous question solved that) but getting the data displayed onmouseover the change for each image moused over.

the query’s im using works fine and and display the correct data but on the onmouseover only ever shows the data which should only show for the first row in the table, the 2nd and subsequent rows should show different data as the query calls (which works, just doesnt show onmouseover)

keep in mind this page is included in my index.php which has all my .js and .css calls

page code:

  <table border='0' cellpadding='0' cellspacing='0' class="center2">
  <tr>
  <td width='60'><img src="images/box_tl.png"></td>
  <td style="background: url(images/box_tm.png)" align="center"><img src="images/news.png"></td>
  <td width='25'><img src="images/box_tr.png"></td>
  </tr>
  <tr>
  <td style="background: url(images/box_ml.png)"><h2>.</h2></td>
  <td style="background: url(images/box_mm.png)">


 <?php
include 'connect.php';

$query = mysql_query("SELECT * FROM tbl_img") or die(mysql_error());;

echo "<table border='0' cellpadding='1' cellspacing='1' width'90%' id='1' class='tablesorter'><thead>";
echo "<tr> <th> </th> <th>Mob Name</th> <th>Id</th> <th>Health</th> <th>Body</th> <th>Effects</th> <th>Spawn</th></tr></thead><tbody>";
// keeps getting the next row until there are no more to get

while($row = mysql_fetch_array( $query )) {

 $mob_id = $row['mob_id'];
 $mob = $row['mob'];
 $body = $row['body'];
$mob_name = $row['mob_name'];
 $health = $row['health'];
 $level = $row['level'];

// Print out the contents of each row into a table
echo "<tr><td>";
echo "<img src='/testarea/include/mobs/$mob' />";
echo "</td><td>";
echo $mob_name;
echo "</td><td>";
echo $level;
echo "</td><td>";
echo $health;
echo "</td><td>";





echo "
<a onmouseover='ShowPop()' href=''><img src='/testarea/include/mobs/dead/$body' /></a>
";

echo "

<div id='hidden-table' style='display:none;'>
<table border='0' cellpadding='0' cellspacing='0' class='center3'>
  <tr>
  <td width='14'><img src='images/info_tl.png'></td>
  <td style='background: url(images/info_tm.png)' align='center'></td>
  <td width='14'><img src='images/info_tr.png'></td>
  </tr>
  <tr>
  <td style='background: url(images/info_ml.png)'><h2>.</h2></td>
  <td style='background: url(images/info_mm.png)'>
";




$query2 = mysql_query("SELECT * FROM tbl_drop WHERE mob_name='$mob_name'") or die(mysql_error());

echo "<table border='0' cellpadding='1' cellspacing='1' width='250' id='2' class='tablesorter'><thead>";
 echo "<tr> <th> </th> <th>Item Name</th> <th>Qty</th></thead><tbody>";
// keeps getting the next row until there are no more to get

while($row = mysql_fetch_array( $query2 )) {

$id = $row['id'];
$item_img = $row['item_img'];
$qty = $row['qty'];
$item_name = $row['item_name'];


// Print out the contents of each row into a table
echo "<tr><td width='50'>";
echo "<img src='/testarea/item/$item_img' />";
echo "</td><td width='150'>";
echo $item_name;
echo "</td><td width='50'>";
echo $qty;
echo "</td></tr>";
}

echo "</tbody></table>";


echo "
  </td>
  <td style='background: url(images/info_mr.png)'><h2>.</h2></td>
  </tr>
  <tr>
  <td width='14'><img src='images/info_bl.png'></td>
  <td style='background: url(images/info_bm.png)' align='center'><h2>.</h2></td>
  <td width='14'><img src='images/info_br.png'></td>
  </tr>
  </table>
</div>"




;
echo "</td><td>";
echo "test";
echo "</td><td>";
echo "test";
echo "</td></tr>";
}

echo "</tbody></table>";

?>




  </td>
  <td style="background: url(images/box_mr.png)"><h2>.</h2></td>
  </tr>
  <tr>
  <td width='60'><img src="images/box_bl.png"></td>
  <td style="background: url(images/box_bm.png)" align="center"><h2>.</h2></td>
  <td width='25'><img src="images/box_br.png"></td>
  </tr>
  </table>

</html>

popup.js code:

// create the popup box - remember to give it some width in your styling
document.write('<div id="pup" style="position:abolute; display:none; z-index:200;"></div>');

var minMargin = 15; // set how much minimal space there should be (in pixels)
                // between the popup and everything else (borders, mouse)
var ready = false;  // we are ready when the mouse event is set up
var default_width = 200; // will be set to width from css in document.ready
function ShowPop()
{
popup($('#hidden-table').html(), 400);
}
/* Prepare popup and define the mouseover callback */
jQuery(document).ready(function(){
$('#pup').hide();
css_width = $('#pup').width();
if (css_width != 0) default_width = css_width;
// set dynamic coords when the mouse moves
$(document).mousemove(function(e){ 
    var x,y;

    x = $(document).scrollLeft() + e.clientX;
    y = $(document).scrollTop() + e.clientY;

    x += 10; // important: if the popup is where the mouse is, the hoverOver/hoverOut events flicker

    var x_y = nudge(x,y); // avoids edge overflow

    // remember: the popup is still hidden
    $('#pup').css('top', x_y[1] + 'px');
    $('#pup').css('left', x_y[0] + 'px');
});
ready = true;
});

/*
The actual callback:
Write message, show popup w/ custom width if necessary,
make sure it disappears on mouseout
*/
function popup(msg, width)
{
if (ready) {
    // use default width if not customized here
    if (typeof width === "undefined"){
        width = default_width;
    }
    // write content and display
    $('#pup').html(msg).width(width).show();
    // make sure popup goes away on mouse out
    // the event obj needs to be gotten from the virtual 
    //   caller, since we use onmouseover='popup(msg)' 
    var t = getTarget(arguments.callee.caller.arguments[0]);
    $(t).unbind('mouseout').bind('mouseout', 
        function(e){
            $('#pup').hide().width(default_width);
        }
    );
}
}

/* Avoid edge overflow */
function nudge(x,y)
{
var win = $(window);

// When the mouse is too far on the right, put window to the left
var xtreme = $(document).scrollLeft() + win.width() - $('#pup').width() - minMargin;
if(x > xtreme) {
    x -= $('#pup').width() + 2 * minMargin;
}
x = max(x, 0);

// When the mouse is too far down, move window up
if((y + $('#pup').height()) > (win.height() +  $(document).scrollTop())) {
    y -= $('#pup').height() + minMargin;
}

return [ x, y ];
}

/* custom max */
function max(a,b){
if (a>b) return a;
else return b;
}

/*
Get the target (element) of an event.
Inspired by quirksmode
*/
function getTarget(e) {
var targ;
if (!e) var e = window.event;
if (e.target) targ = e.target;
else if (e.srcElement) targ = e.srcElement;
if (targ.nodeType == 3) // defeat Safari bug
    targ = targ.parentNode;
return targ;
}

Answer 1

All of the hidden tables have the same id, but IDs have to be unique.

provide the link as argument to ShowPop()

<a onmouseover='ShowPop(this)' ....>

then you’ll be able to access the intended target inside ShowPop():

function ShowPop(o)
{
popup($(o).next('div').html(), 400);
}

---

Edit:

Regarding to the comment:
Currently I think the popup will not disapear onmouseout in any browser(except IE), because you didn’t provide an argument to ShowPop() , what in other browsers is needed to return anything from getTarget, because they didn’t know window.event.

Change this line:

var t = getTarget(arguments.callee.caller.arguments[0]);

to

var t = arguments.callee.caller.arguments[0];

…because when you take on my suggestion the link is already provided as argument to ShowPup(), there is no need to call getTarget() .