Поменять картинку у одной из 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, время: 18:26. |