Привязка поведений к тексту

Привязка поведений к тексту

Мы знаем, как привязать поведение к элементу страницы, например гиперссылке или графическому изображению. Но что делать, если мы хотим привязать его, к фрагменту текста в абзаце?

Если вы готовы пожертвовать совместимостью с Navigator, можете использовать такой прием:

<Р>Это <SPAN onClick="doSomething();">текст, по которому можно щелкать</span>.</Р>

function doSomething() {

Что-то делаем. .. }

Как видите, нужный фрагмент текста выделен тегом <SPAN> и привязан к этому тегу обработчик события onclick. Это работать будет, но только в Internet Explorer. Этот Web-обозреватель предоставляет Web-программисту доступ к любому элементу страницы и, соответственно, может обрабатывать события, происходящие в них.

Это можно сделать и в среде Dreamweaver, воспользовавшись диалоговым окном Tag Chooser. Выделите нужный фрагмент текста и выберите пункт Tag меню Insert или нажмите комбинацию клавиш <Ctrl>+<E>. В левом списке окна Tag Chooser разверните ветвь HTML Tags и выберите пункт Formatting and Layout, далее выберите в правом списке пункт span и нажмите кнопку Insert. После этого выделенный вами фрагмент текста будет "взят" в тег <SPAN>. Вы можете поставить в него текстовый курсор и привязать к нему любое поведение.

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

<FONT SIZE="+2" onClick="doSomething();">Это текст, по которому можно щелкать. </FONT>

И в этом случае Dreamweaver придет вам на помощь. Вам останется только поставить текстовый курсор на нужный текст и создать поведение.

Но это будет работать только в Internet Explorer.

У Navigator поддержка Web-программирования значительно ограничена. Он дает доступ к ограниченному набору элементов: гиперссылкам, графическим изображениям, внедренным элементам, фреймам, свободно позиционируемым элементам и еще кое-чему. К обычным абзацам текста и уж тем более элементам <SPAN> нашему брату Web-программисту путь заказан.

Что делать?

Есть один способ. Если уж Navigator требует гиперссылки, дадим ему гиперссылку.

Взгляните на следующий код:

<Р>Это <А HREF="javascript:;" onClick="doSomething();">текст, по которому можно щелкать</А>.</Р>

Мы преобразовали нужный нам фрагмент текста в гиперссылку, привязали к ней обработчик события onclick. В качестве значения интернет-адреса мы задали "javascript: ;", чтобы Web-обозреватель при щелчке по такой гиперссылке никуда не переходил. Можете проверить — такой код будет работать и в Internet Explorer, и в Navigator.

Чтобы созданная нами гиперссылка совсем уж не походила на гиперссылку, вы можете вставить в Тег <А> стиль. Задайте атрибуту стиля text-decoration значение попе, чтобы отключить подчеркивание, а атрибуту color — значение цвета вашего текста. И пусть после этого кто-нибудь скажет, что это гиперссылка!

Конечно, все вышеописанные манипуляции вы можете выполнить и в среде Dreamweaver. Вы можете ввести текст javascript:; в поле ввода Link редактора свойств, поставить в только что созданную гиперссылку текстовый курсор и воспользоваться панелью Behaviors. Автор описал все это в HTML, чтобы вам было понятнее.

Содержание раздела