开发一个自己的HTML在线编辑器（二）

在插入表情的时候将会调用上面的函数。当鼠标经过了一个表情文件，我们将会调用这个函数设置表情图片的边框。用这种方法，可以方便用户观察到鼠标是经过了哪一个表情图片。注意我们增加了一个“x”图片，用于当用户不需要选择任何表情图片的时候关闭div层。

图2

列表4

function ClearBorders(id)
{
　　// 清除onmouseover事件时表情图片的边框样式
　　var imgBorder = document.getElementById(id);
　　imgBorder.style.borderStyle = "solid";
　　imgBorder.style.borderWidth = "thin";
　　imgBorder.style.borderColor = "white";
}

当鼠标离开一个表情图片的时候清除它的边框样式则调用这个函数

列表5

function SetImage(editorId,path,e)
{
　　// 获得单击位置
　　var height = e.clientY + parseInt('5');
　　// 获得被单击图片的高度
　　var offsetHeight = parseInt(e.offsetY);
　　height = height - offsetHeight;
　　　　　　　　　　　
　　// 获得单击位置（宽）
　　var width = e.clientX
　　// 获得被单击图片的宽度
　　var offsetWidth = parseInt(e.offsetX);
　　width = width - offsetWidth;
　　　　　　　　　　　
　　// 存储iframe的id
　　var finalDivId = editorId + '_content';
　　path = unescape(path);
　　　　　　　　　　　　　　
　　// 从用户的电脑里插入一个图片
　　window.open('UploadImages.aspx?path=' + path +
　　 '&f=' + finalDivId,null,'width=500px,height=50px,titlebar=no,menubar=no,statusbar=no,toolbar=no,top='
　　 + height + 'left=' + width );　　　　　　　　　　　　　　　　　
}