Поменять картинку у одной из 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, если кнопок много, то становится тяжело перебирать все значения, да и код становится громоздким :( Кто-нибудь подскажет, как это сделать в цикле и улучшить код? Спасибо! |
<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> |
megasan84,
:write: <!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> |
Работает! Всем громадное спасибо!
|
этажи проблема идей как реализовать совсем нет потому что только начал изучать 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 должно меняться изображение . пытаюсь код в ие . а в фф у меня не хэшируется изображение что это означает ? |
:cray:
Цитата:
|
да блин жесть столько время потратил самому рыдать хочется .
а можно еще один вопрос по тому же коду. почему то вторая картинка загружается но не в ее расширении а с красным крестом на картинке? а в фф все работает но нету самих картинок. |
ww3,
смотрите пути к картинкам. |
-В IE_9 разобрался путь к картинкам
Цитата:
Цитата:
Цитата:
В FireFox, функция работает но без картинки .Картинки просто не непоявлятся место нее имя Цитата:
|
ww3,
здесь http://learn.javascript.ru/play попробуйте залить ваши картинки и код |
Часовой пояс GMT +3, время: 12:48. |