HTML+CSS+JavaScript

Допустим у меня есть форма! снизу у меня есть смайлики! Как сделать так чтобы при нажатие на смайлик в форме не появлялся код смайлика а изображался сам смайлик :)

Никак. Точнее, способ есть, но только теоретически. И будет он весьма ненадежным.
Можно этот самый смайлик помещать в слой, расположенный выше основного (z-index=1), причем позиционировать его абсолютно, получив (или, точнее, вычислив) координаты последнего введенного символа и расположив смайлик по этим координатам. Одно плохо - чтобы под все браузеры работало - это вряд ли=)

Может тебе дать адрес где это всё работает? если бы сам не видел своими глазами и не использовал каждый день тот сайт то и не спрашивал бы тут :)

1) Вот что значит начитаться устаревших учебников :)
2) будет работать под все браузеры

1) " - Так больше никаких нет. - Вот никаких и не читайте!"

Делать форму в виде <div conteneditable> , а в Мозилле в виде фрейма с атрибутом designMode - так же, как делается в wysiwyg web-based html-редакторах.

Если честно вообще не понял к чему этот текст? Первый раз слышу о таких значениях, а сделать то хочется

Может кто на примере может показать, или ссылку дать где написано как это сделать?

Извините, ошибся в букве - contenteditable . Когда я вижу незнакомое слово, набираю его в поисковике.
Вот основа

<div contenteditable style=width:400;background:#eeeeee id=d1></div> <img src=snow.gif onclick=document.all.d1.innerHTML+=this.outerHTML;>

Работает в IE, а для Мозиллы надо похожий метод (см.кл.слова)

Киналь: да, всё это новое разбросано по статьям, а в учебниках не видел. Разве что на английском Библия Гудмана и JavaScript Programmer's Reference - (ан.) Cliff Wootton, 2001, 2600 стр., 17 МБа. Ссылки на этой странице - http://javascript.aho.ru/article4.shtml . Я, правда, по статьям и документациям всё узнаю, учебники пока напишут, времени много пройдёт.

Хм... С моей отсталой точки зрения (даже безграмотной - книжек по JS в глаза не видел:) ), это не то. Автор темы, насколько я понял, под "формой" подразумевал textarea. А туда картинку вставить, вроде, нельзя. Либо background, либо сверху, как я выше написал. Или я опять не прав?=)

2 midav : Дайте, пожалуйста, ссылку на тот самый ресурс. Интересно посмотреть вживую=)

Туда нельзя. Но кто говорит, что именно её надо использовать? Это как в детской загадке: "Б" простыл, "И" лёг в больницу - одно явление совершенно не запрещает другое : ) (Поясняю - "простыл" - это "имеется форма", "лёг в больницу" - применяется <div contentEditable> .)

ну вот можете посмотреть в файле на скриншот который я сделал! там в текстарею вставляются смайлики :РРРР

Ну вот, ещё один обманутый ... : )

В смысле обманытый???

Дайте лучше ссылку.
А вообще - либо делайте так, как я вам написал во втором посте, либо выдирайте оттуда, откуда видели.

Ну сам портал тут находится, только вы не сможете зарегится, там надо по мобильному телефону! [url]www.one.lv[/url] а в файле тот что я сверху добавил так всё хорошо видно как смайлики в текстарее отображаются! А как вы показали я не особо понял как я это могу применить

:) ну ваш пример действительно работает, только всесто <div> это можно в <textarea> вывести?

В смысле, что рисунки не в текстарии, а скорее всего в фрейме с designMode.

Если пример не даёт подсказки о том, как делать, то дальше рассказывать бесполезно - дело непростое. Проще - воспользуйтесь готовыми бесплатными wysiwyg-редакторами. Будет много лишнего и глючат они регулярно, но красота требует жертв :). Ссылка - http://www.htmlarea.com/directory/Web_Software_Components/WYSIWYG_Editors// Ссылка на форуме (с трудом найдёшь) - http://www.softtime.ru/forum/read.php?id_forum=2&id_theme=8380&page=1

А других вариантов нет? У меня этот верхний вариант работает, но вопрос как его присоединить к форме чтоб данные отсылать?

Мой верхний пример? Он только для IE. Если это будет устраивать, то пересылка данных в форму сделается так (да, все картинки будут в виде тегов, их в таком виде надо будет парсить, если заменять на псевдокоды. Или не заменять, так и хранить.):

<form name=f1 ... onsubmit=f1.text.value=document.all.d1.innerHTML;> <input type=hidden name=text> <div contenteditable style=width:400;background:#eeeeee id=d1></div>  <img src=snow.gif onclick=document.all.d1.innerHTML+=this.outerHTML;>  <input type=submit> </form>

Опера в этой системе вообще не будет работать, поэтому генерируйте код в зависимости от браузера, для Оперы и FF делается textarea, а клик по ссылке должен означать вставку псевдокода.

А адресс обработчика указывать не надо чтоли

Это на ваше усмотрение :)

ну так мне данные надо сохранять в файл, поэтому мне нужен обработчик :)

Так какие проблемы? :) "Хочешь быть счастливым - будь им".
Вообще, отсутствие action тоже имеет смысл - вызыввается скрипт, равный урлу страницы.

а как смайлик будет записываться? Его название будет записываться или надо обработку какую делать?

Это тоже на усмотрение автора.

Пример по теме другим читателям: как делать браузерно совместимый ввод слов и картинок.

<script>     onload=function(){editFrame.document.designMode='on';setTimeout(ff,99);     }     ff=function(){editFrame.focus();}     </script> <iframe name=editFrame style=margins:2 src='javascript:document.write("<body bgcolor=eeeeee topmargin=2 leftmargin=4><basefont face=Verdana></font>");document.close();'></iframe>

Возникают некоторые незадачи: в таком режиме вывода документа ифрейм "не держит" формат шрифта в FF - выводит какой-то Times вместо, скажем, Verdana. IE тоже не держит, но прописанный тег basefont исправляет ситуацию. В общем случае надо что-то придумывать с выводом в правильном формате или вводить реальный документ в src. Этот баг давно почему-то преследует все браузеры - потеря стиля шрифта при src=javascript: .