给评论框加上网站LOGO和提示语
技术与开发
小幽在浏览网易新闻时，发现新闻下方的评论框很有个性，会显示出网易的LOGO，而且评论框中默认显示“我来评两句”，当鼠标点击评论框时它就自动消失。她非常喜欢这种效果，很想自己的个人网站上有这样人性化的评论框。
制作有自己网站特色的评论框，用JavaScript语言来设计非常简单。先要把网站的LOGO加入背景中，然后通过默认语句函数来控制评论框中默认提示语句的显示和自动消失，即可完成个性评论框的制作。这种效果不仅仅适用于评论框，还可以用在搜索框、留言簿等地方。
第一步：修改评论框代码
如果想让自已的网站评论框能显示网站的LOGO，就需要对页面中的评论框做一些修改，以便我们添加内容。我们可以用记事本打开需要修改的页面，找到源码
区中的评论框代码进行如下修改：＜DIV class=loginTip＞/*表单外层DIV，方便布局*/
＜form name="formpost" method="post" target="_self" action="#" onSubmit="return reply_checksubmit();"＞/*表单名为formpost，如修改请和下面JavaScript代码中保持一致，reply_checksubmit()为自定义提交函数*/
＜div class="textBox"＞/*评论框外层DIV，方便布局*/
＜textarea onfocus="reply_clearfield()" name="body" rows=""＞我来评两句！＜/textarea＞/*当鼠标点击评论框时调用reply_clearfield()函数清除里面默认内容*/
＜/div＞
＜INPUT class=input onMouseOver="this.className='inputOver'" onMouseOut="this.className='input'" type=submit value=马上发表 name=frmsubmit＞ /*提交按钮，鼠标移上去和移开调用不同的class*/
＜/form＞
＜/DIV＞
第二步：烙上自己网站的LOGO
经过第一步的修改，评论框可以加入网站的LOGO了。我们要在
区，添加相关代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：.textbox {
clear: both; padding:3px 0 0; /*清除层浮动*/
}
.textbox textarea {
border: #ccc 1px solid; padding: 5px; background: url(images t_back.gif) no-repeat center 50px; height: 130px; width:460px; /*url(images t_back.gif) 设置背景图片，可自行修改，no-repeat表示背景图不重复，center 50px表示背景图片左右居中，距上部50px*/
}
.input {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BACKGROUND: url(images/end_n_input_bg2.gif) no-repeat; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 68px; CURSOR: pointer; PADDING-TOP: 3px; HEIGHT: 19px; BORDER-RIGHT-WIDTH: 0px} /*设置按钮属性*/
.inputOver {
BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: 12px; BACKGROUND: url(images/end_n_input_bg2_.gif) no-repeat; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; WIDTH: 68px; CURSOR: pointer; PADDING-TOP: 3px; HEIGHT: 19px; BORDER-RIGHT-WIDTH: 0px}/*设置按钮鼠标移上时属性*/
小知识：clear:both; 表示清除浮动，使用此代码，接下来的内容不会受到上面的浮动影响。
第三步：自动清除提示语
现在评论框可以显示出背景图了，但是当我们点击时，默认的提示语不会自动消失。我们还要在
区加上自动清除提示语语句的代码，其中关键代码如下所示（完整代码下载地址：http://www.shudoo.com/bzsoft）：var tip = "我来评两句！";/*默认提示语句*/
function reply_clearfield()/*定义清除函数*/
{
if (document.formpost.body.value == tip) /*判断评论框值是否为默认语句，步骤很重要，如果不判断，每输入一次，评论框内容都会被清空*/
{
document.formpost.body.value = "";/*评论框默认提示语清空*/
}
}
function reply_checksubmit()/*定义提交函数*/
{
if(document.formpost.body.value==tip||document.formpost.body.value.length==0) /* 判断用户是否输入*/
{
alert('请填写内容'); /*弹出提示输入对话框架*/
return false; /*返回*/
}
try{ext_submit();}catch(e){} /*否则提交*/
return true;
}
总结
这种凸现网站个性的评论框，在很多门户网站上都能看到。此外，我们还可以把这种效果应用到下拉菜单、搜索框中，吸引用户的眼球。