互联网观察 网站建设 网站运营 网上创业 电子商务 建站软件 建站软件教程 网站开发 网页制作 收藏本站
建站常识 | 域名 | 主机 | 网上开店 | 搜索引擎优化 | 网站推广 | 网络赚钱 | 站长经验 | 个人建站 | 网站设计 | 网页特效 | wap网站

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

  把这里的所有代码都放在<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="http://www.webjx.com/htmldata/2005-02-21/1108983452.html#" 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="http://www.webjx.com/htmldata/2005-02-21/1108983452.html#" onmouseout=hiddiv(ab); onmousemove=showdiv(ab);>发现之旅</a></td>
</tr>
<tr>
<td width="150"><a href="http://www.webjx.com/htmldata/2005-02-21/1108983452.html#" onmouseout=hiddiv(cd); onmousemove=showdiv(cd);>和风景苑</a></td>
</tr>
</table>

  如果有更多的文本和层的话以此类推即可。
  在这里有几点要说明的就是:
  1、showdiv中带参数时再用document.all.ab.style.display=""就不适用了,关于这点朋友们可以参考有关书籍
  2、onmouseover与onmousemove的区别是:当鼠标移过当前对象时就产生了onmouseover事件,当鼠标在当前对象上移动时就产生了onmousemove事件,只要是在对象上移动而且没有移出对象的,就是onmousemove事件。我当前就是因为这个onmouseover事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。




上一篇:网页制作中隐藏域的妙用
下一篇:关于iframe的透明背景
相关分类
网页制作 (4121)
  html教程 (591)
  css教程 (546)
  Dreamweaver教程 (1006)
  JavaScript教程 (834)
  网页制作技巧 (378)
  网页特效 (766)
 


   版权所有 Copyright© 2006 黑马建站宝典 联系方式:heima123#gmail.com