Вертикальные и горизонтальные меню

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

<table border=0 cellpadding=0 cellspacing=0 align=center>
<tr>
<td><img name=e0 src=../images/main/blank.gif width=20 height=10 border=0></td>
...
</tr>
<tr>
<td><a href="javascript:void(0);" onMouseover="document.e0.src='../images/jsi/arrowdw.gif';return true;" onMouseout="document.e0.src='../images/main/blank.gif';return true;" ><img src=../images/jsi/desk.gif border=0 border=0></a></td>
...
</tr>
</table>

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

Краткое описание Содержание Конспект Справочник Практика Тесты Консультации Расписание Подписка

Английский текст в поле статуса приведен по причине существования нелокализованных браузеров или операционных систем у пользователя. В этом случае у него есть возможность так или иначе узнать назначение иконки меню, если он, конечно, обратит внимание на изменение содержания поля статуса (Вы сами обратили на это внимание без подсказки? :-). Значит нужно сделать так, чтобы оно шевелилось.)

Посмотрим теперь на реализацию вертикального меню, построенного на основе графических блоков текста, как это принято в настоящее время:

<td><a href="javascript:void(0);"
onMouseover="document.evente.src='../images/jsi/corner.gif';"
onMouseout="document.evente.src='../images/jsi/clear.gif';"
><img src=../images/jsi/eventep.gif border=0></a></td>
<td><a href="javascript:void(0);
onMouseover="document.evente.src='../images/jsi/corner.gif';"
onMouseout="document.evente.src='../images/jsi/clear.gif';"
><img name=evente src=../images/main/blank.gif></a></td>

При движении мыши у соответствующего компонента меню "отгибается уголок". В данном случае "уголок" - это самостоятельная картинка. Все уголки реализованы в правой колонке таблицы. Для того чтобы гипертекстовая ссылка срабатывала по обеим картинкам(тексту и "уголку") применяются одинаковые контейнеры A, охватывающие графические образы. В этом решении есть один недостаток: при переходе от текста к "уголку" последний "подмигивает". Картинки можно разместить и в одной ячейке таблицы, но тогда нужно задать ее ширину, иначе при изменении размеров окна браузера картинки могут "съехать". Для победы над подмигиванием необходимо сделать полноценные картинки замены:

Подмигивание происходит при переходе с одного элемента разметки контейнера на другойу. При этом заново определяются свойства отображения элемента.


начало страницы