鼠标在文本上移动时层的显示与消失(以及层里显示图片)ASP.NET

这篇博客介绍了如何在ASP.NET中使用JavaScript实现鼠标在文本上移动时显示和隐藏层的功能,包括显示文字和图片。示例代码展示了两种方法,一种显示一段时间后自动隐藏,另一种显示不隐藏。同时,博主分享了在不同文本和层之间切换的处理方式,并讨论了onmouseover和onmousemove事件的区别。文章最后提到了在WebGIS中可能需要采用不同的实现方法。
摘要由CSDN通过智能技术生成

一、下面是显示文字的层做法如下:
把这里的所有代码都放在<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>电

话:021-51314288-23</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" οnmοuseοut=hiddiv(); οnmοusemοve=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>电

话:021-51314288-23</div>

<div id=cd style="position: absolute; width: 126; height: 27; background-color: orange; display: none; left: 11; top:

36">地址:安徽芜湖市清水镇<br>电话:021-51314288-23</div>

<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td width="150"><a href="#" οnmοuseοut=hiddiv(ab); οnmοusemοve=showdiv(ab);>李福云联系方式</a></td>
</tr>
<tr>
<td width="150"><a href="#" οnmοuseοut=hiddiv(cd); οnmοusemοve=showdiv(cd);>家乡之宝坻</a></td>
</tr>
</table>
如果有更多的文本和层的话以此类推即可。
  在这里有几点要说明的就是:
  1、showdiv中带参数时再用document.all.ab.style.display=""就不适用了,关于这点朋友们可以参考有关书籍
  2、onmouseover与onmousemove的区别是:当鼠标移过当前对象时就产生了onmouseover事件,当鼠标在当前对象上移动时就产生了onmousemove事件,只要是在对象上移动而且

没有移出对象的,就是onmousemove事件。我当前就是因为这个onmouseover事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。
  3、如果朋友们有更好的方法或有不明白的地方我们可以一起探讨。
  4、有需要的朋友可以直接拿去用。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值