У меня имеется вот такое меню:
Мне нужно, что бы при нажатии на кнопку, свойство в css менялось с background-position: left x px top 0px на background-position: left x px top 32px, и сразу же на background-position: left x px top -32px. Так как для кнопок я использую один png:
При этом после нажатия на другую кнопку, предыдущая возвращалась к начальному background-position.
У меня получилось сделать изменение свойства только один раз, т.к. setTimeout() не сработал. При этом после нажатия на кнопку она навсегда остаётся "зажатой".
Мой код HTML
<div class="buttons">
<div class="btn_1" onclick="change_btn_1(this)"></div>
<div class="btn_2" onclick="change_btn_2(this)"></div>
<div class="btn_3" onclick="change_btn_3(this)"></div>
</div>
CSS
.buttons {
position: absolute;
z-index: 1;
width: 196px;
height: 32px;
}
.btn_1 {
position: absolute;
left: 4px;
width: 60px;
height: 32px;
background-image: url(../images/body_buttons.png);
background-position: left 0px top 0px;
}
.btn_2 {
position: absolute;
left: 68px;
width: 60px;
height: 32px;
background-image: url(../images/body_buttons.png);
background-position: left -60px top 0px;
}
.btn_3 {
position: absolute;
left: 132px;
width: 60px;
height: 32px;
background-image: url(../images/body_buttons.png);
background-position: left 60px top 0px;
}
JS
function change_btn_1(ind) {
ind.style.backgroundPosition = "left 0px top 32px";
ind.style.backgroundPosition = "left 0px top -32px";
}
function change_btn_2(ind) {
ind.style.backgroundPosition = "left -60px top 32px";
ind.style.backgroundPosition = "left -60px top -32px";
}
function change_btn_3(ind) {
ind.style.backgroundPosition = "left 60px top 32px";
ind.style.backgroundPosition = "left 60px top -32px";
}