日期:2014-05-17 浏览次数:20908 次
<html>
<head>
<style>
/* 定义表情框样式 */
#face{
table-cellspcing:1px;
display:none;
position:absolute;
top:30px;
left:100%;
border:1px solid #aaa;
background:#fff;
}
/* 定义编辑框样式 */
#main{
width:370px;
height:150px;
border:1px solid #ccc;
position:absolute;
}
/* 定义编辑框中的工具条样式 */
#main #toolbar{
width:100%;
height:30px;
background:url(face/bg.gif) repeat-x;
}
/* 定义工具条中的链接样式 */
#toolbar a{
width:24px;
height:24px;
line-height:24px;
text-align:center;
text-decoration:none;
color:#000;
font-weight:bold;
font-size:15px;
float:left;
}
/* 定义工具条中的链接伪样式 */
#toolbar a:hover{
border-right:1px solid #aaa;
border-bottom:1px solid #aaa;
}
</style>
</head>
<body>
<div id='main'>
<div id='toolbar'>
<a href='javascript:void(0)' onclick='onEffect("Bold")'>B</a>
<a href='javascript:void(0)' style='font-style:italic' onclick='onEffect("Italic")'>I</a>
<a href='javascript:void(0)' style='text-decoration:underline' onclick='onEffect("Underline")'>U</a>
<img width=24 height=24 src='face/00.gif' style='float:right;cursor:pointer;' onclick='showFace(this)'/>
</div>
<iframe allowTransparency='true' scrolling='auto' width='100%' height='122' src="" id='editor' frameBorder='0'>
</iframe>
<table id="face">
<tr>
<td><img src="face/0.gif" onclick="insertFace(this)" /></td>
<td><img src="face/1.gif" onclick="insertFace(this)" /></td>
<td><img src="face/2.gif" onclick="insertFace(this)" /></td>
<td><img src="face/3.gif" onclick="insertFace(this)" /></td>
</tr>
<tr>
<td><img src="face/4.gif" onclick="insertFace(this)" /></td>
<td><img src="face/5.gif" onclick="insertFace(this)" /></td>
<td><img src="face/6.gif" onclick="insertFace(this)" /></td>
<td><img src="face/7.gif" onclick="insertFace(this)" /></td>
</tr>
<tr>
<td><img src="face/8.gif" onclick="insertFace(this)" /></td>
<td><img src="face/9.gif" onclick="insertFace(this)" /></td>
<td><img src="face/10.gif" onClick="insertFace(this)" /></td>
<td><img src="face/11.gif" onClick="insertFace(this)" /></td>
</tr>
<tr>
<td><img src="face/12.gif" onClick="insertFace(this)" /></td>
<td><img src="face/13.gif" onClick="insertFace(this)" /></td>
<td><img src="face/14.gif" onClick="insertFace(this)" /></td>
<td><img src="face/15.gif" onClick="insertFace(this)" /></td>
</tr>
</table>
</div>
</body>
</html>
<script type="text/javascript">
//定义编辑窗口引用
var editPane = null;
//打开表情窗口
function showFace(img){
var face = document.getElementById("face");
face.style.display="block";
face.style.left = img.offsetLeft+img.offsetWidth-face.offsetWidth+'px';
face.onclick = function(){face.style.display="none";};
editPane.document.onclick = function(){face.style.display="none";};
}
//插入图片
function in