日期:2014-05-17 浏览次数:20701 次
<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