1、在要单页面中添加JS代码:
<script type="text/javascript" language="javascript">
<!--
function emoticon(smiley) {
var txtarea = document.comments_form.text;
smiley = ' ' + smiley + ' ';
if (txtarea.createTextRange && txtarea.caretPos) {
var caretPos = txtarea.caretPos;
caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? smiley + ' ' : smiley;
txtarea.focus();
} else {
txtarea.value += smiley;
txtarea.focus();
}
}
//-->
</script>
2、在要显示表情图标按键的地方添加以下代码:
<style>
img.smiley {margin-bottom : 1px;
margin-left : 1px;
margin-top : 1px;
margin-right :1px;}
</style>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_biggrin.gif" alt="Very Happy" width="15" height="15" border="0" title="Very Happy" />')"><img src="http://mtblog.org/images/smiles/icon_biggrin.gif" alt="Very Happy" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_smile.gif" alt="Smile" width="15" height="15" border="0" title="Smile!" />')"><img src="http://mtblog.org/images/smiles/icon_smile.gif" alt="Smile" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_sad.gif" alt="Sad" width="15" height="15" border="0" title="Sad!" />')"><img src="http://mtblog.org/images/smiles/icon_sad.gif" alt="Sad" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_surprised.gif" alt="Surprised" width="15" height="15" border="0" title="Surprised!" />')"><img src="http://mtblog.org/images/smiles/icon_surprised.gif" alt="Surprised" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_eek.gif" alt="Shocked" width="15" height="15" border="0" title="Shocked!" />')"><img src="http://mtblog.org/images/smiles/icon_eek.gif" alt="Shocked" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_confused.gif" alt="Confused" width="15" height="15" border="0" title="Confused!" />')"><img src="http://mtblog.org/images/smiles/icon_confused.gif" alt="Confused" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_cool.gif" alt="Cool" width="15" height="15" border="0" title="Cool!" />')"><img src="http://mtblog.org/images/smiles/icon_cool.gif" alt="Cool" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_lol.gif" alt="Laughing" width="15" height="15" border="0" title="Laughing!" />')"><img src="http://mtblog.org/images/smiles/icon_lol.gif" alt="Laughing" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_mad.gif" alt="Mad" width="15" height="15" border="0" title="Mad!" />')"><img src="http://mtblog.org/images/smiles/icon_mad.gif" alt="Mad" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_razz.gif" alt="Razz" width="15" height="15" border="0" title="Razz!" />')"><img src="http://mtblog.org/images/smiles/icon_razz.gif" alt="Razz" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_redface.gif" alt="Embarassed" width="15" height="15" border="0" title="Embarassed!" />')"><img src="http://mtblog.org/images/smiles/icon_redface.gif" alt="Embarassed" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_cry.gif" alt="Crying or Very Sad" width="15" height="15" border="0" title="Crying or Very Sad!" />')"><img src="http://mtblog.org/images/smiles/icon_cry.gif" alt="Crying or Very Sad" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_evil.gif" alt="Evil or Very Mad" width="15" height="15" border="0" title="Evil or Very Mad!" />')"><img src="http://mtblog.org/images/smiles/icon_evil.gif" alt="Evil or Very Mad" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_twisted.gif" alt="Twisted Evil" width="15" height="15" border="0" title="Twisted Evil!" />')"><img src="http://mtblog.org/images/smiles/icon_twisted.gif" alt="Twisted Evil" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_rolleyes.gif" alt="Rolling Eyes" width="15" height="15" border="0" title="Rolling Eyes!" />')"><img src="http://mtblog.org/images/smiles/icon_rolleyes.gif" alt="Rolling Eyes" width="15" height="15" border="0" class="smiley"></a>
<a href="javascript:emoticon('<img src="http://mtblog.org/images/smiles/icon_wink.gif" alt="Wink" width="15" height="15" border="0" title="Wink!" />')"><img src="http://mtblog.org/images/smiles/icon_wink.gif" alt="Wink" width="15" height="15" border="0" class="smiley"></a><br />
重建页面后即可,具体效果可查看本站评论框。
在这推荐大家使用BbEdit 文章编辑插件,并结合结合MACRO优化该表情按键。
BBEDIT插件包中有"符号转换html识别文件、本地表情图片、和结合Morcos后的smile代码(压缩包中的bb+smile)",大家可以直接复制使用。

Add a Reply