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 :)

It is difficult to tell what you are asking. Are you asking how to insert text from your 'smiles' variable into a textarea when you click an image? — user113716, Mar 02 '10 at 13:19
I'll try ryanulit way and will ask specific questions if it rises. I just didn't know where to start, now i know. — Qiao, Mar 03 '10 at 00:52

score 3 · Accepted Answer · edited May 23 '17 at 12:03

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.

jQuery inserting code under cursor by clicking on image

1 Answers1