0

このコードが Firefox や IE で動作しないのはなぜですか? 私はie 10とfirefox 25を使用しています.chromeでは問題なく動作します. Firefox は div を表示しますが、正しい位置 (マウス座標) ではありません。

ジャバスクリプト：

<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($data は正しく読み取られます):

<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 を開く必要があります。

4

1 に答える 1

0

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 でブロックを非表示にして onmouseover で表示する場合は、適切なイベント ハンドラを定義するだけです。

于 2013-11-09T18:01:45.673 に答える