Подсветка кнопки
 

Я понимаю, вопрос глупый, наверняка уже задавался, так что сильно не бейте :)

В общем у меня есть некий контейнер в роли кнопки, с пиктограммой на нём в виде стрелочки. Я хочу при наведении мышкой менять картинку на стрелочку другого цвета. Привязываю обработчики. И всё бы хорошо, да вот только DIV воспринимает движение мышью по пиктограмме как уход указателя и срабатывает mouseOut. Пробовал смотреть координаты события через объект event (в IE), не вышло, потому что координаты DIV-а не поределились. Пытался также привязать идентичный обработчик к пиктограмме, но тут проблема в том, что из-за всплытия обработчик родителя срабатывает позже, и моя "коррекция" улетает в трубу. Насколько я знаю, в IE невозможно принудительно задать обратный порядок обработки (перехват). Что в таких случаях нужно делать? :(

Есть правда мысль при вызове обработчика на картинке флажок ставить... но как-то вроде не вполне изящно)

курить бамбук:D

Это делается через CSS. Javascript тут вообще ни к чему. :hover, :active в помощь.

.some-container .button {
    background: url(../img/arraw.png) no-repeat 0 0;
}

.some-container .button:hover {
    background-image: url(../img/arrow-active.png);
}

Спасибо, я думал так можно только со ссылками)

Теперь следующая проблема: я не могу поменять фон самой кнопки, так как прозрачная почти целиком кроме треугольника иконка становится фоном, и поэтому в CSS нельзя указать фоновый цвет; в результате всё кроме стрелочки получается белым. Пробовал заворачивать всю кнопку в дополнительный DIV, не помогает :(

Я бы конечно мог сделать фоновую картинку больше, залить её серым фоном... Но это как-то кхм...(
К тому же, я изначально вообще не предполагал, что картинка будет фоном, а хотел внедрять её внутрь как изображение.

А что в чем лежит? Можно HTML привести?

<table id="names">...</table>
<div class="nav" id="prev"></div>
<div id="marks"><table id="marksTable">...</table></div>
<div class="nav" id="next"></div>

Это классный журнал. Войти если интересно можно тут: http://popov654.pp.ru/livemarks/
Логин admin, пароль test

Ну а картинка пока как бэкграунд к элементам #prev и #next...

Так а в чем проблема? Можно же одновременно указывать и цвет background-color, и фоновое изображение.

#next {
    left: 96%;
    background: *!*#DCDCDC*/!* url('next.png') no-repeat 0 33px;
}

А почему тогда не работает так?

.nav {
    position: absolute;
    display: block;
    background-color: #BABABA;
    top: 70%;
    height: 60px;
    width: 20px;
    border: 1px solid #333333;
    padding-top: 32px;
}
#prev {
    left: 34%;
    background:url('prev.png') no-repeat 0 33px;
}
#prev:hover{
    background:url('prev2.png') no-repeat 0 33px;
}
#next {
    left: 96%;
    background:url('next.png') no-repeat 0 33px;
}
#next:hover{
    background:url('next2.png') no-repeat 0 33px;
}

Но Ваш вариант пошёл, спасибо)

Селекторы различаются по весу. При прочих равных условиях id (#) имеет больший вес, чем класс (.). Это значит, что background-color, заданный в .nav, не перебьет background-color, заданный в #next. Ты спросишь, но ведь в #next background-color не указан. Ответ - да, не указан явно. Если в определении background отсутствует явное указание цвета, то принимается значение по умолчанию, в данном случае значение initial.

Спасибо) Про приоритет я вроде знал, но не думал, что так получится если явно не указывать :)
Не очень удобная особенность, писать приходится больше)