[PHP][Tutorial] smileys to textarea

[X1M!]

Hi all,

This is sort of the 2nd part to my PHP tutorial on how to transform text into a smiley image. In this tutorial I shall be showing you how you can make a line of smiley images, which when clicked will put themselves into your textarea box.

Step 1:
Create a new JavaScript document in your editor. I use Dreamweaver CS3.

Step 2:
We now need to make a function, we shall call it, WriteImgTag:
Code:

function WriteImgTag(code) {
}

As you can see we are defining another variable in our function. "code" is used later, it defines the smileys code to write.

Step 3:
We now need to remember what was originally in our textarea.
Code:

function WriteImgTag(code) {
var cache = document.MyFormName.MyTextArea.value; // Please change these values!
this.code = code;
}

So, we have defined a new variable called cache which is = to what was originally in our textarea. This is updated every time a user clicks a smiley. We have then said that the code = to the code we defined in our function.

Step 4:
Now we need to write the smiley into the textarea.
Code:

function WriteImgTag(code) {
var cache = document.MyFormName.MyTextArea.value; // Please change these values
this.code = code;
document.MyFormName.MyTextArea.value = cache + code;
document.MyFormName.MyTextArea.focus();
}

So let's examine the new code. We have told the function to now add the cached (old) text and to then append the smiley code to the end of our textarea. We have then set focus to our textarea so that the user can continue his/her typing.


Using the code is really simple. We just need to call our function with a normal img tag:
Code:

<img onClick="WriteImgTag('')" src="smilies/smile.png" border=0>

So now when we click that smilie, it will append the text '' into the box.

This script is useful for shoutboxes, guestbooks and whatever else you could add smilies to

If you liked this tutorial, please Thank me

 

[Night2Dark2]

Nice :] i could use this in my system.