Гостевая книга на народ.ру со смайлами
Для использования в гостевой книге смайликов, необходимо в guest.txt внести небольшие изменения.
Тегу body надо задать атрибут onload, функцию, запускаемую при старте - start():
<body onload="start()">
Тегу textarea назначаем ID (идентификатор) msgfield.
<textarea id=msgfield name=your_message></textarea>
Также на странице нужно разместить сами смайлы, например, между тегами textarea и input с типом submit, то есть между полем для ввода данных и кнопкой для отправки сообщения.
Тегу img допишем onclick="presssmile(this)" - ссылка на функцию скрипта, которая будет вызываться при клике на картинке.
Картинки-смайлы устанавливаются так:
<img src="http://{OWNERNAME}.narod.ru/smiles/za.gif" title="ржач" alt="*za*"
onclick="presssmile(this)">
<img src="http://{OWNERNAME}.narod.ru/smiles/zb.gif" title="норма" alt="*zb*"
onclick="presssmile(this)">
<img src="http://{OWNERNAME}.narod.ru/smiles/zc.gif" title="ябалдю" alt="*zc*"
onclick="presssmile(this)">
<img src="http://{OWNERNAME}.narod.ru/smiles/zd.gif" title="сигара" alt="*zd*"
onclick="presssmile(this)">
<img src="http://{OWNERNAME}.narod.ru/smiles/ze.gif" title="рульно" alt="*ze*"
onclick="presssmile(this)">
<img src="http://{OWNERNAME}.narod.ru/smiles/zf.gif" title="памагите" alt="*zf*"
onclick="presssmile(this)">
и т.д.
В файле содержащим описание стиля выводимых сообщений (book.txt) в гостевой книге, сообщение посетителя {MESSAGE} и ваш ответ {OWNERREPLY} нужно окружить каким-либо элементом с использованием классов, например так:
<span class=msg>{MESSAGE}</span>
<span class=reply>{OWNERREPLY}</span>
Скрипт
// Массив кодов смайлов, каждому рисунку должны быть заданы такие же атрибуты
alt, только со звездочками:
// <img src="" alt="*za*">
var sm_codes=['lol', 'smile', 'sad', 'huh']; //без звездочек!
//массив адресов соответствующих рисунков
var sm_href=['/smiles/lol.gif', '/smiles/smile.gif', '/smiles/sad.gif', '/smiles/huh.gif'];
//массивы должны содержать одинаковое количество элементов
(function(){
var s= window.onload || function(){};
window.onload= function(){s(); start_smiles()};
})();
// ******************************************************************
// Замена смайлов в сообщениях и ответах админа
// ******************************************************************
function start_smiles(){
//выберем из документа все span'ы
var allmsg= document.getElementsByTagName('SPAN');
//далее в массиве перебираем все элементы
for(var i=0; i<allmsg.length; i++){
if(allmsg[i].className=='msg' || allmsg[i].className=='reply'){
//сейчас заменим все текстовые коды на смайлики
// "переберем" все коды
for(var j=0; j<sm_codes.length; j++){
//команда в следующей строке будет работать правильно, если коды смайликов
задаются только латинскими буквами -
//никаких других знаков! (не отностится к первому и последнему)
//звездочки, если нужно, меняйте на свои знаки
allmsg[i].innerHTML = allmsg[i].innerHTML.replace(new RegExp('\\*'+sm_codes[j]+'\\*',
'gim'), '<img border=0 src="'+sm_href[j]+'">')
};
};
};
};
// ******************************************************************
// Вставка кода смайлика в поле сообщения (textarea)
// ******************************************************************
function presssmile(e){
//подпишем код смайлика в текст поля
document.getElementById('msgfield').value+= e.alt
//вернем фокус полю ввода
document.getElementById('msgfield').focus();
};
Файл book.txt
<hr>
<SCRIPT type="text/javascript">
document.write(C2UT({JSDATE}));
</SCRIPT><NOSCRIPT>{DATE}</NOSCRIPT>
<a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a>
<a href={URL}>{URL}</a>
<p><i><span class=msg>{MESSAGE}</span></i></p>
<p><b><span class=reply>{OWNERREPLY}</span></b></p>
Работу гостевой книги со смайлами можно посмотреть здесь
Чтобы узнать, как сделать гостевую книгу на народ.ру со всеми возможными прибамбахами (смайлы, BB-коды, аватары, ICQ, и т.д.) пройдите сюда.
|