|    | 
СИ-БИ техника | КВ техника | УКВ техника | Радиоизмерения | Защита от TVI | Источники питания | Софт | Расчеты | return_links(); ?>
Справочники
Главная arrow Программирование arrow Java arrow Как создать всплывающие подсказки для гиперссылок  

Как создать всплывающие подсказки для гиперссылок

Оглавление
Как создать всплывающие подсказки для гиперссылок
Страница 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.


Пред. - След. »


CitRadio.com - Электроника и компьютеры

0.1643