Как добавить смайлы в форму комментариев
Уже была небольшая статейка о том как сделать простейшую форму комментариев. Вот в нее то и добавим возможность добавлять смайлы.
Для начала нужна папка со смайлами. Я туда кинул 4 штучки. Можно неограниченно большое количество.
Далее вверху над формой пишем смайлик при нажатии на который будут открываться все. Если все сразу покажем – то будет слишком громоздко. Поэтому только один для начала.
<div><img src=_.html#8221;smile/1.gif” onClick=”document.getElementById (‘smiles’).style.display=’block’”></div><br> (это одна строка)
<form method=”post” action=”obr.php”>
<textarea name=”comment”></textarea><br>
<input type=”submit” value=”Отправить”>
</form>
Ну и сам блок со смайликами поставим вверху, скроем его для начала и дадим ему id “smiles”:
<div style=”display:none;” id=”smiles”><img src=_.html#8221;smile/1.gif” onClick=”document.forms[0].comment.value+=’:-|’”>
<img src=_.html#8221;smile/2.gif” onClick=”document.forms[0].comment.value+=’;-)’”>
<img src=_.html#8221;smile/3.gif” onClick=”document.forms[0].comment.value+=’:-)’”>
<img src=_.html#8221;smile/4.gif” onClick=”document.forms[0].comment.value+=’8-)’”></div>
Как мы видим – при нажатии на смайлик в текстовое поле формы добавляется соответствующий эквивалент. Например при нажатии на 1.gif в текстовом поле появится :-|. А дальше в процессе вывода комментариев просто заменим эти эквиваленты на картинки:
<?php
$array1=array (“:-|”,”;-)”,”:-)”,”8-)”); // массив поиска
$array2=array (“<img src=_.html#8217;smile/1.gif’>”,”<img src=_.html#8217;smile/2.gif’>”,”<img src=_.html#8217;smile/3.gif’>”,”<img src=_.html#8217;smile/4.gif’>”); // массив замены
$allcomments=file (“allcomments.txt”);
foreach ($allcomments as $v){
$v=str_replace ($array1,$array2,$v); // меняем
echo $v.”<br><hr>”;
}
?>
Листинг файла:
<div style=”display:none;” id=”smiles”><img src=_.html#8221;smile/1.gif” onClick=”document.forms[0].comment.value+=’:-|’”>
<img src=_.html#8221;smile/2.gif” onClick=”document.forms[0].comment.value+=’;-)’”>
<img src=_.html#8221;smile/3.gif” onClick=”document.forms[0].comment.value+=’:-)’”>
<img src=_.html#8221;smile/4.gif” onClick=”document.forms[0].comment.value+=’8-)’”></div>
<div><img src=_.html#8221;smile/1.gif” onClick=”document.getElementById (‘smiles’).style.display=’block’”></div><br>
<form method=”post” action=”obr.php”>
<textarea name=”comment”></textarea><br>
<input type=”submit” value=”Отправить”>
</form>
<?php
$array1=array (“:-|”,”;-)”,”:-)”,”8-)”);
$array2=array (“<img src=_.html#8217;smile/1.gif’>”,”<img src=_.html#8217;smile/2.gif’>”,”<img src=_.html#8217;smile/3.gif’>”,”<img src=_.html#8217;smile/4.gif’>”);
$allcomments=file (“allcomments.txt”);
foreach ($allcomments as $v){
$v=str_replace ($array1,$array2,$v);
echo $v.”<br><hr>”;
}
?>
Ну и собственно все это в рабочем виде.
P.S. Специально не раскрашиваю стилями. Эта заметка не о CSS.
Вроде для Вордпресса был плагин для подсветки кода...
@Yarunya
Да есть такие. В следующий раз учту. Спасибо за напоминание. В этом посте уже исправлять подсветку не буду. Дабы разница была видна)