well i did a fair amount of gooigling and coding and this is what i came up with. it only works in IE for now FF doesn't have support for selections within textareas. [code] <html> <head> <script type="text/javascript"> function AddEmo(tag) { var emo=document.forms["frm1"].elements["post"]; if (document.selection) { emo.focus(); var sel = document.selection.createRange(); sel.text = tag } else if (emo.selectionStart || emo.selectionStart == '0') { var startPos = emo.selectionStart var endPos = emo.selectionEnd emo.value = emo.value.substring(0, startPos) + tag + emo.value.substring(endPos, emo.value.length) } else { emo.value += tag; } } function AddTag(tag) { var txt = ''; if (window.getSelection) { txt = window.getSelection(); } else if (document.getSelection) { txt = document.getSelection(); } else if (document.selection) { txt = document.selection.createRange().text; } var stri1 = txt var stri = "[tag]"+stri1+"[/tag]" AddEmo(stri); } // calling the function </script> </head> <body> <form method="post" name="frm1" id="frm1"> <img src="http://franklyn.ifastnet.com/News/emoticons/smile.png" onclick="AddEmo('::smile::')"> <img src="http://musicbrainz.org/images/mblookup-tag.gif" onclick="AddTag('[img]')"> <br> <textarea name="post" id="post"> </textarea> </form> </body> </html> [/code]