Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   onclick. смена изображения (https://javascript.ru/forum/events/16408-onclick-smena-izobrazheniya.html)

trololo 07.04.2011 00:48

onclick. смена изображения
 
пытаюсь сделать такую штуку: есть на странице блок в котором расположены маленькие картинки (рисунки столов ресторана) по нажатии на которую картинка меняется на такуюже по форме но другого цвета.
<div id="order" >
<img id="1" src="/images/order/restaurant/1.gif" onclick="ch(this.id)">
<img id="2" src="/images/order/restaurant/2.gif" onclick="ch(this.id)">
...
</div>

function ch(id)
{
document.getElementById(id).src="/images/order/restaurant/"+id+"_1.gif";
//и другие действия
}

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

предполагаю что както так. но переменная то перезаписывается.
var parent=null;
function ch(id)
{
document.getElementById(id).src="/images/order/restaurant/"+id+"_1.gif";
//и другие действия
if(parent!=null)
{
document.getElementById(parent).src="/images/order/restaurant/"+parent+".gif";
}
else
parent=id;
}

простите если ответ на вопрос столь очевиден или уже где то есть. js учу не так давно.

poorking 07.04.2011 01:19

document.getElementById("order").onclick = function(e){
		var img = function(event){
			return event.target || event.srcElement;
		}(e || window.event)
		
		//Если кликнули не по картинке а по родителю всех картинок
		if(img === this){
			return false;
		}
		
		var prev = arguments.callee.prev;
		//то есть если это не первый клик
		if(prev){
			//картинка по которой кликнули до этого клика
			prev.src = //тут как то преобразуете путь чтобы картинка стала обычная на пред.картинке
		}
		//сохраняем для след. вызова ссылку на эту картинку
		arguments.callee.prev = img;
		
		img.src = //делаете тут картинку "такую же но другого цвета"
		
	}


Что то наподобие этого, не тестил, ошибки не проверял, но суть, что создаем статическое свойство у функции обработчика и в нем храним пред. картинку. Можно просто создать переменную, глобальную по отношению к этой функции. И картинку ловим по клику на контейнере всех картинок

trololo 07.04.2011 14:04

poorking, спасибо, подтолкнули на мысль.

рони 07.04.2011 15:39

trololo
var parent=null;
function ch(id)
{
if(parent!=id)
{
document.getElementById(id).src="/images/order/restaurant/"+id+"_1.gif";
if(parent)document.getElementById(parent).src="/images/order/restaurant/"+parent+".gif";
parent=id;
}
}


Часовой пояс GMT +3, время: 07:52.