让你的链接更迷人一些——Sweet Titles

以前用Classic Blogger的时候就想加上这个效果,因为懒所以一直没动,今天又在此人极度凶悍那里看到介绍这个JavaScript,终于下定决心把它添加上了。另外,为了搭配本Blog的效果,对它做了一点小小的修改,希望这点会对你有点用处。效果就是鼠标指向本站链接时出现的那个小框框

1.在CSS里添加以下代码:

/* Fading Tooltips By Dustin Diaz*/
body div#toolTip { position:absolute;z-index:1000;width:220px;background:#ff8c05;border:2px double #0f7f00;text-align:left;padding:5px;min-height:1em;-moz-border-radius:5px; }
body div#toolTip p { margin:0;padding:0;color:#ffffff;font:11px/12px verdana,arial,sans-serif; }
body div#toolTip p em { display:block;margin-top:3px;color:#ffffff;font-style:normal;font-weight:bold; }
body div#toolTip p em span { font-weight:bold;color:#ffffff; }

2.引用脚本文件,像以前添加JS一样,将此信息添加在head之间

<script type="text/javascript" src="addEvent.js文件地址"></script>

<script type="text/javascript" src="sweetTitles.js文件地址"><br /></script>

3.自定义。在CSS中我们可以看到五个颜色值,background:#ff8c05 背景色 double #0f7f00边框颜色 还有其它三个都表示文字的颜色,一个是Title属性值的颜色,一个是链接的链色,还剩一个不知道。如果你知道请一定告诉鱼。

如果你很喜欢这个效果的话,这儿是下载地址。解压之后要将其中的两个JS文件上传(如Googlepages中),然后修改代码中JS文件的地址。其余的文件没什么用处啦。压缩文件中的CSS文件是默认的颜色,如果你喜欢可以用那里面的代码。

5 条评论:

任平生 说...

恩,这个早见过了,还有一种是把鼠标放上去,会显示出该词的一些站内的相关的链接和解释,不知道那是用什么做的……

很好看的,可是现在找不到那个网页了…… 遗憾啊

任平生 说...

对了,你能不能修改一下代码 让图片在新窗口中打开,看个图片 还有 返回后退 或按shift键,也太麻烦啦吧, 呵呵,大家都是一样的懒阿~~


rpsh.blogspot.com 会根据你这里学习的,呵呵~~~

M 说...

修改成功,嘿嘿,谢谢鱼

风继续吹 说...

你的网站真漂亮!真希望能像你的博客这样使用Ajax效果,可是我连HTML都不懂,望洋兴叹~哎

麦小田 说...

搞定,多谢~~~