Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Подсветка кнопки (https://javascript.ru/forum/misc/21125-podsvetka-knopki.html)

popov654 30.08.2011 01:53

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

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

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

devote 30.08.2011 01:54

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

ваый 30.08.2011 09:11

Это делается через 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);
}

popov654 30.08.2011 17:57

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

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

popov654 30.08.2011 17:59

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

ваый 30.08.2011 18:30

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

popov654 30.08.2011 20:00

<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

popov654 30.08.2011 20:01

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

ваый 30.08.2011 21:05

Так а в чем проблема? Можно же одновременно указывать и цвет background-color, и фоновое изображение.
#next {
    left: 96%;
    background: *!*#DCDCDC*/!* url('next.png') no-repeat 0 33px;
}

popov654 30.08.2011 23:52

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

.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;
}


Часовой пояс GMT +3, время: 10:50.