在检索窗口,留言窗口等输入的地方,给要输入文字的读者一个小小的提示,即美观,又可向导留言时需要注意的事项。tooltip for forms这里虽然有介绍,我将我安装在MT上的一些心得和小改动整理了一下,方便大家使用。
1.首先下载Tooltip for forms zip文件,解冻。
2.做一个叫formtooltips的文件夹。将上面解冻了的文件中的css,images,js三个文件夹放到formtooltips里面。最终具体的构成将是这个样子(以我的网站为例)
http://www.ikias.com/
└─formtooltips/
├─css/
│ form-field-tooltip.css
│
├─images/
│ green-arrow-right.gif
│ green-arrow.gif
│
└─js/
form-field-tooltip.js
rounded-corners.js
3.修改js文件夹里面的form-field-tooltip.js文件:
修改前
this.imagePath = 'images/';
修改后
this.imagePath = 'http://www.ikias.com/formtooltips/images/';
4.将formtooltips文件夹传放到服务器上,和首页在一起的位置。然后对要追加上述功能的网页进行修改,比如在单篇日记归档中,需要修改下面3个地方。
1)在<head>~</head>之间添加下面代码
<script type="text/javascript" src="<$MTBlogURL$>formtooltips/js/form-field-tooltip.js"></script>
<script type="text/javascript" src="<$MTBlogURL$>formtooltips/js/rounded-corners.js"></script>
2)在留言的窗口等<input>地方,做以下修改
修改前
<input id="comment-author" name="author" tabindex="10" accesskey="n" value="" />
修改后
<input id="comment-author" name="author" tabindex="10" accesskey="n" value="" tooltiptext="请输入您的网址(任意)。"/>
3)在</body>的前面追加下面代码
<script type="text/javascript">
var tooltipObj = new DHTMLgoodies_formTooltip();
tooltipObj.initFormFieldTooltip();
</script>
以上就追加完毕了。
因为我比较喜欢清淡的背景,所以我将images文件夹里的green-arrow-right.gif和green-arrow.gif两个图片换为了下面的颜色。
如果选择了上面两个图像的话,需要对js文件夹内的form-field-tooltip.js里进行背景颜色的修改
this.pageBgColor = '#FFFFFF';