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

Ребят, научите дурака, как грамотно сделать смену картинки при первом нажатии на нее, а при втором нажатии, чтоб назад возвращалась первая картинка?

Вот код:

<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. Как это грамотно сделать? Спасибо!

<style>
    .button-off{
        background-image: url( widget_country_button_off.png);
    }
    .button-on{
        background-image: url(widget_country_button_on.png);
    }
</style>
<button onclick="className = (className == 'button-off') ? 'button-on' : 'button-off'" class="button-off"></button>

Лучше если обработчик onclick вынести в скрипт.

Deff, alt предназначен для других целей. Лучше уж тогда атрибут типа data-*
И прекрати учить народ срать в global

Deff, ну нажал, и че?
Ты дурак или притворяешься?

UPD: А, значит ты сам понял свою тупость и удалил свой комментарий. Ну ок...

Спасибо большое! Решил трабл при помощи 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";
}
}

Deff, ну может не надо проводить тесты на чайниках? А может тебе просто стоит самому подучить javascript прежде чем помогать другим?

Да ты даже потестить нормально не можешь, когда твое внимание обращают на ошибки.

danik.js,
Может не будем лагать в общении? Я и Вам и dmitriymar тыщу раз говорю, и , что пару посылов в топике, отворачивают от форума - больше народу, чем сотня изящных решений!

Можешь, пожалуйста, скинуть код целиком?

А к чему тега <script>, когда можно просто переключать по последнему символу в названии картинки.
<img src='1.png' onclick="var s=this.src; var b = s.length-5; var v=s.charAt(b); if(v==1){this.src='2.png'} if(v==2){this.src='1.png'} "/>

Можно решить более грамотным путём:

.widget_button::after {
   content: url('images/widget_country_button_off.png');
}

.widget_button--on::after {
   content: url('images/widget_country_button_on.png');
}

<div class="widget_button" onclick="this.classList.toggle('widget_button--on')"></div>

clecar, вообще лучше не использовать лишний раз обработчики-атрибуты, потому что по факту это eval + with (который устарел), а это не есть хорошо.

ruslan_mart, Спасибо!

Взял себе .
<style>
.widget_div::after {content: url('1.png');}
.widget_div--on::after {content: url('2.png');
}
</style>
<div class="widget_div" onclick="this.classList.toggle('widget_div--on')"></div>

ruslan_mart, а зачем ::after ?

<style>
.widget_button {
   content: url('http://javascript.ru/cat/list/donkey.gif');
}

.widget_button--on {
   content: url('http://javascript.ru/cat/list/js.gif');
}
</style>
<div class="widget_button" onclick="this.classList.toggle('widget_button--on')"></div>

Dilettante_Pro,
content используется как раз совместно с before/after, а так как вы предлагаете не будет отображаться в FF, IE.

laimas,
И действительно - не работает. Спасибо.