jQuery inserting code under cursor by clicking on image

Question

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

There are three images in div #smiles:

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

Textarea is #text

I don't know is it ok to use images' urls for connection with code, or there is better way (for example, by position).

Can you, please, help me to write the code. I will learn by it :)

Answer 1

This past question on SO should get you moving in the right direction. Also as the answer states there is a plugin for jQuery that accomplishes this as well.

Once you get the cursor position, you could do something like this:

<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=":|" />

and then use

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

to get the code to insert the proper face at the cursor location. There is going to be more code involved, but this is at a simplified level for an example.