您现在的位置: 圆点视线 >> 教程 >> 网页设计 >> 网页制作技巧 >> 文章正文
[推荐]网页链接气泡的实现           ★★★
网页链接气泡的实现
作者:hairan  文章来源:internet  点击数:  更新时间:2007-7-21 15:03:04 
 页面功能:【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口 【字体:
当鼠标滑过时,含有链接相关信息的气泡(CSS设定格式)显示出来。

很简单不是吗?不仅工作机制很简单,就连代码以及需要的文件也很简单:
1.一个不足2kb的Javascript文件
2.一个设定样式的CSS
3.一张设定形状的Gif
4.网页文件部分四行HTML
JS文件,CSS文件以及图片只要复制到同一个目录下面,不需要做任何修改,就可以正常使用了。网页部分的代码如下:
<script type="text/javascript" src="bubbletooltips.js"></script>
<script type="text/javascript">
window.onload=function(){enableTooltips("content")};/*content是div的ID*/
</script>

HTML的代码:
<span class="tooltip">
<span class="top">链接的title</span>
<b class="bottom">链接的URL,最多30个字符</b>
</span>

CSS也非常简单:(代码如下)
.tooltip,.tooltip*{display:block}/*由JS添加*/
.tooltip{width:200px;color:#000;font:lighter 11px/1.3 arial,sans-serif;text-decoration:none;text-align:center}
.tooltip span.top{padding:30px 8px 0;background:url(bt.gif) no-repeat top}
.tooltip b.bottom{padding:3px 8px 15px;color:#548912;background:url(bt.gif) no-repeat bottom}

JS的文件实在是太多行了.

演示地址

实例下载

 【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】 文章录入:hairan    责任编辑:hairan  【字体:
 
  • 上一篇文章:

  •  
  • 下一篇文章:
  • 最新文章
    相关文章
    几种常用禁止修改输入框的方法
    网页脚本语言:深入学习JavaScript中的函数
    JS中将字符串转为XML并读取对象的值
    JavaScript在Avant浏览器中的妙用
    详细讲解JavaScript脚本语言的 document 对
    Javascript获得当前网页页面详细地址的实现
    用JS得到字符串中出现次数最多的字母
    网页制作Javascript经典小技巧总结
    javascript数组
    javascript对象
    网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)
    发表评论:
     姓  名: 评 分: 1分 2分 3分 4分 5分
     评论内容: ·严禁发表危害国家安全、政治、黄色淫秽等内容的评论。
    ·用户需对自己在使用本网服务过程中的行为承担法律责任
    ·本站管理员有权保留或删除评论内容。
    ·评论内容只代表机友个人观点,与本网站立场无关。
     
    最 新 推 荐
     
    百度主题推广
    最 新 热 门