| | | | |||
|
|||
|
|
|||
Главная  Программирование Java Как создать всплывающие подсказки для гиперссылок |
|||
Как создать всплывающие подсказки для гиперссылокОглавлениеКак создать всплывающие подсказки для гиперссылок Страница 2 Страница 1 из 2 Проблема Я видел на одном сайте всплывающие подсказки, появляющиеся на экране при наведении курсора мыши на гиперссылку и выводящие поясняющий текст. Как они делаются? Решение 1 Самый простой способ реализовать всплывающие подсказки для гиперссылок и вообще любых элементов страницы — это поместить текст, который должен выводиться в подсказках, в атрибуты title тегов, с помощью которых создаются элементы страницы. <<Тег> TITLE=<Текст подсказки> [<Другие атрибуты тега>]> Также все объекты, соответствующие элементам страницы, поддерживают свойство title, аналогичное атрибуту title. Это свойство можно использовать для создания всплывающих подсказок программно. В тегах <img>, <area> и <input type= "image"> для тех же целей можно использовать атрибут alt <IMG ALT=<Текст подсказки> [<Другие атрибуты тега>]> и аналогичное ему свойство alt. Пример <Р><А HREF="page1.html" TITLE="Ha страницу 1">Страница 1</А></Р> <Р><А HREF="page2.html" TITLE="Ha страницу 2">Страница 2</А></Р> <Р><А HREF="page3.html" TITLE="Ha последнюю страницу">Страница 3</А></Р> Этот HTML-код создает три гиперссылки, при наведении на которые курсора мыши на экране появятся всплывающие подсказки с текстом, заданным в атрибутах title тегов <а>. Решение 2 Несколько более трудоемкое. Нужно написать две функции — обработчики событий onMouseOver и onMouseOut. Мы помним, что эти события возникают, соответственно, при наведении курсора мыши на элемент страницы (в нашем случае — на гиперссылку) и при "уводе" его прочь. Функция-обработчик события onMouseOver будет выполнять следующие задачи: создаст на Web-странице свободно позиционируемый контейнер, который и станет всплывающей подсказкой, и сделает его скрытым (для этого достаточно присвоить свойству visibility объекта style значение "hidden"); задаст ему подходящие координаты (они, например, могут совпадать с координатами курсора мыши на момент наведения его на элемент страницы, или же вычисляться на основе координат этого элемента); поместит внутрь него нужный текст; сделает его видимым, присвоив свойству visibility объекта style значение "visible". Все, всплывающая подсказка создана! На долю функции-обработчика события onMouseOut выпадет задача много проще — удалить со страницы созданный первой функцией свободно позиционируемый контейнер. И всплывающая подсказка пропадет. Здесь возможны варианты. Так, свободно позиционируемый контейнер, который и станет всплывающей подсказкой, можно создавать отдельно, специальным сценарием, помещенным в заголовок страницы (в тег <head>). А описанные выше функции — обработчики событий onMouseOver И onMouseOut будут только делать его видимым и скрывать. Такие подсказки будут выводиться на страницу быстрее, поскольку не придется каждый раз создавать их "с нуля". На заметку На сайте института (http://life.vgi.voIsu.ru), в котором работает автор, также реализованы всплывающие подсказки. Но только там они перемещаются вслед за курсором мыши. На взгляд автора, это неудобно — ну кому понравится, если текст подсказки елозит вслед за мышью!.. Его и прочитать толком не удастся... Можно вообще не использовать свободно позиционируемые контейнеры, а выводить текст подсказок в какой-либо абзац или ячейку таблицы. Но, согласитесь, "плавающие" над страницей "окошки" с текстом выглядят и нагляднее, и эффектнее. Особенно для нас, привыкших к красивым всплывающим подсказкам Windows. Пред. - След. » |
Архив статей
СИ-БИ техника
КВ техника УКВ техника Радиоизмерения Защита от TVI Источники питания Софт Расчеты Справочники СИ-БИ техника
|
||
