onmouseover區域在鼠標座標處顯示div內容

Question

爲什麼此代碼不適用於firefox和ie？ 我使用IE 10和Firefox 25，它的工作原理沒有問題。 Firefox顯示div但不在正確的位置（鼠標座標）。

的JavaScript：

<script> 
    function show(id) { 
     document.getElementById(id).style.display = "block"; 
     var topPixel = event.clientY; 
     var leftPixel = event.clientX; 
     document.getElementById(id).style.top = topPixel + "px"; 
     document.getElementById(id).style.left = leftPixel + "px"; 
    }; 
    function hide(id) { 
     document.getElementById(id).style.display = "none"; 
    }; 
</script> 

的CSS：

<style> 
.show {display: none;position:absolute;} 
</style> 

用PHP的HTML（$數據被正確地讀取）：

<img src="picture.jpg" width="100" height="100" border="0" alt="img" usemap="#img"> 
<map name="img"> 
<?php while ($data = mysql_fetch_array($db_erg, MYSQL_ASSOC)) { ?>  
    <area shape="rect" coords="10,10,30,30" href="" alt="#" title="" onmouseover="show('<?php echo $data['id'];?>');" onmouseout="hide('<?php echo $data['id'];?>');" /> 
    <div class="show" id="<?php echo $data['id'];?>"> 
     <?php echo $data['text'];?> 
    </div> 
<?php } ?> 
</map> 

功能：與相應的一個DIV內容和鼠標座標應該在鼠標位於某個區域時打開。

Answer 1

http://jsfiddle.net/tX25a/2/

div=document.getElementsByTagName('div')[0]; 
btShow=document.getElementsByTagName('button')[0]; 
btHide=document.getElementsByTagName('button')[1]; 
btShow.onclick=function(){ 
    document.body.onmousemove=function(event){ 
     var e=event||window.event; 
     div.style.left=e.clientX+"px"; 
     div.style.top=e.clientY+"px"; 
    } 
    div.style.display="block"; 
} 
btHide.onclick=function(){ 
    document.body.onmousemove=function(){}; 
    div.style.display="none"; 
} 

對我的作品上FF17ESR，OS/2，應該在IE和WebKit正常工作。 如果您希望塊在onmouseout上消失並顯示在鼠標上，而不是按鈕的單擊，則只需定義適當的事件處理程序。