custom textarea with image inside

i was wondering how does on many websites when i add a smile on textarea appears image instead of ex. :), so i want to ask you how it is possible, i need a simple example...

for example i have :

<img class="smile" src="smiles/smile1.gif" alt=":)" onclick="add_smile(1);"/><br/>
<textarea></textarea>

so i want onclick of image (.smile) to be added image on textarea, then to be possible to insert some words after image, or just explain me how does it may be d开发者_运维知识库one ( is there an <div> element or it is a <textarea> or idk what it can be.. )

thanks

What you are seesing on many sites is not a textarea. It's a div with contentEditable attribute which acts like a textarea. That's how wysiwyg editors are created.

<div contentEditable="true"> Type here. You can insert images too </div>

Check working example at http://jsfiddle.net/6bCRJ/