русс | укр

Языки программирования

ПаскальСиАссемблерJavaMatlabPhpHtmlJavaScriptCSSC#DelphiТурбо Пролог

Компьютерные сетиСистемное программное обеспечениеИнформационные технологииПрограммирование

Все о программировании


Linux Unix Алгоритмические языки Аналоговые и гибридные вычислительные устройства Архитектура микроконтроллеров Введение в разработку распределенных информационных систем Введение в численные методы Дискретная математика Информационное обслуживание пользователей Информация и моделирование в управлении производством Компьютерная графика Математическое и компьютерное моделирование Моделирование Нейрокомпьютеры Проектирование программ диагностики компьютерных систем и сетей Проектирование системных программ Системы счисления Теория статистики Теория оптимизации Уроки AutoCAD 3D Уроки базы данных Access Уроки Orcad Цифровые автоматы Шпаргалки по компьютеру Шпаргалки по программированию Экспертные системы Элементы теории информации

Выделение выбранного пункта меню


Дата добавления: 2013-12-23; просмотров: 517; Нарушение авторских прав


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

Пример 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. Вертикальное меню (графические блоки текста)



<== предыдущая лекция | следующая лекция ==>
Горизонтальное меню | Что такое cookie


Карта сайта Карта сайта укр


Уроки php mysql Программирование

Онлайн система счисления Калькулятор онлайн обычный Инженерный калькулятор онлайн Замена русских букв на английские для вебмастеров Замена русских букв на английские

Аппаратное и программное обеспечение Графика и компьютерная сфера Интегрированная геоинформационная система Интернет Компьютер Комплектующие компьютера Лекции Методы и средства измерений неэлектрических величин Обслуживание компьютерных и периферийных устройств Операционные системы Параллельное программирование Проектирование электронных средств Периферийные устройства Полезные ресурсы для программистов Программы для программистов Статьи для программистов Cтруктура и организация данных


 


Полезен материал? Поделись:

Не нашли то, что искали? Google вам в помощь!

 
 

© life-prog.ru При использовании материалов прямая ссылка на сайт обязательна.

Генерация страницы за: 0.003 сек.