写了个简单的鼠标悬停显示大图的代码,发现在firebox下有问题!
<HTML>
<HEAD>
<TITLE> </TITLE>
<script type= "text/javascript ">
function showTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=event.clientX;
div3.style.top=event.clientY;
div3.style.position= "absolute ";
}
function closeTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "none ";
}
</script>
</HEAD>
<BODY>
<img src= "1.JPG " onmousemove= "showTip() " onmouseout= "closeTip() ">
<div id= "div3 " style= "display:none; "> <img src= "2.JPG ">
</div>
</BODY>
</HTML>
应该怎么修改?同时要兼容ie和ff,现在ff的显示效果就是div3正好就在1.jpg的下方,没有获得event.clientX Y的值
------解决方案--------------------
ie以外用e.pageX
------解决方案--------------------
汗水嗒嗒
要判断浏览器的啊
还要根据浏览器的不同用不同的事件模型
------解决方案--------------------
function showTip(e){
event = window.event || e;
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=event.clientX;
div3.style.top=event.clientY;
div3.style.position= "absolute ";
}
在FIREFOX中,ENENT要显示的传给函数
onmousemove= "showTip(event) "
------解决方案--------------------
<HTML>
<HEAD>
<TITLE> </TITLE>
<script type= "text/javascript ">
function showTip(e){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "block ";
div3.style.left=e.clientX;
div3.style.top=e.clientY;
div3.style.position= "absolute ";
}
function closeTip(){
var div3 = document.getElementById( 'div3 ');
div3.style.display= "none ";
}
</script>
</HEAD>
<BODY>
<img src= "m05.gif " onmousemove= "showTip(event) " onmouseout= "closeTip() ">
<div id= "div3 " style= "display:none; "> <img src= "m05_.gif ">
</div>
</BODY>
</HTML>
这样看看