在文本框中的添加表情图片，怎么实现，已经有一段js代码，求高人给解释下！

Question

 function selectFace(Face)
        {
       
            var LastA;
        LastA=document.getElementById (document.getElementById("bookface").value);
        LastA.className="LFace";
        document.getElementById(Face).className="CFace";
        LastA=document.getElementById(Face);
        document.getElementById(Face).blur();
        document.forms[0].bookface.value=Face;
        
        }
上面是个用来处理一组表情图片的javascript代码，麻烦能详细的解释下每句的意思！
下面是LFace的出处。
<A id="face1" class="LFace" onclick="selectFace('face1');" href="javascript:void(0)"><IMG style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; TEXT-DECORATION: none; BORDER-BOTTOM-STYLE: none" id="IMG1" height=35 alt="" src="../App_Themes/Default/images/1.gif" width=35 />
另外说下CFace是什么意思？指什么？
下面是CFace的出处。
.CFace:visited {
BORDER-RIGHT: #164283 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #164283 1px solid; PADDING-LEFT: 0px; BACKGROUND: #c9dbf5; PADDING-BOTTOM: 1px; BORDER-LEFT: #164283 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #164283 3px solid
}
.CFace:hover {
BORDER-RIGHT: #164283 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #164283 1px solid; PADDING-LEFT: 0px; BACKGROUND: #9bbbec; PADDING-BOTTOM: 1px; BORDER-LEFT: #164283 1px solid; PADDING-TOP: 1px; BORDER-BOTTOM: #164283 3px solid
}
.LFace:link {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px
}
.LFace:visited {
PADDING-RIGHT: 1px; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; PADDING-TOP: 1px
}
.LFace:hover {
BORDER-RIGHT: #164283 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: #164283 1px solid; PADDING-LEFT: 0px; BACKGROUND: #c9dbf5; BORDER-LEFT: #164283 1px solid; BORDER-BOTTOM: #164283 1px solid;
}