鼠标在文本上移动时层的显示与消失

王朝other·作者佚名  2008-05-20
窄屏简体版  字體: |||超大  

把这里的所有代码都放在<body>与</body>之间即可

<script language=javascript>

<!--

function hiddiv()

{

document.all.ab.style.display="none"

}

function showdiv()

{

document.all.ab.style.display=""

document.all.ab.style.left=window.event.clientX+15

document.all.ab.style.top=window.event.clientY

}

//-->

</script>

<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址:园区星海街东侧<br>电话:0512-65103588-206</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">

<tr>

<td width="150"><a href="#" onmouseout=hiddiv(); onmousemove=showdiv();>发现之旅</a></td>

</tr>

</table>

当然了这里的功能比较简单,没有对浏览器类型进行判断,本人不才,就把这个问题留给各位了,欢迎每一位朋友来修改这个问题。

在这里还有一个问题就是如果文本不止一个、定义的层也就不止一个。如果还用这样的方法就会出错,我对这个问题研究了一下,用下面的这个方法就可以解决了。

<script language=javascript>

<!--

function hiddiv(blah)

{

blah.style.display="none"

}

function showdiv(blah)

{

blah.style.display=""

blah.style.left=window.event.clientX+15

blah.style.top=window.event.clientY

}

//-->

</script>

<div id=ab style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址:园区星海街东侧<br>电话:0512-65103588-20611</div>

<div id=cd style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top: 36">地址:新区明星街南侧<br>电话:0512-65103588-20622</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">

<tr>

<td width="150"><a href="#" onmouseout=hiddiv(ab); onmousemove=showdiv(ab);>发现之旅</a></td>

</tr>

<tr>

<td width="150"><a href="#" onmouseout=hiddiv(cd); onmousemove=showdiv(cd);>和风景苑</a></td>

</tr>

</table>

如果有更多的文本和层的话以此类推即可。

在这里有几点要说明的就是:

1、showdiv中带参数时再用document.all.ab.style.display=""就不适用了,关于这点朋友们可以参考有关书籍

2、onmouseover与onmousemove的区别是:当鼠标移过当前对象时就产生了onmouseover事件,当鼠标在当前对象上移动时就产生了onmousemove事件,只要是在对象上移动而且没有移出对象的,就是onmousemove事件。我当前就是因为这个onmouseover事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航