Как сделать всплывающие подсказки на сайте

Как сделать всплывающие подсказки на сайте

В Интернете существует огромное количество сайтов, на которых размещено еще большее количество всевозможных элементов: графика, текст, гиперссылки, формы и пр. И не всегда визуально они дают пользователю исчерпывающую информацию о своем назначении. С этой целью и применяются всякого рода подсказки: текстовые и графические, статичные и динамичные, стандартные всплывающие подсказки в браузере и управляемые самим пользователем, реализованные с помощью JavaScript. Вариантов снабжения посетителя веб-ресурса подсказками очень много и они постоянно пополняются новыми решениями в этой области. Посему и я, в завершении сегодняшнего выпуска, хочу поделиться с вами еще одним приемом создания подсказок.

Суть приема в следующем: пользователь наводит курсор мыши на определенную ссылку (текстовую или графическую) и, не убирая курсор, может видеть описание ссылки (или любой другой текст) в появляющемся окне, которое исчезает как только курсор будет перемещен за пределы гиперссылки. Сначала в раздел BODY вставляется следующий код:

<script language=»JavaScript»>
<!—
var m1,m2,m3
m1=»ПОДСКАЗКА 1″
m2=»ПОДСКАЗКА 2″
m3=»ПОДСКАЗКА 3″

var newwin;

function closep()
{
newwin.close();
}

function msg(num)
{
newwin=window.open(«»,»min»,»width=263 height=181″);
newwin.document.write(«<FONT FACE=’Arial’ SIZE=’2′>»)
newwin.document.write(eval(«m»+num))
newwin.document.write(«</FONT>»)
}
// —>
</script>

где var m1,m2,m3 — переменные для каждого окна с подсказкой;

newwin.close(); — функция закрытия окна при перемещении курсора за пределы ссылки;

function msg(num) — функция вывода сообщений в окнах-подсказках (размеры окон можно менять по желанию);

Теперь в код ссылок, при наведении курсора на которые появляются окна-подсказки, нужно добавить события onMouseOver (с указанием номера сообщения) и onMouseOut (с привязкой к функции закрытия окна closep):

<a href=»#» onmouseout=»closep()» onmouseover=»msg(1)»>ССЫЛКА 1</a>
<a href=»#» onmouseout=»closep()» onmouseover=»msg(2)»>ССЫЛКА 2</a>
<a href=»#» onmouseout=»closep()» onmouseover=»msg(3)»>ССЫЛКА 3</a>

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Наши контакты

⚑ г. Москва Пресненская наб.
стр.12 (Башня Федерация).


☏ +7(495) 908-63-63
✉️ mail@vebpro.ru
Яндекс.Метрика

Дизайн-студия и агенство интернет рекламы vebpro.ru © 2019 – Все права защищены