为什么这段代码不适用于Firefox和IE?我使用的是 ie10 和火狐 25,使用 chrome,它可以毫无问题地工作。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($data 的 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。
> 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上工作。如果您希望块在鼠标退出时消失并在鼠标悬停时显示,而不是在按钮单击时显示,则只需定义适当的事件处理程序。