| 当鼠标滑过时,含有链接相关信息的气泡(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的文件实在是太多行了.
演示地址
实例下载
|