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