Для использования в гостевой книге смайликов, необходимо в 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>
|