鼠标在文本上移动时层的显示与消失- HTML/XHTML教程

当前位置: 首页 > 图文教程 > 网页制作 > HTML/XHTML教程 > 鼠标在文本上移动时层的显示与消失

HTML/XHTML教程: 制作三维表格效果; 正确使用XHTML的冒险以及解决办法; 在线播放器代码大全; 在html文件引入其它html文件的几种方法; 用好超级链接标记—A; 用meta标签来增强网页功能; 页边距的设定技巧(HTML); 为你的网页做出电影的过场效果; 网站web标准测试; 网页制作中的小秘诀; 网页设计:一种细腻的导航效果的制作方法; 鼠标在文本上移动时层的显示与消失; 使用Web标准建站第9天：CSS布局入门; 使用Web标准建站第8天：CSS布局入门; HTML语言剖析（七）表格标记; HTML语言剖析（八）表单标记; HTML语言剖析（九）图形标记; HTML语言剖析（十）链接标记; HTML语言剖析（十一）排版标记; HTML语言剖析（十二）多媒体标记

No. « ‹ 56 57 58 59 › »

技术文章搜索

关键字

HTML/XHTML教程中的鼠标在文本上移动时层的显示与消失

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-11-04 浏览: 29 ::

收藏到网摘: n/a

网页设计:一种细腻的导航效果的制作方法使用Web标准建站第9天：CSS布局入门

花了两天的时间才把这个简单的东西给做出来。本来早就想做这个东西的，但是由于......(跟老板后面做事，当然空闲的时间就少了，唉，实在不好意思，因为自己不才，所以找了个借口)。刚好现在公司又让我做个房产管理系统，要用这样的一个方法了，所以才狠下心来非把这个做出来不可。我认为这个例子非常实用(个人看法)，而且好多大型网站上都有这种应用。今天写下来和各位朋友一起分享。以下就是我的所有代码，有不妥之处还请各位高人指教，在此先谢了。
　　把这里的所有代码都放在<body>与</body>之间即可
<script language=javascript>


</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>


</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事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。
　　3、如果朋友们有更好的方法或有不明白的地方我们可以一起探讨。
　　4、有需要的朋友可以直接拿去用，本人保留版权

网页设计:一种细腻的导航效果的制作方法使用Web标准建站第9天：CSS布局入门

HTML/XHTML教程 中的 鼠标在文本上移动时层的显示与消失

评论 (0) All

HTML/XHTML教程中的鼠标在文本上移动时层的显示与消失