Пример 7.6. Теперь попробуем тем же способом реализовать вертикальное меню. При просмотре в некоторых браузерах сплошной вертикальной линии не получается, т.к. высота строки не равна высоте картинки. Подогнать эти параметры практически невозможно. Каждый пользователь настраивает браузер по своему вкусу.
<PRE><IMG SRC=vert.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="courses.htm"><IMG SRC="vert1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A><IMG SRC=vert.gif WIDTH=27 HEIGHT=21 BORDER=0><A HREF="setting.htm"><IMG SRC="vert2.gif" WIDTH=103 HEIGHT=21 BORDER=0></A><!-- далее аналогично для vert3.gif и vert4.gif --></PRE>
Пример 7.9. Вертикальное меню (линия не сплошная) (html, txt)
Рис. 7.5. Вертикальное меню (линия не сплошная)
Пример 7.7. Решение заключается в использовании (вместо контейнера <PRE> ) таблицы <TABLE> с нулевыми границами между ячейками:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0><TR><TD><IMG SRC=vert.gif WIDTH=27 HEIGHT=21 BORDER=0></TD><TD><A HREF="courses.htm"><IMG SRC="vert1.gif" WIDTH=103 HEIGHT=21 BORDER=0></A></TD></TR><!-- далее аналогично для vert2, vert3, vert4.gif --></TABLE>
Пример 7.10. Вертикальное меню (линия сплошная) (html, txt)
Рис. 7.6. Вертикальное меню (линия сплошная)
В данном случае все картинки удается сшить без пропусков и тем самым достичь непрерывности навигационного дерева. Пропуски устраняются путем применения атрибутов BORDER, CELLSPACING и CELLPADDING. Первый устраняет границы между ячейками и вокруг всей таблицы, второй устанавливает расстояние между ячейками равным 0 пикселов, третий устанавливает отступ между границей ячейки и элементом, помещенным в нее, в 0 пикселов.
Практически все, что было изложено до сих пор, касается вопросов построения одноуровневых меню. Поэтому в данном разделе мы постараемся привести более или менее реальные примеры таких меню. Графическое меню удобно тем, что автор может всегда достаточно точно расположить его компоненты на экране. Это, в свою очередь, позволяет и другие элементы страницы точнее располагать относительно элементов меню.
Пример 7.8. В данном примере мы воспользуемся этим для того, чтобы выделить тот пункт меню, над которым находится указатель мыши. Поскольку пункты меню прилегают друг к другу без просветов, то мы будем указывать стрелочкой тот пункт меню, который активен в данный момент.
Стрелочка бежит точно над тем элементом, на который указывает мышь.
Пример 7.9. Однако стоит заметить, что применение атрибута ALT у контейнера IMGи его дублирование в строке статуса является гораздо более информативным, чем добавление нового графического элемента. Правда, отображается содержание ALTс некоторой задержкой:
Пример 7.13. Вертикальное меню (графические блоки текста) (html, txt)
Здесь продемонстрировано типичное применение JavaScript - многократное генерирование похожих фрагментов HTML-кода с помощью цикла и методаdocument.write(). В данном примере с помощью цикла мы генерируем HTML-фрагмент следующего вида (каждый раз с разным номером вместо "1"):
При движении мыши у соответствующего пункта меню, попавшего в фокус мыши, "отгибается уголок". В данном случае "уголок" - это самостоятельная картинка. Все уголки реализованы в правой колонке таблицы. Для того чтобы гипертекстовая ссылка срабатывала по обеим картинкам (тексту и "уголку"), применяются одинаковые контейнеры <A>, охватывающие каждую картинку.
