Developing.ru

Друзья,
надеюсь кто-то решил проблему, которая завела меня в тупик.

Идея не новая: создал картинку в три раза длиннее пункта меню (ссылок <a>): сперва нормальное состояние, потом для mouseover, потом для выбранного пункта меню. Теперь кладем ее фоном под ссылки и двигаем по горизонтали в соответствии с действиями пользователя.

Средствами CSS mouseover решается легко:

a
{
width: 160px;
background-image: url("images/tab.gif");
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
float: left;
}

a:hover
{
background-position: -160px 0px;
}

Но, вот подсветка выбранного пункта меню... a:active не достаточен ибо он чуть что слетает, например при выделении мышкой текста, а нужно что бы пока пользователь находится в данном пункте меню, данный пункт был выделен.
На JavaScript легко реализовать по onclick сдвиг фоновой картинки, но после этого перестанет работать CSS a:hover...

Вобщем придется видимо отказаться от красивого a:hover и применить JavaScript на onmouseover и onmouseout...

Вот чо получилось
http://www.molniezashhita.ru/