В прошлом уроке мы написали функции для прятания и показа слоя. Вот они:

function hideLayer(layerName) {eval(layerRef%2B"[""%2BlayerName%2B""]"%2BstyleSwitch%2B".visibility="hidden"");}function showLayer(layerName) {eval(layerRef%2B"[""%2BlayerName%2B""]"%2BstyleSwitch%2B".visibility="visible"");}

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

<style type="text/css">#button1 {POSITION: absolute; Z-INDEX: 10; LEFT: 150; TOP: 60; WIDTH: 423; HEIGHT: 45}#highlight1 {POSITION: absolute; Z-INDEX: 15; VISIBILITY: hidden; LEFT: 150; TOP: 60; WIDTH: 423; HEIGHT: 45}</style><div id="button1"><a href="wd.html"><img src="wd.gif" width=189 height=43 border=0></a></div><div id="highlight1"><a href="wd.html"><img src="wd-g.gif" width=189 height=43 border=0></a></div>

При этом Z-INDEX у пункта меню должен быть больше, чем у подсветки, если мы подсвечиваем "снизу", и меньше, если мы подсвечиваем "сверху" (наш вариант).Ну а теперь воспользуемся событиями onMouseOver и onMouseOut:

<a href="wd.html" onMouseOver="showLayer("highlight1")" onMouseOut="hideLayer("highlight1")"><img src="wd.gif" width=189 height=43 border=0></a><a href="wd.html" onMouseOver="showLayer("highlight1")" onMouseOut="hideLayer("highlight1")"><img src="wd-g.gif" width=189 height=43 border=0></a>

Если используется подсветка "снизу", ссылка у подсветки не нужна:

<a href="wd.html" onMouseOver="showLayer("highlight1")" onMouseOut="hideLayer("highlight1")"><img src="wd.gif" width=189 height=43 border=0></a><img src="wd-g.gif" width=189 height=43 border=0>