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

<tr>

...

</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>

onMouseover="document.e0.src='../images/jsi/arrowdw.gif';return true;"

onMouseout="document.e0.src='../images/main/blank.gif';return true;"

onMouseover="document.e1.src='../images/jsi/arrowdw.gif';return true;"

onMouseout="document.e1.src='../images/main/blank.gif';return true;"

onMouseover="document.e2.src='../images/jsi/arrowdw.gif';return true;"

onMouseout="document.e2.src='../images/main/blank.gif';return true;"

onMouseover="document.e3.src='../images/jsi/arrowdw.gif';return true;"

onMouseout="document.e3.src='../images/main/blank.gif';return true;"

onMouseover="document.e4.src='../images/jsi/arrowdw.gif';return true;"

onMouseout="document.e4.src='../images/main/blank.gif';return true;"

onMouseover="document.e5.src='../images/jsi/arrowdw.gif';return true;"

onMouseout="document.e5.src='../images/main/blank.gif';return true;"

onMouseover="document.e6.src='../images/jsi/arrowdw.gif';return true;"

onMouseout="document.e6.src='../images/main/blank.gif';return true;"

onMouseover="document.e7.src='../images/jsi/arrowdw.gif';return true;"

onMouseout="document.e7.src='../images/main/blank.gif';return true;"

onMouseover="document.e8.src='../images/jsi/arrowdw.gif';return true;"

onMouseout="document.e8.src='../images/main/blank.gif';return true;"

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

onMouseover="window.status='Digest';return true;"

onMouseout="window.status='Document:Done';return true;"

>

onMouseover="window.status='Contents';return true;"

onMouseout="window.status='Document:Done';return true;"

>

onMouseover="window.status='Manual book';return true;"

onMouseout="window.status='Document:Done';return true;"

>

onMouseover="window.status='Reference book';return true;"

onMouseout="window.status='Document:Done';return true;"

>

onMouseover="window.status='Practice tasks';return true;"

onMouseout="window.status='Document:Done';return true;"

>

onMouseover="window.status='Tests';return true;"

onMouseout="window.status='Document:Done';return true;"

>

onMouseover="window.status='Consulting';return true;"

onMouseout="window.status='Document:Done';return true;"

>

onMouseover="window.status='Time table';return true;"

onMouseout="window.status='Document:Done';return true;"

>

onMouseover="window.status='Fellowship';return true;"

onMouseout="window.status='Document:Done';return true;"

>

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

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

<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>

onMouseover="document.evente.src='../images/jsi/corner.gif';" onMouseout="document.evente.src='../images/jsi/clear.gif';" >	onMouseover="document.evente.src='../images/jsi/corner.gif';" onMouseout="document.evente.src='../images/jsi/clear.gif';" >
onMouseover="document.factse.src='../images/jsi/corner.gif';" onMouseout="document.factse.src='../images/jsi/clear.gif';" >	onMouseover="document.factse.src='../images/jsi/corner.gif';" onMouseout="document.factse.src='../images/jsi/clear.gif';" >
onMouseover="document.headse.src='../images/jsi/corner.gif';" onMouseout="document.headse.src='../images/jsi/clear.gif';" >	onMouseover="document.headse.src='../images/jsi/corner.gif';" onMouseout="document.headse.src='../images/jsi/clear.gif';" >
onMouseover="document.intrige.src='../images/jsi/corner.gif';" onMouseout="document.intrige.src='../images/jsi/clear.gif';" >	onMouseover="document.intrige.src='../images/jsi/corner.gif';" onMouseout="document.intrige.src='../images/jsi/clear.gif';" >

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

Картинки можно разместить и в одной ячейке таблицы, но тогда нужно задать ее ширину, иначе при изменении размеров окна браузера картинки могут "съехать". Для победы над подмигиванием необходимо сделать полноценные картинки замены:

onMouseover="document.evente1.src='../images/jsi/eventeb.gif';"

onMouseout="document.evente1.src='../images/jsi/evente.gif';"

>

onMouseover="document.factse1.src='../images/jsi/factseb.gif';"

onMouseout="document.factse1.src='../images/jsi/factse.gif';"

>

onMouseover="document.headse1.src='../images/jsi/headseb.gif';"

onMouseout="document.headse1.src='../images/jsi/headse.gif';"

>

onMouseover="document.intrige1.src='../images/jsi/intrigeb.gif';"

onMouseout="document.intrige1.src='../images/jsi/intrige.gif';"

>

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

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

u="u686.25.spylog.com";d=document;nv=navigator;na=nv.appName;p=1; bv=Math.round(parseFloat(nv.appVersion)*100); n=(na.substring(0,2)=="Mi")?0:1;rn=Math.random();z="p="+p+"&rn="+rn;y=""; y+=""; y+="

"; y+=""; d.write(y);if(!n) { d.write("

Содержание раздела

Menu