Главная
К библиотеке
Military.com Free Screensavers!

Текстовое меню с "подсветкой".
Все мы видели сотни сайтов, которые используют, так называемые, "навигационные панели с подсветкой", построенные из изображений. Предположим, что нам жутко лень рисовать все эти наборы картинок. Прикрыться мы сможем заботой о пользователе, которому не придется дожидаться пока все наши произведения загрузятся по его дрянной диалапной линии. Есть замечательное решение - использовать каскадные таблицы стилей или проще - CSS. Консорциум W3 на сегодняшний день предлагает нам стандарт CSS2. Internet Explorer поддерживает его более полно, поэтому мы рассмотрим для начала вариант текстовой навигационной панели для него.

Готовим место для меню. Для этого проще всего воспользоваться табличкой такого типа:

О нас
Ссылки
Обратная связь
Подарки и призы

И заготавливаем описание классов для нормального и выделенного пункта меню. Код таблицы выглядит так:

<TABLE BORDER=0 CELLPADDING=3 CELLSPACING=1
 BGCOLOR="navy" ALIGN=LEFT
 STYLE="margin-right: 7px">
<TR><TD ID="1" CLASS="normal"
     ONMOUSEOVER="this.className='selected'"
     ONMOUSEOUT="this.className='normal'"
     ONCLICK="doClick(this)">О нас</TD></TR>
<TR><TD ID="2" CLASS="normal"
     ONMOUSEOVER="this.className='selected'"
     ONMOUSEOUT="this.className='normal'"
     ONCLICK="doClick(this)">Ссылки</TD></TR>
<TR><TD ID="3" CLASS="normal"
     ONMOUSEOVER="this.className='selected'"
     ONMOUSEOUT="this.className='normal'"
     ONCLICK="doClick(this)">Обратная связь</TD></TR>
<TR><TD ID="4" CLASS="normal"
     ONMOUSEOVER="this.className='selected'"
     ONMOUSEOUT="this.className='normal'"
     ONCLICK="doClick(this)">Подарки и призы</TD></TR>
</TABLE>

Описание классов - так: 

<STYLE TYPE="text/css">
   TD.normal {
      color: black;
      font-weight: bold;
      background: #f0f0ff;
      cursor: hand;
   }
   TD.selected {
      color: white;
      font-weight: bold;
      background: navy;
      cursor: hand;
   }
</STYLE>

Каждой ячейке с пунктом меню мы присвоили класс "normal" и уникальный идентификатор (авось пригодится). Кроме того мы указали следующие обработчики событий:
ONMOUSEOVER - вызывается, когда указатель мыши находиться над ячейкой. Устанавливает класс "selected" для этой ячейки;
ONMOUSEOUT - когда указатель мыши покидает пределы ячейки. Устанавливает класс "normal".

Эти два обработчика и создают эффект подсветки. Кроме того мы установили обработчик нажатия на кнопку мыши: ONCLICK. Он вызывает функцию doClik(), которая в данном случае показывает номер выбранного пункта, но может делать и что-то гораздо более функциональное. Все зависит от вашей фантазии. Моя фантазия ограничилась следующим кодом:

<SCRIPT LANGUAGE="JavaScript">
  function doClick( el ) {
    alert("Выбран пункт: " + el.id)
  }
</SCRIPT>

Кстати, содержимое ячеек может быть и гиперссылками, тогда отпадает необходимость в обработчике события ONCLICK, но тогда необходимо менять классы самих ссылок, что несколько сложнее в этом случае.

http://exper.ural.ru/

Hosted by uCoz