留言或者其他的，在写东西时候想插入常用的一些小图片，如表情。就可以用下面的了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www./TR/1999/REC-html401-19991224/loose.dtd">
<HTML xmlns="http://www./1999/xhtml">
<HEAD><TITLE>发布留言或者其他的表情选择</TITLE>
<META http-equiv=content-type content="text/html; charset=gbk">
<SCRIPT>
/*----------------------------
$Face Select$
----------------------------*/
function setMenuPosition(showid, offset) {
var showobj = $Obj(showid);
var menuobj = $Obj(showid + '_menu');
if(isUndefined(offset)) offset = 0;
if(showobj) {
showobj.pos = fetchOffset(showobj);
showobj.X = showobj.pos['left'];
showobj.Y = showobj.pos['top'];
showobj.w = showobj.offsetWidth;
showobj.h = showobj.offsetHeight;
menuobj.w = menuobj.offsetWidth;
menuobj.h = menuobj.offsetHeight;
if(offset != -1) {
menuobj.style.left = (showobj.X + menuobj.w > document.body.clientWidth) && (showobj.X + showobj.w - menuobj.w >= 0) ? showobj.X + showobj.w - menuobj.w + 'px' : showobj.X + 'px';
menuobj.style.top = offset == 1 ? showobj.Y + 'px' : (offset == 2 || ((showobj.Y + showobj.h + menuobj.h > document.documentElement.scrollTop + document.documentElement.clientHeight) && (showobj.Y - menuobj.h >= 0)) ? (showobj.Y - menuobj.h) + 'px' : showobj.Y + showobj.h + 'px');
} else if(offset == -1) {
menuobj.style.left = (document.body.clientWidth-menuobj.w)/2 + 'px';
var divtop = document.documentElement.scrollTop + (document.documentElement.clientHeight-menuobj.h)/2;
if(divtop > 100) divtop = divtop - 100;
menuobj.style.top = divtop + 'px';
}
if(menuobj.style.clip && !is_opera) {
menuobj.style.clip = 'rect(auto, auto, auto, auto)';
}
}
}
function fetchOffset(obj) {
var left_offset = obj.offsetLeft;
var top_offset = obj.offsetTop;
while((obj = obj.offsetParent) != null) {
left_offset += obj.offsetLeft;
top_offset += obj.offsetTop;
}
return { 'left' : left_offset, 'top' : top_offset };
}
function $Obj(id) {
return document.getElementById(id);
}
function isUndefined(variable) {
return typeof variable == 'undefined' ? true : false;
}
function strlen(str) {
var ie
return (ie && str.indexOf('\n') != -1) ? str.replace(/\r?\n/g, '_').length : str.length;
}
function insertContent(target, text) {
var obj = $Obj(target);
selection = document.selection;
if(!obj.hasfocus) {
obj.focus();
}
if(!isUndefined(obj.selectionStart)) {
var opn = obj.selectionStart + 0;
obj.value = obj.value.substr(0, obj.selectionStart) + text + obj.value.substr(obj.selectionEnd);
} else if(selection && selection.createRange) {
var sel = selection.createRange();
sel.text = text;
sel.moveStart('character', -strlen(text));
} else {
obj.value += text;
}
}
//显示表情菜单
function showFace(showid, target) {
var div = $Obj('face_bg');
if(div) {
div.parentNode.removeChild(div);
}
div = document.createElement('div');
div.id = 'face_bg';
div.style.position = 'absolute';
div.style.left = div.style.top = '0px';
div.style.width = '100%';
div.style.height = document.body.scrollHeight + 'px';
div.style.backgroundColor = '#000';
div.style.zIndex = 10000;
div.style.display = 'none';
div.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=0,finishOpacity=100,style=0)';
div.style.opacity = 0;
div.onclick = function() {
$Obj(showid+'_menu').style.display = 'none';
$Obj('face_bg').style.display = 'none';
}
$Obj('face_show').appendChild(div);
if($Obj(showid + '_menu') != null) {
$Obj(showid+'_menu').style.display = '';
} else {
var faceDiv = document.createElement("div");
faceDiv.id = showid+'_menu';
faceDiv.className = 'facebox';
faceDiv.style.position = 'absolute';
var faceul = document.createElement("ul");
for(i=1; i<31; i++) {
var faceli = document.createElement("li");
faceli.innerHTML = '<img src="image/face/'+i+'.gif" onclick="insertFace(\''+showid+'\','+i+', \''+ target +'\')" style="cursor:pointer; position:relative;" />';
faceul.appendChild(faceli);
}
faceDiv.appendChild(faceul);
$Obj('face_show').appendChild(faceDiv)
}
//定位菜单
setMenuPosition(showid, 0);
div.style.display = '';
}
//插入表情
function insertFace(showid, id, target) {
var faceText = '<img src="image/face/'+id+'.gif">';
if($Obj(target) != null) {
insertContent(target, faceText);
}
$Obj(showid+'_menu').style.display = 'none';
$Obj('face_bg').style.display = 'none';
}
function textCounter(obj, showid, maxlimit) {
var len = strLen(obj.value);
var showobj = $Obj(showid);
if(len > maxlimit) {
obj.value = getStrbylen(obj.value, maxlimit);
showobj.innerHTML = '0';
} else {
showobj.innerHTML = maxlimit - len;
}
if(maxlimit - len > 0) {
showobj.parentNode.style.color = "";
} else {
showobj.parentNode.style.color = "red";
}
}
function getStrbylen(str, len) {
var num = 0;
var strlen = 0;
var newstr = "";
var obj_value_arr = str.split("");
for(var i = 0; i < obj_value_arr.length; i ++) {
if(i < len && num + byteLength(obj_value_arr[i]) <= len) {
num += byteLength(obj_value_arr[i]);
strlen = i + 1;
}
}
if(str.length > strlen) {
newstr = str.substr(0, strlen);
} else {
newstr = str;
}
return newstr;
}
function byteLength (sStr) {
aMatch = sStr.match(/[^\x00-\x80]/g);
return (sStr.length + (! aMatch ? 0 : aMatch.length));
}
function strLen(str) {
var charset = document.charset;
var len = 0;
for(var i = 0; i < str.length; i++) {
len += str.charCodeAt(i) < 0 || str.charCodeAt(i) > 255 ? (charset == "utf-8" ? 3 : 2) : 1;
}
return len;
}
</SCRIPT>
<style>
*{padding:0;margin:0}
body{text-align:center}
.all{margin:150px auto;text-align:left;width:440px;}
ul{list-style:none}
.facebox {BORDER: #ccc 1px solid; PADDING:2px;Z-INDEX: 100000; BACKGROUND: #fff;WIDTH: 250px; }
.facebox UL LI {FLOAT: left; OVERFLOW: hidden; WIDTH: 25px; HEIGHT: 25px}
.face {MARGIN: 0px 1px; VERTICAL-ALIGN: middle}
#doingface{display:block;width:34px; height:24px;float:left;background:#ccc url(image/facelist.gif);cursor:pointer}
.button{COLOR: #000;BORDER: #7b9ebd 1px solid; PADDING:2px 4px;FONT-SIZE: 14px;cursor:pointer;FILTER: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr=#ffffff, EndColorStr=#cecfde); }
</style>
<BODY><center>
<DIV id=face_show></DIV>
<div class=all>
<form method=post>
<span id=doingface onclick="showFace(this.id, 'message');"></span>(还可输入 <strong id="maxlimit">200</strong> 个字符)
<br>
<textarea id="message" name="message" onkeyup="textCounter(this, 'maxlimit', 200)" rows="4" style="width:438px; height: 72px;"></textarea><br>
<button type="submit" class="button">发布</button>
</form>
</div>
</center></BODY></HTML>
