Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 26.02.2014, 20:21
Новичок на форуме
Отправить личное сообщение для megasan84 Посмотреть профиль Найти все сообщения от megasan84
 
Регистрация: 26.02.2014
Сообщений: 2

Поменять картинку у одной из img, а потом при нажатии на другой img, вернуть обратно.
Простите заранее, если это элементарно, но я искать устал, у самого уже мысли кончились...

Есть картинки:
<img id="badroad" class="notActive" onclick="func(this);" src="/d/718661/t/images/buttons/badroad_btn_1.jpg">
 <img id="badrails" class="notActive" onclick="func(this);" src="/d/718661/t/images/buttons/badrails_btn_1.jpg">
 <img id="baddvor" class="notActive" onclick="func(this);" src="/d/718661/t/images/buttons/baddvor_btn_1.jpg">


Нужно сделать, чтобы при клике на одну из них, менялось изображение на *_btn_2.jpg
А при клике на другую, у первой снова значение возвращалось на *_btn_1.jpg

Вот код:

<script type="text/javascript">
 function func(arg){

   var attr = arg.id;
   
   if (attr=='badroad') {
    $(arg).removeClass('notActive').addClass('active').attr('src', '/d/718661/t/images/buttons/' + attr + '_btn_2.jpg');
    $('#badrails').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/badrails_btn_1.jpg');
    $('#baddvor').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/baddvor_btn_1.jpg');
   }

     if (attr=='badrails') {
    $(arg).removeClass('notActive').addClass('active').attr('src', '/d/718661/t/images/buttons/' + attr + '_btn_2.jpg');
    $('#badroad').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/badroad_btn_1.jpg');
    $('#baddvor').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/baddvor_btn_1.jpg');
     }

       if (attr=='baddvor') {
    $(arg).removeClass('notActive').addClass('active').attr('src', '/d/718661/t/images/buttons/' + attr + '_btn_2.jpg');
    $('#badrails').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/badrails_btn_1.jpg');
    $('#badroad').removeClass('active').addClass('notActive').attr('src', '/d/718661/t/images/buttons/badroad_btn_1.jpg');
       }
   
    return false;
  }
</script>


Здесь тупой if, если кнопок много, то становится тяжело перебирать все значения, да и код становится громоздким
Кто-нибудь подскажет, как это сделать в цикле и улучшить код?

Спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 26.02.2014, 20:45
Аватар для Vlasenko Fedor
Профессор
Отправить личное сообщение для Vlasenko Fedor Посмотреть профиль Найти все сообщения от Vlasenko Fedor
 
Регистрация: 13.03.2013
Сообщений: 1,509

<img id="badroad" class="notActive" onclick="func(this);" src="/d/718661/t/images/buttons/badroad_btn_1.jpg">
    <img id="badrails" class="notActive" onclick="func(this);" src="/d/718661/t/images/buttons/badrails_btn_1.jpg">
    <img id="baddvor" class="notActive" onclick="func(this);" src="/d/718661/t/images/buttons/baddvor_btn_1.jpg">
    <script>
      var tmp;
      func = function (el) {
        tmp && (tmp.src = tmp.src.replace('2.jpg', '1.jpg'));
        el.src = el.src.replace('1.jpg', '2.jpg');
        tmp = el;
      };
    </script>
Ответить с цитированием
  #3 (permalink)  
Старый 26.02.2014, 21:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970

megasan84,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .notActive{
    border: #FF0000 1px solid;
  }
  .Active{
    border: #2E8B57 5px solid;
  }

  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script>
     $(function ()
{
    var $img = $('.notActive')
$img.click(function ()
{
  $img.attr({'src':'http://javascript.ru/forum/images/smilies/cray.gif'}).not(this).addClass('notActive').removeClass('Active')
  $(this).toggleClass('notActive Active');
  $(this).hasClass('Active') && (this.src = 'http://javascript.ru/forum/images/smilies/victory.gif');
})
})
  </script>
</head>

<body>
 <img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="" class="notActive">
 <img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="" class="notActive">
 <img src="http://javascript.ru/forum/images/smilies/cray.gif" alt="" class="notActive">
</body>

</html>
Ответить с цитированием
  #4 (permalink)  
Старый 27.02.2014, 07:55
Новичок на форуме
Отправить личное сообщение для megasan84 Посмотреть профиль Найти все сообщения от megasan84
 
Регистрация: 26.02.2014
Сообщений: 2

Работает! Всем громадное спасибо!
Ответить с цитированием
  #5 (permalink)  
Старый 08.10.2014, 20:56
ww3 ww3 вне форума
Интересующийся
Отправить личное сообщение для ww3 Посмотреть профиль Найти все сообщения от ww3
 
Регистрация: 02.03.2014
Сообщений: 20

этажи проблема идей как реализовать совсем нет потому что только начал изучать js по книги head first js код скниги .
<html>
<head> 
	<title>  виртуалный любимец</title>
	<meta charset='utf-8'>
<script type='text/javascipt'>
		function touchBall(){
			var userName = prompt("What you name print you name");
			
			if (userName) {
				alert("Happy to see you,"+  userName +".");
				document.getElementById('BallImg').src ='S.png';
				}
				}
			</script>
</head>
<body onload='alert(" Hello, i am your pokemon  ");'>
	<div style='margin-top:600px; text-align:center'>
<img id='BallImg' src="Ball.png" alt='iRock' style='cursor:pointer' onclick="touchBall();">
	</div>	
</body>
</html>


по идеи посли ввода моего имени в prompt должно меняться изображение . пытаюсь код в ие . а в фф у меня не хэшируется изображение что это означает ?
Ответить с цитированием
  #6 (permalink)  
Старый 08.10.2014, 21:07
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970


Сообщение от ww3
<script type='text/javascipt'>
Ответить с цитированием
  #7 (permalink)  
Старый 08.10.2014, 21:50
ww3 ww3 вне форума
Интересующийся
Отправить личное сообщение для ww3 Посмотреть профиль Найти все сообщения от ww3
 
Регистрация: 02.03.2014
Сообщений: 20

да блин жесть столько время потратил самому рыдать хочется .
а можно еще один вопрос по тому же коду.
почему то вторая картинка загружается но не в ее расширении а с красным крестом на картинке?
а в фф все работает но нету самих картинок.
Ответить с цитированием
  #8 (permalink)  
Старый 08.10.2014, 21:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970

ww3,
смотрите пути к картинкам.
Ответить с цитированием
  #9 (permalink)  
Старый 11.10.2014, 00:10
ww3 ww3 вне форума
Интересующийся
Отправить личное сообщение для ww3 Посмотреть профиль Найти все сообщения от ww3
 
Регистрация: 02.03.2014
Сообщений: 20

IE_9 разобрался путь к картинкам
Цитата:
C:\\Users\\andrey\\Desktop\\learnJS\\.png
но не понимаю почему в
Цитата:
document.getElementById('BallImg').src ='\\.png';
путь к картинкам я прописываю с двумя слешеми а в
Цитата:
<img id='BallImg' src="\.png"
с одним слешем ?

В FireFox, функция работает но без картинки .Картинки просто не непоявлятся место нее имя
Цитата:
alt='iRock'
Не понимаю да жи с чего начать. Снастройки ФФ || надо добавить что то в код ?
Ответить с цитированием
  #10 (permalink)  
Старый 11.10.2014, 00:43
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 30,970

ww3,
здесь http://learn.javascript.ru/play попробуйте залить ваши картинки и код
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Блок должен перемещаться из одной точки в другую, а при повторном нажатии обратно Ser12345678 jQuery 2 17.07.2012 11:18
Поменять элемент матрицы при нажатии кнопки в другом фрейме Alexiy Общие вопросы Javascript 1 09.11.2011 09:49
Отображение ссылок при нажатии на картинку deNSe_01 Events/DOM/Window 5 27.06.2011 09:39
Поменять картику при нажатии Goldwarrior Общие вопросы Javascript 2 07.11.2010 18:16
Как поменять картинку при нажатии на нее syegorius Events/DOM/Window 1 28.08.2010 22:14