Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 19.02.2013, 14:39
Аватар для mff
mff mff вне форума
Аспирант
Отправить личное сообщение для mff Посмотреть профиль Найти все сообщения от mff
 
Регистрация: 28.01.2010
Сообщений: 31

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

Вот код:
<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. Как это грамотно сделать? Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 19.02.2013, 15:07
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Сообщение от 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 вынести в скрипт.
Ответить с цитированием
  #3 (permalink)  
Старый 19.02.2013, 15:32
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Deff, alt предназначен для других целей. Лучше уж тогда атрибут типа data-*
И прекрати учить народ срать в global
Ответить с цитированием
  #4 (permalink)  
Старый 19.02.2013, 15:47
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

UPD: А, значит ты сам понял свою тупость и удалил свой комментарий. Ну ок...
Ответить с цитированием
  #5 (permalink)  
Старый 19.02.2013, 15:55
Аватар для mff
mff mff вне форума
Аспирант
Отправить личное сообщение для mff Посмотреть профиль Найти все сообщения от mff
 
Регистрация: 28.01.2010
Сообщений: 31

Спасибо большое! Решил трабл при помощи 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";
}
}
Ответить с цитированием
  #6 (permalink)  
Старый 19.02.2013, 16:13
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

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

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

Последний раз редактировалось danik.js, 19.02.2013 в 16:16.
Ответить с цитированием
  #7 (permalink)  
Старый 19.02.2013, 16:16
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

danik.js,
Может не будем лагать в общении? Я и Вам и dmitriymar тыщу раз говорю, и , что пару посылов в топике, отворачивают от форума - больше народу, чем сотня изящных решений!
Ответить с цитированием
  #8 (permalink)  
Старый 29.04.2018, 22:08
Аватар для newkker.tt.pureacleo
Новичок на форуме
Отправить личное сообщение для newkker.tt.pureacleo Посмотреть профиль Найти все сообщения от newkker.tt.pureacleo
 
Регистрация: 29.04.2018
Сообщений: 3

Можешь, пожалуйста, скинуть код целиком?
Сообщение от 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";
}
}
Ответить с цитированием
  #9 (permalink)  
Старый 30.04.2018, 00:11
Профессор
Отправить личное сообщение для clecar Посмотреть профиль Найти все сообщения от clecar
 
Регистрация: 11.02.2015
Сообщений: 254

А к чему тега <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'} "/>
Ответить с цитированием
  #10 (permalink)  
Старый 30.04.2018, 12:26
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

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

.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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
смена картинок при нажатии sdff Общие вопросы Javascript 15 08.02.2014 17:08
Смена картинки в шапке при перезагрузки wcb-falcon Элементы интерфейса 12 13.07.2010 23:36
Смена изображений при нажатии кнопки. Rel60 Общие вопросы Javascript 1 14.09.2009 11:05
Смена картинки при перезагрузке + наведении Мария Элементы интерфейса 2 22.08.2009 14:57
Обновление картинки при нажатии sdff Общие вопросы Javascript 2 07.10.2008 09:05