Форма для добавления смайлов в комментарии на PHP + Javascript
Просмотров: 21265.
Подписаться на комментарии по RSS.
Смайлы уже стали незаменимым способом общения в социальных сетях. Ими можно выразить своё настроение и эмоции. Если вы решили написать небольшой сайт с нуля, и дошли до части общения пользователей между собой, это может быть комментарии или внутренняя почта сайта. Придать более живой вид форме добавления комментария можно при помощи смайлов.
У пользователя будет выбор из нескольких смайлов на которых он может нажать и в ту же минуту увидеть символ смайла в форме добавления текста.
С помощью 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://www.live-code.ru/uploads/smiles/smile.gif" width="19" height="19" alt="smile" style="border:0;" class="smiley">"<img src="http://www.live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" src="images/smile/smile.png" align="absmiddle" height="18" width="18"> <img style="cursor: pointer;" onclick="InsertSmile("<img src="http://www.live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">"<img src="http://www.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" height="18" width="18"> <img style="cursor: pointer;" onclick="InsertSmile(":("<img src="http://www.live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" src="images/smile/frown.png" align="absmiddle" height="18" width="18"> <img style="cursor: pointer;" onclick="InsertSmile("<img src="http://www.live-code.ru/uploads/smiles/raspberry.gif" width="19" height="19" alt="raspberry" style="border:0;" class="smiley">"<img src="http://www.live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" src="images/smile/tongue.png" align="absmiddle" height="18" width="18"> <img style="cursor: pointer;" onclick="InsertSmile(":D"<img src="http://www.live-code.ru/uploads/smiles/wink.gif" width="19" height="19" alt="wink" style="border:0;" class="smiley">" src="images/smile/biggrin.png" align="absmiddle" height="18" width="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://www.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://www.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://www.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://www.live-code.ru/uploads/smiles/raspberry.gif" width="19" height="19" alt="raspberry" style="border:0;" class="smiley"> <img src="http://www.live-code.ru/uploads/smiles/smile.gif" width="19" height="19" alt="smile" style="border:0;" class="smiley">"; // Выводим уже измененный текст echo smile($Text); ?>
Вот такой результат мы получим.
Пример достаточно просто. Вы сами можете пополнять скрипт нужными смайлами.
Вам нужен спутниковый телефон? Советуем Вам арендовать спутниковые телефоны, продажа и обслуживание спутниковых телефонов Iridium на сайте www.satellite-rent.ru
Еще записи по теме
- Проверка адреса электронной почты с использованием PHP и AJAX
- JQuery: Полезные фрагменты кода для вашего сайта
- Отправка ICQ сообщений на PHP
- PHP получить cookie
- Отправка SMS с помощью PHP
- PHP: Как уменьшить количество HTTP запросов с помощью схемы data: URI
- Установка eAccelerator 0.9.6.1 (apache2) на Debian 5
Комментариев: 3
Во! Спасибо, искал я данный скрипт. Красивые смайлики кто их автор ? хочу себе их сборку смайлов поставить. Если не сложно напишите сайт автора или источник
Демон009, смайлы из коллекции форума XenForo
У вас изначально не верный подход.
Если уж учите - то приучайте делать все правильно.
Надо в 2 функции вынести
function Smiles_pak ()
{
return array(
'
' => '/style/smiles/exclaim.gif'
#......
);
}
function Convert_to_img ($str)
{
$data = Smiles_pak();
$img_array = array();
foreach ($data as $key => $value) {
$img_array [$key] = '';
}
return strtr($str, $img_array);
}
суть ясна, надеюсь.
Просто с вашим вариантом масштабировать и фиксить будет тяжко.