链接冒泡

一个简单的链接冒泡

两年前在pro.html.it 的时候，我写了一篇关于如何使用纯CSS和 少量的DOM树来动态确定标题框的文章。最近我在玩一个新技术：使用Javascript+CSS去实现那些以前单纯使用Javascript做脚本或者 单纯使用CSS做设计的技术。这个星期关于链接冒泡的新文章在Pro站上得到了发表。

链接冒泡其实非常容易实现，工作机制也很简单：

1.检查DOM
2.如果找到关于链接的信息，title，href等就被传递给DOM树
3.当鼠标滑过时，含有链接相关信息的气泡（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的文件实在是太多行了，我就直接给出文件download .

好了,废话少说,大家自己去ENJOY这其中的乐趣吧!

我给出地址整个实例的下载地址：http://www.phprimer.com/demo/200801071417/bubble.rar

注：本页面的效果就是简单的冒泡效果