Смайлы уже стали незаменимым способом общения в социальных сетях. Ими можно выразить своё настроение и эмоции. Если вы решили написать небольшой сайт с нуля, и дошли до части общения пользователей между собой, это может быть комментарии или внутренняя почта сайта. Придать более живой вид форме добавления комментария можно при помощи смайлов.

У пользователя будет выбор из нескольких смайлов на которых он может нажать и в ту же минуту увидеть символ смайла в форме добавления текста.

С помощью Javascript напишем небольшой скрипт который будет отвечать за действия во время нажатия на картинку смайла. PHP в свою очередь будет заменять символ смайла, например вместо "" будет картинка.

Принцип работы прост, пользователь написал сообщение или комментарии используя при этом символы комментариев и сохраняет текст в базу. Нужно учесть тот факт что, в базу будут идти только символы, преобразовать символы в изображение мы будем только после вывода данных.

Создадим HTML файл который будет выводит форму добавления комментария.

<script language="javascript" type="text/javascript">
var ie=document.all?1:0;
var ns=document.getElementById&&!document.all?1:0;
function InsertSmile(SmileId)
{
    if(ie) {
    	document.all.text.focus();
    	document.all.text.value+=" "+SmileId+" ";
    }
    else if(ns) {
    	document.forms['comment'].elements['text'].focus();
    	document.forms['comment'].elements['text'].value+=""+SmileId+" ";
    }
    else
    	alert("!");
}
</script>
<h2 align="center">Добавление комментария</h2>
<form name="comment" method="post" action="">
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="400"><tbody>
<tr>
<td><textarea name="text" id="text" style="width: 100%;"></textarea></td>
</tr>
<tr><td align="center">
		  
		  <img style="cursor: pointer;" onclick='InsertSmile("<img src="http://live-code.ru/uploads/smiles/smile.gif" width="19" height="19" alt="smile" style="border:0;" class="smiley">")' src="images/smile/smile.png" align="absmiddle" width="18" height="18">  
		  <img style="cursor: pointer;" onclick='InsertSmile("<img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">")' src="images/smile/wink.png" align="absmiddle" width="18" height="18">  
		  <img style="cursor: pointer;" onclick='InsertSmile(":(")' src="images/smile/frown.png" align="absmiddle" width="18" height="18">  
		  <img style="cursor: pointer;" onclick='InsertSmile("<img src="http://live-code.ru/uploads/smiles/raspberry.gif" width="19" height="19" alt="raspberry" style="border:0;" class="smiley">")' src="images/smile/tongue.png" align="absmiddle" width="18" height="18">  
		  <img style="cursor: pointer;" onclick='InsertSmile(":D")' src="images/smile/biggrin.png" align="absmiddle" width="18" height="18">   
		  <input name="Submit" value="Добавить" type="submit"></td>
</tr></tbody></table>
	</div>
</form>

Получим вот такую форму.

Чтобы пример работал нормально, название формы(form) должна быть названа "comment" а поле добавления комментария "text". Это не обязательно, но если захотите добавить javascript код у себя то придется указать свои имена форм.

Теперь, давайте рассмотрим PHP скрипт который будет менять символы на их изображения.

// Смена символом на смайлы
function smile($text) {
	return strtr($text, 
		// Массив символов и их смайлов
		array(
		"<img src="http://live-code.ru/uploads/smiles/smile.gif" width="19" height="19" alt="smile" style="border:0;" class="smiley">" => "<img src="images/smile/smile.png" align="absmiddle"> ",
        "<img src="http://live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" => "<img src="images/smile/wink.png" align="absmiddle"> ",
		":(" => "<img src="images/smile/frown.png" align="absmiddle"> ",
		"<img src="http://live-code.ru/uploads/smiles/raspberry.gif" width="19" height="19" alt="raspberry" style="border:0;" class="smiley">" => "<img src="images/smile/tongue.png" align="absmiddle"> ",
		":D" => "<img src="images/smile/biggrin.png" align="absmiddle"> ",
		)
	);
}
// Текст выведенный из цикла из базы или просто любой текст
$Text = "Текст с live-code.ru <img src="http://live-code.ru/uploads/smiles/raspberry.gif" width="19" height="19" alt="raspberry" style="border:0;" class="smiley"> <img src="http://live-code.ru/uploads/smiles/smile.gif" width="19" height="19" alt="smile" style="border:0;" class="smiley">";
// Выводим уже измененный текст
echo smile($Text);
?>

Вот такой результат мы получим.

Пример достаточно просто. Вы сами можете пополнять скрипт нужными смайлами.