bakgrundsfärg i meny vid onclick

6 svar · 295 visningar · startad av doggelito 11 jan. 2005

doggelitoMedlem sedan juni 20003 076 inlägg

Frågan11 jan. 2005 08:48#1

har problem med denna kod.
onmouseover samt onmouseout funkar som de ska samt att
när man klickar på en länk så byter td:n bakgrundsfärg, bra!

men efter man klickat på en annan länk så har fortfarande föregående länk "aktiv" bakgrundsfärg, hur löser jag det?
kan man loopa igenom alla td:s och nollställa dessa och sedan sätta den man klickat på till aktiv? eller har jag gjort nått fel?

<html>
<head>
<script language="JavaScript" type="text/javascript">
active=false;

function flipColor(id, type)
{
	//vid onMouseOver
	if(type=='over')
		document.getElementById("td"+id).className = 'menu_active';
	else
		//vid onMouseOut
		if(type=='out')
			document.getElementById("td"+id).className = 'menu';
		//vid onClick
		else
			document.getElementById("td"+id).className = 'menu_active';
		
}
</script>
</head>

<body>

<table cellpadding="0" cellspacing="0" width="100%">
<tr><td class="menu" id="td0" onMouseOver="flipColor(0,'over');" onMouseOut="if(this!=active){flipColor(0,'out')};" onClick="if(this!=active){flipColor(0,'click')}; active=this; parent.text.location.href='text.asp?PageId=0';" title="Startsida">Meny1</td></tr>
<tr><td class="menu" id="td1" onMouseOver="flipColor(1,'over');" onMouseOut="if(this!=active){flipColor(1,'out')};" onClick="if(this!=active){flipColor(1,'click')}; active=this; parent.text.location.href='nyheter/news_ls.asp?PageId=1';" title="Nyheter">Meny2</td></tr>
</table>

</body>
</html>

jag har kikat och använt lite kod från denna:
http://www.webforum.nu/showthread.php?s=&forumid=24&threadid=45591&highlight=bakgrundsf�rg+meny

doggelitoMedlem sedan juni 20003 076 inlägg

11 jan. 2005 09:20#2

så här kan man ju alltid göra:

<script language="JavaScript" type="text/javascript">
active=false;

function flipColor(id, type)
{
	//vid onMouseOver
	if(type=='over')
		document.getElementById("td"+id).className = 'menu_active';
	else
	
		//vid onMouseOut
		if(type=='out')
			document.getElementById("td"+id).className = 'menu';
			
		//vid onClick
		else
		{
			td = document.getElementsByTagName("td");
			for(i = 0; i < td.length; i++)
			{
				td[i].className = 'menu';
			}
			
			document.getElementById("td"+id).className = 'menu_active';
		}
}

</script>

men då får man inte ha andra tabeller på samma sida för då får dessa också css-klassen 'menu'!
finns det nått annat sätt att lösa detta på? :(

dectgapMedlem sedan sep. 20021 655 inlägg

11 jan. 2005 10:38#3

Det finns ingen anledning för dig att inte använda länkar.

<html>
<head>
<style type="text/css">
#menu a:link, #menu a:visited { ... } /* "Normalt" läge */
#menu a:hover { ... }  /* Onmouseover */
#menu a:active { ... } /* Vid klick */
</style>
</head>

<body>

<table cellpadding="0" cellspacing="0" width="100%" id="menu">
<tr><td id="td0"><a href="text.asp?PageId=0" target="text" title="Startsida">Meny1</a></td></tr>
<tr><td id="td1"><a href="nyheter/news_ls.asp?PageId=1" target="text" title="Nyheter">Meny2</a></td></tr>
</table>

</body>
</html>

Pseudoklassen active tolkas visserligen lite olika i IE och Mozilla, men att få det att fungera som i IE är inte speciellt svårt med lite JavaScript - om det i övrigt är en lösning som du känner dig nöjd med.

doggelitoMedlem sedan juni 20003 076 inlägg

11 jan. 2005 10:46#4

njae, vill nog inte ha det så.
som besökare så tycker i alla fall jag att hela kolumnen ska vara länkad när man använder en onMouseOver-effekt där bakgrundsfärgen ändras.
det blir förvirrande annars:
man hovrar, bakgrunden ändras, åhh va fint tänker man och klickar... inget händer...

doggelitoMedlem sedan juni 20003 076 inlägg

11 jan. 2005 10:49#5

hmm, om man inte kan göra a-taggen 100% bred då förståss så den täcker hela kolumnbredden, hmm, går det tro?

dectgapMedlem sedan sep. 20021 655 inlägg

11 jan. 2005 10:55#6

doggelito skrev:

hmm, om man inte kan göra a-taggen 100% bred då förståss så den täcker hela kolumnbredden, hmm, går det tro?

Självklart:

#menu a { display: block; width: 100% }

Egentligen ska man inte behöva skriva width: 100%, men för att IE 5 ska göra rätt är du tvungen att skriva så.

doggelitoMedlem sedan juni 20003 076 inlägg

11 jan. 2005 11:34#7

nämen! va fiffigt! tack dectgap! :bire
skönt att slippa java-script också! ;)