Вертикальное меню
Пример 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. В данном примере мы воспользуемся этим для того, чтобы выделить тот пункт меню, над которым находится указатель мыши. Поскольку пункты меню прилегают друг к другу без просветов, то мы будем указывать стрелочкой тот пункт меню, который активен в данный момент.
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR ALIGN="center">
<TD>
<IMG NAME=e1 SRC=empty.gif WIDTH=15 HEIGHT=8 BORDER=0>
</TD>
<!-- аналогично для e2, e3, e4 -->
</TR>
<TR>
<TD><A HREF="javascript:void(0);"
onMouseover="document.e1.src='arrowdw.gif';"
onMouseout="document.e1.src='empty.gif';">
<IMG SRC="horis1.gif" BORDER="0"></A>
</TD>
<!-- аналогично для e2, e3, e4 -->
</TR>
</TABLE>
Пример 7.11. Горизонтальное меню (пункт указан стрелкой) (html, txt)
Рис. 7.7. Горизонтальное меню (пункт указан стрелкой)
Стрелочка бежит точно над тем элементом, на который указывает мышь.
Пример 7.9. Однако стоит заметить, что применение атрибута ALT у контейнера IMGи его дублирование в строке статуса является гораздо более информативным, чем добавление нового графического элемента. Правда, отображается содержание ALTс некоторой задержкой:
<PRE>
<A HREF="courses.htm" onMouseOut="window.status='';"
onMouseOver="window.status='Мои курсы';return true;"><IMG
SRC="horis1.gif" BORDER=0 ALT="Мои курсы"></A><A
HREF="setting.htm" onMouseOut="window.status='';"
onMouseOver="window.status='Настройки';return true;"><IMG
SRC="horis2.gif" BORDER=0 ALT="Настройки"></A><A
HREF="baskets.htm" onMouseOut="window.status='';"
onMouseOver="window.status='Корзина';return true;"><IMG
SRC="horis3.gif" BORDER=0 ALT="Корзина"></A><A
HREF="thehelp.htm" onMouseOut="window.status='';"
onMouseOver="window.status='Помощь';return true;"><IMG
SRC="horis4.gif" BORDER=0 ALT="Помощь"></A>
</PRE>
Пример 7.12. Горизонтальное меню (атрибут ALT и поле статуса) (html, txt)
Рис. 7.8. Горизонтальное меню (атрибут ALT и поле статуса)
Пример 7.10. Посмотрим теперь на реализацию вертикального меню, построенного на основе графических блоков текста:
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<SCRIPT>
for(i=1; i<5; i++)
{ var
ileft = '<IMG SRC=block'+i+'.gif border=0>',
iright = '<IMG NAME=e'+i+' SRC=clear.gif border=0>',
isrc = 'document.e'+i+'.src',
alink = '<A HREF="javascript:void(0);" '+
'onMouseover="'+isrc+'=\'corner.gif\';" '+
'onMouseout="'+ isrc+'=\'clear.gif\';">';
document.write('<TR>'+
'<TD>'+ alink + ileft + '</A></TD>'+
'<TD>'+ alink + iright + '</A></TD>'+
'</TR>');
}
</SCRIPT>
</TABLE>
Пример 7.13. Вертикальное меню (графические блоки текста) (html, txt)
Здесь продемонстрировано типичное применение JavaScript - многократное генерирование похожих фрагментов HTML-кода с помощью цикла и методаdocument.write(). В данном примере с помощью цикла мы генерируем HTML-фрагмент следующего вида (каждый раз с разным номером вместо "1"):
<TR>
<TD><A onMouseover="document.e1.src='corner.gif';"
onMouseout="document.e1.src='clear.gif';"
HREF="javascript:void(0);"><IMG SRC=block1.gif border=0></A></TD>
<TD><A onMouseover="document.e1.src='corner.gif';"
onMouseout="document.e1.src='clear.gif';"
HREF="javascript:void(0);"><IMG NAME=e1 SRC=clear.gif border=0></A></TD>
</TR>
При движении мыши у соответствующего пункта меню, попавшего в фокус мыши, "отгибается уголок". В данном случае "уголок" - это самостоятельная картинка. Все уголки реализованы в правой колонке таблицы. Для того чтобы гипертекстовая ссылка срабатывала по обеим картинкам (тексту и "уголку"), применяются одинаковые контейнеры <A>, охватывающие каждую картинку.
Рис. 7.9. Вертикальное меню (графические блоки текста)