JQuery inserting code under cursor by clicking on image

Question

I want to insert the emoticon code in the text area under the cursor position by clicking on the images.

There are three images in the #smiles div:

And the array
var smiles = {
"happy": ":)",
'sad': ':(',
'normal': ': |'
};

Textarea - #text

I do not know if it is normal to use image images to communicate with the code, or is there a better way (for example, by position).

Can you help me write the code. I will learn this :)

Answer 1

question SO . , , jQuery, .

, - :

<img id="happy" src="happy.gif" alt="Happy Face" title=":)" />
<img id="sad" src="sad.gif" alt="Sad Face" title=":(" />
<img id="normal" src="normal.gif" alt="Normal Face" title=":|" />

 $('img').click(function() {
       wherever_cursor_is = $('img').attr('title');
    }); 

. , .