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

[mff]

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

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

[danik.js]

Как это грамотно сделать?

<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 вынести в скрипт.

[danik.js]

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

[danik.js]

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

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

[mff]

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

[danik.js]

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

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

[Deff]

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

[newkker.tt.pureacleo]

Можешь, пожалуйста, скинуть код целиком?Спасибо большое! Решил трабл при помощи 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";
}
}

[clecar]

А к чему тега <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'} "/>

[ruslan_mart]

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

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

[ruslan_mart]

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

[clecar]

ruslan_mart, Спасибо!

[clecar]

Взял себе .
<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>

[Dilettante_Pro]

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>

[laimas]

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

[Dilettante_Pro]

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