Functiondo_submenu(x)

{

if(subold) { hide_layer(subold); subold=""; }

if(x) { show_layer(x); subold=x; }

}

</script>

<div id="m1" class="menu" style="left: 5;">

<table bgcolor="#ffffcc" cellspacing="0" cellpadding="2" border="1" width="115">

<tr><td><a href="javascript:do_menu('m1x')" onmouseover="do_check('m1x')"><b>Системы</b></a></td></tr></table> </div>

<div id="m1x" class="submenu" style="left:5;">

<table bgcolor="#ffffcc" cellspacing="0" cellpadding="2" border="1" width="115">

<tr><td>

<a href="http:// ">Windows</a><br>

<a href="http:// ">Mac</a><br>

<a href="http:// ">Unix</a><br>

</td></tr></table> </div>

<div id="m2" class="menu" style="left:120;">

<table bgcolor="#ffffcc" cellspacing="0" cellpadding="2" border="1" width="100">

<tr><td><a href="javascript:do_menu('m2x')" onmouseover="do_check('m2x')"><b>Software</b></a>

</td></tr></table> </div>

<div id="m2x" class="submenu" style="left:120;">

<table bgcolor="#ffffcc" cellspacing="0" cellpadding="2" border="1" width="100">

<tr><td>

<a href="http:// "onmouseover="do_submenu('m21x')">Work</a>&gt;&gt;<br>

<a href="http:// ">Tools</a><br>

<a href="http:// "onmouseover="do_submenu('m22x')">Spiele</a>&gt;&gt;

</td></tr></table> </div>

<div id="m21x" class="submenu" style="left: 180;top:24; z-index:1;">

<table bgcolor="#ffffcc" cellspacing="0" cellpadding="2" border="1" width="100">

<tr><td>

<a href="http://">Star Office</a><br>

<a href="http://">Communicator</a><br>

<a href="http://">Photoshop</a>

<a href="http://">Freehand</a>

</td></tr></table> </div>

<div id="m22x" class="submenu" style="left: 180; top:58; z-index:1;">

<table bgcolor="#ffffcc" cellspacing="0" cellpadding="2" border="1" width="100">

<tr><td>

<a href="http://">Tomb Raider</a><br>

<a href="http://">Quake</a><br>

<a href="http://">Swing</a>

</td></tr></table> </div>

<div id="m3" class="menu" style="left:220;">

<table bgcolor="#ffffcc" cellspacing="0" cellpadding="2" border="1" width="100">

<tr><td><a href="javascript:do_menu('m3x')" onmouseover="do_check('m3x')"><b>Hardware</b></a>

</td></tr></table> </div>

<div id="m3x" class="submenu" style="left:220;">

<table bgcolor="#ffffcc" cellspacing="0" cellpadding="2" border="1" width="100">

<tr><td>

<a href="http:// ">PC</a><br>

<a href="http:// ">Mac</a><br>

<a href="http:// ">Amiga</a><br>

<a href="http:// ">UNIX</a>

</td></tr></table> </div>

Результат выполнения этого кода браузером представлен на рис. 5.6.

Рис. 5.6. Внешний вид Web-страницы с динамическим меню

В представленном примере в контейнере <style></style> размещены стили позиционирования элементов основного меню и подменю.

В контейнере <script></script> находятся унифицированные функции сценария формирования динамического меню. Входным параметром x для функций является имя управляемого объекта.

Управляемыми объектами являются именованные контейнеры слоев <div></div>. Внутри каждого слоя размещена таблица с пунктами соответствующего меню и гиперссылками. Таблица используется для цветового оформления фона и рамок меню и подменю.

В рассматриваемом примере используется три слоя основного меню с именами m1, m2, m3. Слои подменю имеют соответственно имена m1x, m2x, m3x. Кроме этого в качестве примера во втором пункте меню имеется два подменю второго уровня с именами слоев соответственно m21x и m22x.

Данный пример может быть изменен до любого количества пунктов основного меню и подменю различной степени вложенности. Необходимо только помнить, что каждый новый слой должен иметь уникальное имя. Можно использовать принятую в образце систему именования слоев. При этом в контейнере с функциями ничего менять не надо.

Упражнение 4. На основе рассмотренного в упражнении 3 примера сформировать динамическое меню с основными пунктами по номерам рядов в компьютерном классе и подменю с фамилиями студентов на этих рядах. Гиперссылки с фамилий выполнить на имеющиеся страницы с портретами этих студентов, открываемые в новых окнах. В контейнере со стилями задать также стиль для тега гиперссылки а. Результат продемонстрировать преподавателю.

Рис. 4.7. Пример HTML кода таблицы с динамически меняющимся содержимым в ячейке с именем student

· убедиться, что в режиме браузера при наведении мыши на ячейки с фамилиями студентов меняется изображение в ячейке с именем student. Результат продемонстрировать преподавателю.

Упражнение 6. Создать новую страницу «Моя группа» и сохранить ее в файле kr2.html. На этой странице на основе предыдущего примера создать список студентов группы в виде меню, так чтобы при наведении мыши на фамилии появлялся указывающий палец (как при гиперссылке) и появлялись портреты этих студентов в соседней фиксированной области страницы.

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

Под каждой фотографией сформировать появление подписи с фамилией, именем и отчеством студента и его должности в Вашем банке.

Установить минимальные ширину и высоту объединенной ячейки такими, чтобы при смене изображения структура таблицы не менялась (не дергалась).

Не нашли, что искали? Воспользуйтесь поиском: