Введение в JavaScript
[+]
Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 23397 / 4440 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Темы: Интернет-технологии, Программирование
Специальности: Программист, Разработчик интернет-проектов
Теги: alerter, cookie, cookies, href, HTM, html, java, javascript, locate, navigation, onclick, submit, браузеры, графика, мультипликация, отправка данных, парсеры, потоки, серверы, скрипты, фрейм, элементы
Лекция 7:

Программируем графику
A
|
версия для печати
< Лекция 6 || Лекция 7: 1234 || Лекция 8 >

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

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

Пример 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. Горизонтальное меню (пункт указан стрелкой)
Горизонтальное меню (пункт указан стрелкой)

Рис. 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 и поле статуса)
Горизонтальное меню (атрибут ALT и поле статуса)

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

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

Вложенные меню

В HTML нет стандартного способа реализации вложенных меню. Тем не менее за счет графики можно создать их подобие. При этом следует понимать, что место, на которое ложится графика, нельзя заполнить текстом.

Пример 7.11. В этом примере вложенное меню расположено справа от основного. Эффект вложенности достигается за счет изменения цвета (подпункты имеют цвет, отличный от цвета пунктов).

<SCRIPT>
function submenu(a)
{
 with(document)
 {
  if(a==1)
  {
   item1.src="item_1_yes.gif"; // 1-й пункт активен
   item2.src="item_2_no.gif";  // 2-й пункт неактивен
   subi1.src="item_1_1.gif";   // 1-й пункт вложенного меню 1
   subi2.src="item_1_2.gif";   // 2-й пункт вложенного меню 1
  }
  if(a==2)
  {
   item1.src="item_1_no.gif";  // 2-й пункт активен
   item2.src="item_2_yes.gif"; // 1-й пункт неактивен
   subi1.src="item_2_1.gif";   // 1-й пункт вложенного меню 2
   subi2.src="item_2_2.gif";   // 2-й пункт вложенного меню 2
  }
 }
}
</SCRIPT>

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=1>
<TR>
<TD><A HREF="javascript:void(0);" onMouseOver="submenu(1);">
    <IMG BORDER=0 NAME=item1 SRC=item_1_yes.gif></A></TD>
<TD><IMG BORDER=0 NAME=subi1 SRC=item_1_1.gif></TD></TR>
<TR>
<TD><A HREF="javascript:void(0);" onMouseOver="submenu(2);">
    <IMG BORDER=0 NAME=item2 SRC=item_2_no.gif></A></TD>
<TD><IMG BORDER=0 NAME=subi2 SRC=item_1_2.gif></TD></TR>
</TABLE>
7.14. Вложенное меню (пункт выделен цветом)
Вложенное меню (пункт выделен цветом)

Рис. 7.10. Вложенное меню (пункт выделен цветом)

Подчиненность меню можно подчеркнуть изменением его положения относительно основного меню (составьте соответствующий код самостоятельно):

Вложенное меню (пункт выделен сдвигом)

Рис. 7.11. Вложенное меню (пункт выделен сдвигом)

В этом случае для продвижения меню вниз необходимо зарезервировать место при помощи невидимых или видимых картинок.

При использовании слоев можно создать настоящее выпадающее меню.

Дальше >>
< Лекция 6 || Лекция 7: 1234 || Лекция 8 >

Вопросы и ответы

вопросов: 6
Валерий Банатин
Валерий Банатин

function f() { var i=5; k=7; } f(); alert(k);

В примере выдается результат k=7, однако, хоть переменная и не объявлена, она внутри функции, т.е. локальная и не должна быть видима, или вторая и последующие все-таки становятся глобальными?

ответить
Дамир Кантюков
Дамир Кантюков

Изучаю курс введение в JavaScript. 4 уроке есть код, где метод присвоен переменной, почему у меня не работает, браузер гугл:

<HTML><HEAD> <SCRIPT> wid = window.open('','','width=750,height=100,status=yes'); wid.document.open(); R = wid.document.write; R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>'); R('<BODY><H1>Новое окно</H1></BODY></HTML>'); wid.document.close(); </SCRIPT> </HEAD> <BODY> <A HREF="javascript: wid.t=window.prompt('Новое состояние:',''); wid.document.write(wid.t); wid.focus(); void(0);" >Изменим значение переменной t в новом окне</A> </BODY></HTML>

ответить