Форум Сайтостроение Веб-строительство

Смена картинки кнопки при нажатии

mff
На сайте с 21.02.2008
Offline
282
mff
4863

Научите дурака. Сколько лет не знаю как сделать простую сменю картинки кнопки.

Есть код: 

<a href="javascript: void();" onclick=""><img id="widget_country_button_i" src="images/widget_country_button_on.png" width="37" height="37" alt="On" title="Выдвинуть вкладку" /></a>
мне нужно сделать так, чтоб при первом нажатии рисунок кнопки менялся на widget_country_button_off.png, а при втором нажатии обратно на widget_country_button_on.png. Как это грамотно сделать?
Управление репутацией в сети: https://timbook2.ru/
C
На сайте с 04.02.2005
Offline
291
Chukcha
#1

Переделать код кнопки

<a href="javascript: void();" onclick="" class="off"></a>

.on, .off {display:inline:block; width:37px; heigt:37px; }

.off {

background:url(images/widget_country_button_on.png) no-repeat 0 0

}

.on {

background:url(images/widget_country_button_on.png) no-repeat -37px 0

} 

$('.off').click(function(){

  var class = $(this).attr('class');

  if (class=='off') {

     $(this).removeClass('off').addClass('on');

  } else {

     $(this).removeClass('on').addClass('off');

  }

})

Не проверял

Милованов Ю.С
На сайте с 24.01.2008
Offline
196
Милованов Ю.С
#2

<script type="text/javascript">

var counter = 0;

function changeImage(id)

{

if (counter == 0)

{

document.getElementById('widget_country_button_i').setAttribute('src', 'images/image2.png');

counter = 1;

}

else

{

document.getElementById('widget_country_button_i').setAttribute('src', 'images/image1.png');

counter = 0;

}

}

</script>

<a href="javascript: void();" onclick="changeImage();"><img id="widget_country_button_i" src="images/widget_country_button_on.png" width="37" height="37" alt="On" title="Выдвинуть вкладку" /></a>

Можно на Jquery еще(уверен на 100%), но искать в лом;)

UPDATE: ну че уж, пусть будет и этот вариант.

Подпись))
Опять помогаем составить ФАК, Как закрыть индексацию счетчика Стоит ли закрывать код
C
На сайте с 04.02.2005
Offline
291
Chukcha
#3

ха... даже проще

<a href="javascript: void();" class="off"></a>
.off {display:inline:block; width:37px; heigt:37px; background:url(images/widget_country_button_on.png) no-repeat 0 0
}
.on {background-position:-37px 0}

$('.off').click(function(){
  $(this).toogleClass('on');
})
mff
На сайте с 21.02.2008
Offline
282
mff
#4

Решил трабл при помощи indexOf:

function chg(id){
var el = document.getElementById(id);
if (el.src.indexOf("images/widget_country_button_on.png")>0){
el.src="images/widget_country_button_off.png";
}
else{
el.src="images/widget_country_button_on.png";
}
}

Всем спасибо!

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий