PDA

View Full Version : Inserting Smilies


SeK612
04-22-2004, 09:25 PM
I'm trying to set up a guestbook so that if the user wishes they can insert smilies into posts. The GB is in PHP and doesn't contain any smilies as it is. I have the smilies and have added them to the "sign" page but can't work out the rest.

I've looked at the html code of boards and some other guestbooks and they use a javascript command when the user clicks on the smilies


javascript:emoticon(':(')

This inserts the code into the text box. The text box also recognises the inserted code and places a smilie in its place when the form is submitted.

Is there an easy way to replicate this? Ideally I would like to keep it in PHP and HTML and not MySQL (although this may not be possible). :helpsmile:

Thanks,

SeK612
vivitron 15
04-22-2004, 09:51 PM
you can store the smilies as jpegs or gifs and so str_replace to change the input


:) to
<img src=\"images\happy.gif\" alt=\":)\" />

using something like:


$row["message"] = str_replace(":angry:", "<img alt=\"angry.gif\" src=\"emoticons/angry.gif\" />", $row["message"]); just before the message is posted to the database: this one clearly assumes the line to be put into the guestbook is called $row
SeK612
04-22-2004, 11:17 PM
Thank you :)

The smilies now work. I just need to fix it so when a user clicks on the image of the smilies the code is put into the text field (as it is on this forum when you click the smilies when posting).
vivitron 15
04-22-2004, 11:25 PM
well if you find an easy way, let me know - i thought it would be kinda cool, but couldnt be bothered to actually do it ;)

i just gave them a table of the options and let em get on with it :) (btw: it aint my site i had to put it on ;) )
SeK612
04-23-2004, 10:39 AM
Any idea how to do it though? Is there just some code that will say put ":-)" into the text box if user clicks on image. How do these forums do it? I could do a list with all of the codes for each of the smilies but it makes it a bit harder and it'd be good to have it so there were images on the list and the code was inserted when the user clicked them.

Heres a link to the Guestbook sign page if that helps (http://www.idris-c.com/SarahBaxendale/Guestbook/index.php?action=sign). I tried to add the javascript code which appears on this forum but it doesn't work (I guess theres some steps missing).
vivitron 15
04-23-2004, 04:00 PM
try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript">
function insert_image(img)
{
var tagbody = document.guestform.message.value;
var tagbody = tagbody + img;
document.guestform.message.value=tagbody;
}
</script>
</head>

<body>
<h2>Guestbook</h2>
<form name="guestform" action="" method="POST">
<br />
<input type="text" size="50" name="message">
<br /> <br />
<input type="button" name="button1" value=":D" onclick="insert_image(':D')";>
<input type="button" name="button1" value=":(" onclick="insert_image(':(')";>
<input type="button" name="button1" value=";)" onclick="insert_image(';)')";>
</form>
</body>
</html>

It seems to work: http://www.ianrhodgson.co.uk/test/insertimage.php

ill look at making the butttons images for you
vivitron 15
04-23-2004, 04:33 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript">
function insert_image(img)
{
var tagbody = document.guestform.message.value;
var tagbody = tagbody + img;
document.guestform.message.value=tagbody;
}
</script>
</head>

<body>
<h2>Guestbook</h2>
<form name="guestform" action="" method="post">
<input type="text" size="50" name="message" />
</form>
<br /> <br />
<img src="images/biggrin.gif" alt=":D" onclick="insert_image(' :D ')" />
<img src="images/sad.gif" alt=":(" onclick="insert_image(' :( ')" />
<img src="images/wink.gif" alt=";)" onclick="insert_image('&#59;) ')" />

</body>
</html>


there you go - nice and simple...



edit: missed a "/"