Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Смена картинки кнопки при нажатии и обратно при повторном нажатии (https://javascript.ru/forum/misc/35706-smena-kartinki-knopki-pri-nazhatii-i-obratno-pri-povtornom-nazhatii.html)

mff 19.02.2013 14:39

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

Вот код:
<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 19.02.2013 15:07

Цитата:

Сообщение от mff
Как это грамотно сделать?

<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 19.02.2013 15:32

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

danik.js 19.02.2013 15:47

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

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

mff 19.02.2013 15:55

Спасибо большое! Решил трабл при помощи 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 19.02.2013 16:13

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

Цитата:

Сообщение от Deff
форум мне интересен для тестов

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

Deff 19.02.2013 16:16

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

newkker.tt.pureacleo 29.04.2018 22:08

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

Сообщение от mff (Сообщение 235562)
Спасибо большое! Решил трабл при помощи 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 30.04.2018 00:11

А к чему тега <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 30.04.2018 12:26

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

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


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