Зарегистрироваться | Забыли пароль


Для начинающих

bottom

Уроки

bottom

Полезное

bottom

Файлы

bottom

Ссылки

bottom

Главная страница » Уроки по JavaScript

Вставка смайликов в форму

Путешествуя по интернету, Вы наверняка встречались с сайтами, на которых можно комментировать статьи или какие-нибудь материалы. Ведь каждый автор хочет знать, что думают люди о его статьях и сайте в целом. Простые текстовые комментарии это уже хорошо, но было бы гораздо интереснее, если бы люди могли выражать свои эмоции с помощью смайликов улыбочек. Конечно, их можно просто ввести с клавиатуры, но не каждый захочет это делать, поэтому я покажу Вам один скрипт, который поможет в этом. Все что вам потребуется – это картинки смайликов и JavaScript , которые можно скачать по ссылке выше.  Помещаем их в папку, например, smail . Теперь между тегами <head></head> подключим скрипт для работы со смайликами:

Пример

<script type="text/javascript" src="smail/smail.js"></script>

Теперь создадим форму и добавим вставку смайликов:

<form action="#" method="post" name="forma">
<label>Ваше имя: </label>
<input name="author" type="text" size="30"><br>
<label>Текст комментария:</label><br>
<textarea name="text" rows="5" cols="50" id="comment"></textarea><br>

<a href="javascript:%20x()" onclick="DoSmilie(' :-)) ');">
<img
src="smail/big_grin.png" alt="Очень доволен">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :-) ');">
<img
src="smail/happy.png" alt="Улыбается">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :-| ');">
<img
src="smail/dumbfounded.png" alt="Грустный">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' 8-P ');">
<img
src="smail/crazy.png" alt="Ржу">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :-] ');">
<img
src="smail/appalled.png" alt="Озадачен">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' ;-( ');">
<img
src="smail/evil.png" alt="Недоволен">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :-o ');">
<img
src="smail/pipe.png" alt="Не причем">
</a>

<a href="javascript:%20x()" onclick="DoSmilie(' :sleep: ');">
<img
src="smail/sleep.png" alt="Сплю">
</a>
<br><br>
<input type="submit" value="Добавить комментарий"> </form>  

Теперь сохраняем страницу и смотрим, должна появится форма и под ней изображения смайликов, при нажатии на которые, в форму подставляются текстовые смайлики. Каждая строчка ссылка с изображением отвечает за свой смайлик и их может быть сколько угодно много. Если Вы хотите чтобы в форму подставлялось другие символы то измените их в параметре onclick. Так что если у Вас на сайте есть возможность оставлять комментарии, можете использовать этот скрипт. А как заменять текстовые смайлики на графические Вы можете посмотреть в уроке Замена текстовых смайликов на графические.

Ну вот и все на сегодня!

Автор: Евгений Бочкарев · Урок добавлен: 7 Августа 2009 в 16:57 · Просмотров: 1046

Рекомендую
  • Currently 4.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

Рейтинг: 4.0/5 (всего 2 голоса)

Понравился сайт? Внесите свой вклад в его развитие?
R314489888859
41001346159934




   Комментарии к уроку (2)

12
Александр    Добавлено: 05-05-2010 в 18:24
Замечательный урок, обязательно им воспользуюсь!
 
34
12
Стас    Добавлено: 26-12-2010 в 01:28
Спасибо большое. Как раз искал решения для своего форума (движок ExpressionEngine). Все просто и понятно
 
34
12

   Добавить комментарий


Ваше имя:


Текст комментария:

Получать уведомления по Email могут только зарегистрированные пользователи. Регистрация
Введите цифры с картинки


 
34