Форум

megasan84 · #1 (**permalink**) 26.02.2014, 22:21

Простите заранее, если это элементарно, но я искать устал, у самого уже мысли кончились...

Есть картинки:

<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, если кнопок много, то становится тяжело перебирать все значения, да и код становится громоздким

Кто-нибудь подскажет, как это сделать в цикле и улучшить код?

Спасибо!

Vlasenko Fedor · #2 (**permalink**) 26.02.2014, 22:45

<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, 23:06

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>

megasan84 · #4 (**permalink**) 27.02.2014, 09:55

Работает! Всем громадное спасибо!

ww3 · #5 (**permalink**) 08.10.2014, 21:56

этажи проблема идей как реализовать совсем нет потому что только начал изучать 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, 22:07

Сообщение от ww3

ww3 · #7 (**permalink**) 08.10.2014, 22:50

да блин жесть столько время потратил самому рыдать хочется .
а можно еще один вопрос по тому же коду.
почему то вторая картинка загружается но не в ее расширении а с красным крестом на картинке?
а в фф все работает но нету самих картинок.

рони · #8 (**permalink**) 08.10.2014, 22:57

ww3,
смотрите пути к картинкам.

ww3 · #9 (**permalink**) 11.10.2014, 01:10

-В 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, 01:43

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

Форум

Справочник

Discord чат

Курсы javascript