Creating Clickable Smilies

Introduction

This is a combination of two functions, one JavaScript and one PHP that you can use for adding clickable smilies to a shoutbox, news script or anything like that.

This tutorial assumes that you already have some sort of working news script or guestbook, where your messages/posts are stored somewhere and already displayed as a variable

The JavaScript Stuff

This is the script that'll write a code into the form that later we can replace with a smiley face.

<script type="text/javascript">
<!--
function addsmiley(code)
{
var pretext = document.formname.fieldname.value;
              this.code = code;
              document.formname.fieldname.value = pretext + code;
}
//-->
</script>

You need to make some changes to this and specify the 'formname' and 'fieldname' values

The fieldname being the name of the form that would be specified in your <form> tag, and the fieldname being the name of the textbox or textarea that you want to write the value to, e.g:

<form name="news" method="post" action="news.php">
      <input name="title" type="text" size="30" />
      <br />
      <textarea name="message" cols="30" rows="5"></textarea>
</form>

If the above was a form i was using to add news posts, with options for a title and message, i want to add my smiliesto the message so the function would be changed to:

var pretext = document.news.message.value;
              this.code = code;
              document.news.message.value = pretext + code;

Ok, now we just need to call this function when one of the smilies is clicked, and write a code into the message field that we can turn into an image later.

You can add as many smilies as you like to your page using the same method:

<img src="./smile.gif" alt=":)" onClick="addsmiley(':)')" style="cursor:pointer;border:0" />

onClick="addsmiley(':)')" - this is where we call the function from earlier and this will write the value :) into our message box, which is the shortcut code we want for smile.gif

Make sure you change the path to your own smilies and the onClick event so that it writes a different code for each image you want to use.

The PHP Stuff

Now we have our message field and can write some shortcut codes into it just from clicking an image, all that's left is to convert those codes into a smiley face to show in the output.

You might be thinking why not just write the HTML to show the smiley into the message box in the first place? well, a) it's messy, b) it'll take up more space in and slow down your database, c) people wouldn't be able to also just type out the shortcut codes, such as :) :P or whatever.

So here's the function that'll handle the replacements to turn this --> :) into this -->

That's all, you simply need to repeat the $msg = str_replace line for each smiley you want to add changing the shortcut code and the image path.

Don't repeat the whole function, just that line, eg:

And so on.

It's a simple function if you look at it, it's just saying replace :) with <img src="smile.gif" alt=":)" />

All that's left now is to call this second function when you print out your news, shoutbox posts or whatever they are, assuming your value for each news post is $text you would just:

And all your shortcut codes written into the message by the first function will be replaced with the HTML for the image by the second.

The above is probably the easiest way to do this but it's not really the most efficient, especially if you have a lot of images to replace, if you do then you might want to consider using an array instead which would mean less code and probably also be a little quicker.

Just continue the array in the same format for each image you want to add.