замена фона

[Lemming]

Здравствуйте, опять у меня тупняк с, наверное, элементарной проблемой.

Заключается она вот в чем:

сделал окошко, в котором есть закладки, по типу как здесь Эрудит, Загадки, Конкурсы и т.д.

Хочу сделать вот что - при наведении курсора на каждую такую вкладку цвет ее фона заменяется с серого на уникальный цвет, то есть для каждой вкладки свой цвет. При отведении курсора цвет становится опять серым. Это все понятно, сделал, работает.

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

Кто-нибудь может подсказать, как реализовать это?

Вот код текущей реализации:

function hoveron(elem, tip) - на событие onmouseover
{	
	if(tip == "1")
	{
		elem.style.backgroundColor="lightgreen";
	}
	if(tip == "2")
	{
		elem.style.backgroundColor="magenta";
	}
	if(tip == "3")
	{
		elem.style.backgroundColor="cyan";
	}
}

function hoveroff(elem) - на событие onmouseout
{	
	elem.style.backgroundColor="lightgray";
}

function show(elem, tip) - на событие onclick
{ 
	if(tip == "1")
	{
		elem.style.backgroundColor="lightgreen";
	}
	if(tip == "2")
	{
		elem.style.backgroundColor="magenta";
	}
	if(tip == "3")
	{
		elem.style.backgroundColor="cyan";
	}
}

[DrStrangeLove]

Попробуй просто убрать это:

function hoveroff(elem) - на событие onmouseout
{       
        elem.style.backgroundColor="lightgray";
}

И не вызывай, не назначай нигде..

[Lemming]

Попробуй просто убрать это:

function hoveroff(elem) - на событие onmouseout
{       
        elem.style.backgroundColor="lightgray";
}

И не вызывай, не назначай нигде..

спасибо, но в таком случае при отведении курсора с вкладки ее фон не изменится обратно на серый.

[DrStrangeLove]

Попробуй просто убрать это:

function hoveroff(elem) - на событие onmouseout
{       
        elem.style.backgroundColor="lightgray";
}

И не вызывай, не назначай нигде..

спасибо, но в таком случае при отведении курсора с вкладки ее фон не изменится обратно на серый.

Не самый лучший способ, но попробуй:

window.wasclicked = false;

function show(elem, tip) - на событие onclick
{ 
        if(tip == "1")
        {
                elem.style.backgroundColor="lightgreen";
        }
        if(tip == "2")
        {
                elem.style.backgroundColor="magenta";
        }
        if(tip == "3")
        {
                elem.style.backgroundColor="cyan";
        }
       window.wasclicked = true; // выставляем флаг

}

теперь

function hoveroff(elem) - на событие onmouseout
{       
 if (!window.wasclicked){      // выставляем серый только если не было клика

 elem.style.backgroundColor="lightgray";
}
}

[Lemming]

DrStrangeLove

Спасибо, способ не работает как нужно, но идею понял, попробую что-нибудь сделать.

upd: сделал, навесив уникальный id каждой вкладке, эквивалентный значению переменной tip, работает.

var whois = 0;
function show(elem, tip)
{ 
	if(tip == "1")
	{
		elem.style.backgroundColor="lightgreen";		
	}
	if(tip == "2")
	{
		elem.style.backgroundColor="magenta";
	}
	if(tip == "3")
	{
		elem.style.backgroundColor="cyan";
	}
	if(tip == "5")
	{
		elem.style.backgroundColor="black";
		elem.style.color="white";
	}
	whois=tip;
}

function hoveroff(elem)
{	
	if(elem.id!=whois)
        {
              	elem.style.backgroundColor="lightgray";
        }
}

Edited October 9, 2011 by Lemming

[DrStrangeLove]

DrStrangeLove

Спасибо, способ не работает как нужно, но идею понял, попробую что-нибудь сделать.

Что не работает?? Почему??

[Lemming]

Там при наведении курсора на вкладку, не являющуюся активной, ее цвет фона изменялся, и при отведении курсора сохранялся.

Все потому что window.wasclicked приобретал значение true после первого клика, соответственно предложенное вами условие не выполнялось никогда.

[DrStrangeLove]

Там при наведении курсора на вкладку, не являющуюся активной, ее цвет фона изменялся, и при отведении курсора сохранялся.

Все потому что window.wasclicked приобретал значение true после первого клика, соответственно предложенное вами условие не выполнялось никогда.

А как ты назначал обработчики??

[Lemming]

Обработчики назначал на события onclick, onmouseover, onmouseout,

onclick="show(this, '1')" onmouseover="hoveron(this,'1')" onmouseout="hoveroff(this)"

Впрочем, я их и не изменял за все то время, пока открыта эта тема, но ваш совет мне на самом деле помог, приоткрыв немного завесу тайны над работой с JS, спасибо