求教onmouseover事件,该怎么处理
日期：2014-05-16 浏览次数：20381 次
求教onmouseover事件
我在图片上加了几个热点, 想让鼠标ommouseover这几个热点的时候分别弹出不同的div(若是div里能加入图片就更好了), onmouseout后div就消失.
除此以外, 如何能让这个网页躲开ie7的javascript屏蔽, 而且能用在firefox上? 因为如果默认的屏蔽打开了, 用户就看不到这些效果, 我的热点也就白做了.
请高手赐教, 有礼了!
------解决方案--------------------
写两个方法
showDiv() 中以 Div.style.display = "inline ";显示Div
HiddenDiv() 中以 Div.style.display = "none ";隐藏Div
ommouseover= "showDiv() "
ommouseout = "HiddenDiv() "
------解决方案--------------------
<html>
<head> <meta http-equiv= "Content-Type " content= "text/html;charset=gb2312 ">
<title> show and hide </title>
</head>
<script>
function ShowDiv(){
test.style.top=event.clientY-2;
test.style.left=event.clientX+3;
test.style.visibility= "visible ";
}
function HiddenDiv(){
test.style.visibility= "hidden ";
}
</script>
<body>
<span onmouseover= "ShowDiv() " onmouseout= "HiddenDiv() "> move here </span>
<div id= "test " style= "position:absolute;visibility:hidden;width:200;height:200;border:1 black solid;background-color:#FFFFCC " onmouseover= "this.style.visibility= 'visible ' " onmouseout= "this.style.visibility= 'hidden ' "> i 'm test </div>
</body>
</html>
参考一下吧
------解决方案--------------------
<html xmlns= "http://www.w3.org/1999/xhtml " >
<head>
<style type= "text/css ">
.cPopText
{
filter: Alpha(Opacity=0);
}
</style>
</head>
<body>
<table width= "200px " onmouseover= "showPopupText(event); " onmouseout= "hidePopupText(event); " border= "1 ">
<tr> <td> line1 </td> </tr>
</table> <br />
<table width= "200px " onmouseover= "showPopupText(event); " onmouseout= "hidePopupText(event); " border= "1 ">
<tr> <td> line2 </td> </tr>
</table> <br />
<table width= "200px " onmouseover= "showPopupText(event); " onmouseout= "hidePopupText(event); " border= "1 ">
<tr> <td> line3 </td> </tr>
</table>
</body>
</html>
<script type= "text/javascript ">
//***********默认设置定义.*********************
tPopWait=1; //停留tWait豪秒后显示提示。
tPopShow=60000; //显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=50;
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
MouseX=0;
MouseY=0;
popLeftAdjust=0;
popTopAdjust=0;
function showPopupText(e)
{
e = window.event || e;
var o = e.srcElement || e.target;
MouseX=e.clientX ;
MouseY=e.clientY;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
curShow=setTimeout( "showIt() ",tPopWait);
}
function showIt()
{
var odyp = document.getElementById( 'dypopLayer ');
var popWidth = odyp.clientW
我在图片上加了几个热点, 想让鼠标ommouseover这几个热点的时候分别弹出不同的div(若是div里能加入图片就更好了), onmouseout后div就消失.
除此以外, 如何能让这个网页躲开ie7的javascript屏蔽, 而且能用在firefox上? 因为如果默认的屏蔽打开了, 用户就看不到这些效果, 我的热点也就白做了.
请高手赐教, 有礼了!
------解决方案--------------------
写两个方法
showDiv() 中以 Div.style.display = "inline ";显示Div
HiddenDiv() 中以 Div.style.display = "none ";隐藏Div
ommouseover= "showDiv() "
ommouseout = "HiddenDiv() "
------解决方案--------------------
<html>
<head> <meta http-equiv= "Content-Type " content= "text/html;charset=gb2312 ">
<title> show and hide </title>
</head>
<script>
function ShowDiv(){
test.style.top=event.clientY-2;
test.style.left=event.clientX+3;
test.style.visibility= "visible ";
}
function HiddenDiv(){
test.style.visibility= "hidden ";
}
</script>
<body>
<span onmouseover= "ShowDiv() " onmouseout= "HiddenDiv() "> move here </span>
<div id= "test " style= "position:absolute;visibility:hidden;width:200;height:200;border:1 black solid;background-color:#FFFFCC " onmouseover= "this.style.visibility= 'visible ' " onmouseout= "this.style.visibility= 'hidden ' "> i 'm test </div>
</body>
</html>
参考一下吧
------解决方案--------------------
<html xmlns= "http://www.w3.org/1999/xhtml " >
<head>
<style type= "text/css ">
.cPopText
{
filter: Alpha(Opacity=0);
}
</style>
</head>
<body>
<table width= "200px " onmouseover= "showPopupText(event); " onmouseout= "hidePopupText(event); " border= "1 ">
<tr> <td> line1 </td> </tr>
</table> <br />
<table width= "200px " onmouseover= "showPopupText(event); " onmouseout= "hidePopupText(event); " border= "1 ">
<tr> <td> line2 </td> </tr>
</table> <br />
<table width= "200px " onmouseover= "showPopupText(event); " onmouseout= "hidePopupText(event); " border= "1 ">
<tr> <td> line3 </td> </tr>
</table>
</body>
</html>
<script type= "text/javascript ">
//***********默认设置定义.*********************
tPopWait=1; //停留tWait豪秒后显示提示。
tPopShow=60000; //显示tShow豪秒后关闭提示
showPopStep=20;
popOpacity=50;
//***************内部变量定义*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
MouseX=0;
MouseY=0;
popLeftAdjust=0;
popTopAdjust=0;
function showPopupText(e)
{
e = window.event || e;
var o = e.srcElement || e.target;
MouseX=e.clientX ;
MouseY=e.clientY;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
curShow=setTimeout( "showIt() ",tPopWait);
}
function showIt()
{
var odyp = document.getElementById( 'dypopLayer ');
var popWidth = odyp.clientW
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
