动态网站制作指南 [  QQ表情  ]
[ 投票调查 ]
[ 企业邮箱 ]
[ 网站空间 ]
网络编程 | 站长之家 | 网页制作 | 图形图象 | 操作系统 | 冲浪宝典 | 软件教学 | 网络办公 | 邮件系统 | 网络安全 | 认证考试 | 系统进程
ASP源码 | .Net源码 | PHP源码 | JSP源码 | JAVA源码 | CGI源码 | VB源码 | C++源码 | Delphi源码 | PB源码 | VF源码 | 汇编 | 服务器
Firefox | IE | Maxthon | 迅雷 | 电驴 | BitComet | FlashGet | QQ | QQ空间 | Vista | 输入法 | Ghost | Word | Excel | wps | Powerpoint
asp | .net | php | jsp | Sql | c# | Ajax | xml | Dreamweaver | FrontPages | Javascript | css | photoshop | fireworks | Flash | Cad | Discuz!
当前位置 > 网站建设学院 > 网页制作 > HTML教程
网页制作:Dreamweaver教程,FrontPages教程,Javascript教程,HTML教程,CSS教程,心得技巧,DHTML教程,网页特效,Discuz!论坛
文章搜索服务
邮件订阅
输入你的邮件地址,
你将不会错过任何关于:
[ HTML教程 ]的信息

本月文章推荐
.HTML语言剖析(十)链接标记.
.关于iframe的透明背景.
.HTML参考.
.XHTML基础问答-给初学者.
.HTML组件(HTML COMPONENTS)之七.
.META标签的奥妙.
.HTML语言剖析(一)Html简介 .
.Html 书签的使用.
.用HTML给Flash加链接.
.页边距的设定技巧(HTML).
.改变浏览者的鼠标型状.
.偷窥HTML与XML之间的秘密.
.XHTML标签写法应该注意的问题.
.HTML中Access Key(存取键)的用.
.HTML语言剖析(七)表格标记 .
.防止空连接#返回到页面顶端.
.让网页里的提交按钮变得更靓丽.
.HTML语言剖析(十二)多媒体标记 .
.创造收藏夹中的个性化图标.
.HTML语言剖析(九)图形标记.

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

发表日期:2005-7-7 |


花了两天的时间才把这个简单的东西给做出来。本来早就想做这个东西的,但是由于......(跟老板后面做事,当然空闲的时间就少了,唉,实在不好意思,因为自己不才,所以找了个借口)。刚好现在公司又让我做个房产管理系统,要用这样的一个方法了,所以才狠下心来非把这个做出来不可。我认为这个例子非常实用(个人看法),而且好多大型网站上都有这种应用。今天写下来和各位朋友一起分享。以下就是我的所有代码,有不妥之处还请各位高人指教,在此先谢了。
  把这里的所有代码都放在<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事件惹的祸要不早就搞定了。今天写出来让朋友们也能注意这一点。
  3、如果朋友们有更好的方法或有不明白的地方我们可以一起探讨。
  4、有需要的朋友可以直接拿去用,本人保留版权
上一篇:通向web标准之路 人气:8151
下一篇:使用Web标准建站第9天:CSS布局入门 人气:8676
浏览全部HTML的内容 Dreamweaver插件下载 常用网页广告代码全集
  最新网站源码 最新软件下载
2008-10-12 team论坛 v2.0.4 bulid 080916 A
2008-10-12 Roclog v3.1.6
2008-10-12 SupeV v1.0.1 简体中文 GBK
2008-10-12 NetCMS v1.6.0.1010 正式版
2008-10-12 PHP考试系统PPFrame v1.2.7
2008-10-12 LPAS个人相册 v1.6.3
2008-10-12 快问仿百度知道系统 动态-静态-互
2008-10-12 方卡广告防点击系统 V1.0 GB2312
2008-10-12 泡菜内容管理系统[PCMS] v1.0 Bu
2008-10-11 联系人分组工具 v1.1 中文破解版
2008-10-11 FaceMelter变脸 v2.0 汉化破解版
2008-10-11 PathTracker道路跟踪仪 v1.2 破解
2008-10-11 Rooms手机聊天室 v0.6.7 破解版
2008-10-11 RemoteDesktop远程桌面 v1.0 破解
2008-10-11 ProRemote远程调音台 v1.0.1 破解
2008-10-11 PicShare照片共享 v1.0.0 破解版
2008-10-11 Photogene照片编辑器 v1.5 汉化破
2008-10-11 WriteRoom共享文档 v1.0 破解版
  发表评论
姓 名: 验证码:
内 容:
站长工具:网站收录查询 | Google PR查询 | ALEXA排名查询 | CSS在线编辑器 | 广告代码 | js/vbs加密 | md5加密 | 进制转换 | UTF-8 转换工具 | Html转换js | Html转换asp | Html转换php | Html转换perl
实用工具:汉字翻译拼音 | 拼音字典 | 符号对照表 | 个税计算 | 实时汇率查询换算 | 经典小工具 | 汉字简繁转换 | 普通单位换算 | 公制单位换算 | 生辰老黄历 | 国内电话区号 | 国家代码与域名缩写 | 文字加密解密 | 健康查询 | 万年历 | 汉字横竖排版 | 手机号码查询 | 计算器 | ip搜索
业务联系 | 广告刊登 | 频道合作 | 投稿荐稿 | 联系方式 | 加入收藏 | RSS订阅
Copyright © 2000-2008 www.knowsky.com All rights reserved | 网络实名:动态网站制作指南 | 沪ICP备05001343号
ホームページ制作 不動産検索システム 求人情報
防水工事·改修工事 フットサル大会 探偵
SEO対策 中国語教室 ホームページ作成