Все мы видели сотни сайтов, которые используют меню с подсветкой, построенные из изображений. Это красиво, но грузятся такие сайты долго, особенно на наших медленных линиях. Есть замечательное решение - использовать каскадные таблицы стилей (CSS).

LENIN INC

Microsoft MSDN

List SOFT

Для создания такого меню нужно подготовить описание классов для нормального и выделенного его пунктов:

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

Далее напишем небольшую программу (Script), которая будет открывать ссылки:

<SCRIPT LANGUAGE="JavaScript">  function doClick(url)    {     location.href=url.id;    } </SCRIPT>

А теперь приступим к созданию самого меню:

<table width="150" cellspacing=1 cellpadding=3 align=left bgcolor=navy border=5> <tr><td class=normal id="http://lenininc.narod.ru/" onMouseOver="this.className='selected'" onClick=doClick(this) onMouseOut="this.className='normal'"><font size=2>LENIN INC</font></td></tr><tr> <td class=normal id="http://www.msdn.microsoft.com/default.asp" onMouseOver="this.className='selected'" onClick=doClick(this) onMouseOut="this.className='normal'"><font size=2>Microsoft MSDN</font></td></tr> <tr><td class=normal id="http://www.listsoft.ru/" onMouseOver="this.className='selected'" onClick=doClick(this) onMouseOut="this.className='normal'"><font size=2>List SOFT</font></td></tr> </table>

Каждой ячейке с пунктом меню мы присвоили класс "normal" и уникальный идентификатор, в качестве которого указали адрес для перехода. Кроме того мы назначили следующие обработчики событий:

ONMOUSEOVER - вызывается, когда указатель мыши находиться над ячейкой. Устанавливает класс "selected" для этой ячейки;

ONMOUSEOUT - вызывается, когда указатель мыши покидает пределы ячейки. Устанавливает класс "normal".

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