Привет: Гость, вы зашли под логином "Гость", вы находитесь в группе "Гости", сегодня Понедельник, 21.08.2017, и 11:58
Форма входа
E-mail:
Пароль:
Главная | Каталог статей | Регистрация | Вход

Меню сайта
Категории раздела
Мои статьи [4]
liex [0]
ICQ [5]
Статьи об ICQ
SEO [6]
Статьи об оптимизации и раскрутке сайта
Вебдизайн [9]
Все о дизайне сайтов и разработке.
Друзья сайта
  • Все о недвижимости
  • Море софта
  • -->
    Реклама
    Главная » Статьи » Вебдизайн

    Как сделать гостевую книгу на народ.ру со смайлами

    Для использования в гостевой книге смайликов, необходимо в 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>
    Категория: Вебдизайн | Добавил: zaratustra (05.06.2010)
    Просмотров: 401 | Рейтинг: 0.0/0
    Всего комментариев: 0
    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]

    Кнопка
    Если вам понравился наш Сайт, то можете разместить у себя на сайте нашу небольшую кнопку:

    На развитие сайта
    Валюта
    www.megastock.ru
    Статистика
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Поиск
    Полезные ссылки
    >
    Витрина ссылок
    Купить ссылку
    (Цена 5руб.)

    О витрине
    Необходимый софт
    Корзина
    Ваша корзина пуста
    Яндекс цитированияРусский Топ Google-Add.com - Открытый Каталог Сайтов Rambler's Top100