一个很酷的title样式:Bubble Tooltips

Posted in January 27, 2010 at 00:43

之前一直使用的是“mootools”的Tips样式,超级酷。

PS:mootools的范例,可以参考here

不过后来安装了Lightbox后,居然发现mootools.js与lightbox冲突,研究了半天都没研究出个结果,不才,最终只能忍痛割爱,把mootools卸了,不甘心啊。

后来,偶然在网上找到了另一个Tips样式,“Bubble Tooltips”。最终样式如下图:

title

效果还可以吧 :)

安装过程如下:
  1. 需要一个javascripts : 点击下载
  2. 增加一小段CSS代码:点击下载
  3. 一张背景图片:点击下载
第一步:在首页 “head”部分插入下列代码:
<script type="text/javascript" src="Bt Js Code.js" ></script>
<script type="text/javascript">
window.onload=function(){enableTooltips()};
</script>

其中src=为你存放此JS的路径;

enableTooltips(),括号内为空,表示激活所有连接,

如果只想激活ID=”MENU”部分,在改为:

enableTooltips("menu")
第二步:在你的主体CSS里增加刚下载的CSS:
.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;
}

URL里的bt.gif位置,自行修改。

保存,刷新网页,看看效果吧~

Add a comment

Nickname

Site URI

Email

Enable HTML Enable UBB Enable Emots Hidden Remember [Login] [Register]