Листинг 3.14. Всплывающие списки гиперссылок

<FORM><TABLE><TR><TD>

<OL>

<LI onMouseOver=f1()>

<A href='javascript:void(0);'> Группа 1</A></LI>

<UL id='group_1'></UL>

<LI onMouseOver=f2()>

<A href ='javascript :void(0);'> Группа 2</A></LI>

<UL id='group_2'></UL>

<LI onMouseOver=f3()>

<A href =' javascript :void( 0);'> Группа 3</A></LI>

<UL id='group_3'></UL>

</OL>

</TD></TR></TABLE></FORM>

<SCRIPT>

function fl() {

window.group_2.innerHTML=""

window.group_3.innerHTML=""

window.group_1.innerHTML="

<LI onMouseOver=on_select('artl.htm')>

<A href ='artl .htm'>Статья 1</А></LI>

<LI onMouseOver=on_select('art2.htm')>

<A href='art2.htm'>Статья 2</A></LI>

<LI onMouseOver=on_select('art3.htm')>

<A href ='art3 .htm'>Статья 3</A></LI>"

function f2() {

window.group_1.innerHTML=""

window.group_3.innerHTML=""

window.group_2.innerHTML="

<LI onMouseOver=on_select('art4.htm')>

<A href ='art4 .htm'>Статья 4</A></LI>

<LI onMouseOver=on_select('art5.htm')>

<A href ='art5.htm'>Статья 5</A></LI>"

} ;

function f3() {

window.group_1.innerHTML=""

window.group_2.innerHTML=""

window.group_3.innerHTML="

<LI onMouseOver=on_select('art6.htm')>

<A href ='art6.htm'>Статья 6</A></LI>"

} ;

function on_select(name) {

void(name);

} ;

</SCRIPT>

Давайте шаг за шагом разберем предложенный код HTML. Сначала с помощью дескрипторов <FORM>…</FORM>и <TABLE>…</TABLE>мы создаем форму и таблицу внутри формы. В таблицу добавляем единственную строку с одной ячейкой, в которую добавляем элемент нумерованного списка <OL>…</OL>. В нумерованный список добавляем пункты списка и после каждого пункта создаем элементы пустых вложенных маркированных списков с уникальными именами, присвоенными атрибутам id.Заключаем пункты нумерованного списка между дескрипторами <А href = 'javascript:void(0)'>…</А>.В результате пункты будут выглядеть в окне обозревателя, как обычные гиперссылки. Но щелчок на такой ссылке ни к чему не приведет, поскольку атрибуту hrefприсвоено выполнение пустой функции void.Атрибутам onMouseOverпунктов нумерованного списка присвоено выполнение пользовательских функций fl(), f2() и f3(), которые определены в разделе <SCRIPT>...</SCRIPT>.Функция, назначенная атрибуту события, называется функцией обработки события.

Дескрипторы <SCRIT>…</SCRIT> используются для добавления в документ HTML кодов сценариев. Между этими дескрипторами не должно быть никаких дескрипторов HTML, или текста, так как все символы в этом разделе обозреватель пытается интерпретировать как команды сценария.

Определение функции задается ключевым словом function, после которого следует имя функции и код, заключенный в круглые скобки. Каждая строка кода JavaScript заканчивается символом точки с запятой. В коде функции происходит присвоение значений атрибутам innerHTML, о которых вы узнали в предыдущем разделе главы. Программа работает следующим образом.

1. Пользователь наводит указатель мыши на элемент нумерованного списка. При этом происходит событие onMouseOver, вызывающее на выполнение соответствующую функцию.

2. В первых двух строках функция обработки события обнуляет списки ссылок других категорий, присваивая пустые строки атрибутам innerHTML соответствующих маркированных списков.

3. В третьей строке функция создает список ссылок под выбранной категорией, присвоив HTML-код списка атрибуту innerHTML соответствующего маркированного списка.

Пункты маркированных списков являются гиперссылками, так как заключены между дескрипторами <А href ='?'>…</А>. Замените вопросительные знаки на URL-адреса реальных Web-страниц, и ваше меню гиперссылок будет готово к работе.

Нумерованный список был заключен в ячейку таблицы, чтобы ограничить область действия события onMouseOver. Если бы список был добавлен просто в тело Web-страницы, событие onMouseOverсрабатывало бы каждый раз, когда указатель мыши пересекает строку пункта списка по всей ширине страницы.

Пункты всплывающего списка, добавляемые в сценарии JavaScript, выглядят, как обычные гиперссылки (см. рис. 3.15). Но в действительности они не обладают всей функциональностью гиперссылок. После щелчка на пункте списка переход по ссылке не будет выполнен, так как динамически добавленные объекты не поддерживают событие onClick. Единственный способ выполнить переход по ссылке — это щелкнуть на пункте списка правой кнопкой мыши и выбрать в контекстном меню команду Открыть или Открыть в новом окне. Необходимо написать дополнительные сценарии, чтобы придать гиперссылкам требуемую функциональность. Для этого пунктам всплывающего списка назначено выполнение события onMouseOver. Это событие вызывает функцию on_select, которая принимает один аргумент — имя файла и (или) URL-адрес ресурса в Интернет. Сейчас функция не выполняет никаких действий, кроме вызова пустой функции void (). Далее, в главе 5, мы вернемся к этой функции во время рассмотрения разметки Web-страниц с помощью рамок.