HTML-pedia
Веб-строительство

Сообщество
Веб-потребителей




Гостевая книга на народ.ру со смайлами

Для использования в гостевой книге смайликов, необходимо в 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>&nbsp;
<a href="mailto:{AUTHOREMAIL}">{AUTHORNAME}</a>&nbsp;
<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, и т.д.) пройдите сюда.

Хостинг от uCoz