Wonder how smiley faces are automatically added your guestbook or blog script whenever you type :) in your form's textarea ? This tutorial will guide you thru on how to write a simple script to added smiley to your script.
1) Create a TextArea Form
First of all, you need to have create a form. You need to have a form to enter messages in any guestbook or blog script right ? example of the form is as below.
| Code: |
<form action="post.php" method="post" name="post" >
<textarea name="message" rows="10" cols="35" wrap="virtual" style="width:450px" ></textarea>
<input type=submit value="Submit" name=submit>
</form> |
2) Create A Link to add short smiley code eg :) without typing
After creating a form, you may want to create a button of a link to drop short smiley code to the textarea without type. All you need is a javascript.
please make sure that form name & the textarea name defined in the form
In the form (please note on the bold & italic/undeline words)
<form action=".PHP_SELF." method="post" name="post" >
<textarea name="message" rows="10" cols="35" wrap="virtual" style="width:450px" ></textarea>
In the javascript you need to define the name!
document.post.message.value = document.post.message.value + which;
|
Code: |
<SCRIPT LANGUAGE='JavaScript'>
/** smiley coded by Sean **/
<!--
function Smiles(which) {
document.post.message.value = document.post.message.value + which;
}
//-->
</SCRIPT> |
After creating the javascript to enable you to drop the short smiley code to the textarea. Now, you need to create a link or a button as well
Download this above smiley image into the directory "images" and create a link as below
| Code: |
| <A HREF="javascript:Smiles(':)')"><IMG SRC="images/icon_smile.gif" BORDER=0 alt=":)"></A> |
You have just create a form with button/link that enable you to drop the smiley short code into the text area.
Next part we will look into how to process form message & replace smiley short codes with smilies images. Please come back again for 2nd Part !
