onmouseover problem

[Masj]

Jag har en sida där jag använder tables istället för bilder som knappar. men jag lyckas inte få scriptet jag använder att både byta färgen på både texten och bakgrunden när man drar musen över tabellrutan. jag lyckas att få den att endera ändra bakgrunden eller texten dock inte båda
nån som vet någon lösning?

<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Main Page</b></center></a></td>

[Jojoxx]

Välkommen till wF.

Detta var inget bra exempel Se längre ner i tråden.

[PepeJeria]

Är det inte lite av en overkill att göra såhär? När det räcker med (eller annan variant)

<script type="text/javascript">
function swapColor(obj, color)
{
    obj.style.backgroundColor = color;
}
</script>
<span onMouseOver="swapColor(this, 'blue');" onMouseOut="swapColor(this, 'red');">d</span>

[dectgap]

Jag håller med PepeJeria att det är lite onödigt att göra det mer komplicerat än vad som behövs. Dessutom får man genom Jojoxx exempel inte riktigt den effekt som jag tror att Masj önskar, eftersom du ändrar hela css-klassen, istället för att ändra i endast den cell man för musen över.

Jag hade löst det hela så här:

<script type="text/javascript">
function changeColors(obj, color, bgcolor){
    obj.style.color = color;
    obj.style.backgroundColor = bgcolor;
}
</script>

...

<table>
 <tr>
  <td onmouseover="changeColors(this,'#fff', '#000')" onmouseout="changeColors(this,'#000', '#fff')">bla</td>
 </tr>
 <tr>
  <td onmouseover="changeColors(this,'#fff', '#000')" onmouseout="changeColors(this,'#000', '#fff')">bla</td>
 </tr>
</table>

[Jojoxx]

Anledningen till att jag skrev exemplet som jag gjorde och inte den enklare varianten att ändra bara bakgrundsfärgen rak av är att Masj skriver att han vill ändra både bakgrundsfärg och textfärg där åtminstonde delar av innehållet dessutom är länkar. Att bara ändra egenskapen color för cellen kommer inte att ändra färgen på länken.

Därför använde jag en klass istället för att hårdstyra mot ett specifikt element.

[dectgap]

Nu förstår jag dig lite bättre, men det blir fortfarande fel eftersom du ändrar alla celler (eller andra element) som använder klassen foo.

Ett annat alternativ, som av någon anledning inte fungerar i IE och Opera:

<style type="text/css">
.nofocus :link{
    color: #00f;
    background-color: #fff;
}

.onfocus :link{
    color: #f00;
    background-color: #000;
}
</style>

...

<table>
 <tr>
  <td class="nofocus" onmouseover="this.className='onfocus'" onmouseout="this.className='nofocus'"><a href="#">Länk 1</a></td>
 </tr>
 <tr>
  <td class="nofocus" onmouseover="this.className='onfocus'" onmouseout="this.className='nofocus'"><a href="#">Länk 2</a></td>
 </tr>
</table>

[Jojoxx]

dectgap skrev:

men det blir fortfarande fel eftersom du ändrar alla celler

Ja just det. Jag tänkte nog inte riktigt klart den där tanken

Här är ett annat exempel;

<style type="text/css">
.foo { background-color:#333333; color:white; }
.bar { background-color:#666666; color:green; }
</style>
<script language="JavaScript" type="text/javascript">
function sw(obj,cl){
	obj.className=cl;
	var children=obj.childNodes;
	for (var i=0;i<children.length;i++){
		if(children[i].tagName){ children[i].className=cl; }
	}
}

</script>
<table border="1">
<tr><td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo"><a href="sida.html" class="foo">Blaj</a></td></tr>
<tr><td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo"><a href="sida.html" class="foo">Blaj</a></td></tr>
</table>

[Peter S]

Pseudoklassen :link kan bara appliceras på "a"-element, så för att koden skall fungera kan du -- från dectgaps inlägg -- plocka bort dem.

[Peter S]

Johan; det skall inte vara några "snuffar" i CSS-klasserna

[Jojoxx]

Känslig liten rackare. Tack för extraparet ögon.

[dectgap]

W3C skriver i CSS1-dokumentationen följande:

In CSS1, anchor pseudo-classes have no effect on elements other than 'A'. Therefore, the element type can be omitted from the selector:

A:link { color: red }
:link { color: red }

The two selectors above will select the same elements in CSS1.

Gäller det bara om ":link" står som ensam selector? Fast :link finns väl inte som pseudoklass till något annat element än <a> i CSS2 heller?
I och för sig är det skillnad mellan hur W3C skriver att det ska fungera, och hur det i praktiken fungerar i läsarna. Följande funkar nämligen inte heller i IE:

<style type="text/css">
.nofocus a:link{
    color: #00f;
    background-color: #fff;
}

.onfocus a:link{
    color: #f00;
    background-color: #000;
}
</style>

[Peter S]

Jag läste lite för hastigt igenom din förra kod vilket fick mig att tro att :link hörde till klasserna onfocus/nofocus. Sorry

Koden fungerar om du i "href"-attributet skriver en obesökt adress. Annars kan man ju göra det enkelt för sig och ta bort den pseudoklassen och bara använda a.

[dectgap]

Jag tänkte inte på att :link bara påverkar obesökta adresser.
Med ett enkelt "a" blev det urtjusigt.

Tack.

[Peter S]

Även de mest triviala sakerna kan ställa till det ibland:
:link påverkar obesökta länkar.
:visited besökta länkar.... o.s.v.

[Masj]

Okej jag blir ganska confusad av detta bäst jag ger er hela koden
så ni ser hur det är uppbyggt.

Jag vill ändra så att sidan kan hantera att ändra färgen på texten samtidigt som bakgrunden som ni ser så fungerar bakgrunden.
Den ändrar färg när man drar musen över men dock är frågan vad jag behöver lägga till för texten... blev lite confusad av alla svar... Tack på förhand =)

<HTML>
<HEAD>
<TITLE>TEST PAGE</TITLE>
<style type="text/css">

.button A:link {text-decoration: none}
.button A:visited {text-decoration: none}
.button A:active {text-decoration: none}
.button A:hover {text-decoration: none; color: 000000}

.mailto A:link {text-decoration: none; color: CCCC00;}
.mailto A:visited {text-decoration: none; color: CCCC00;}
.mailto A:active {text-decoration: none; color: CCCC00;}
.mailto A:hover {text-decoration: underline; color: CCCC00;}

.normal A:link {text-decoration: none; color: 336699;}
.normal A:visited {text-decoration: none; color: 336699;}
.normal A:active {text-decoration: none; color: 336699;}
.normal A:hover {text-decoration: underline}

.xlink {cursor:default}

BODY
{ 
scrollbar-base-color: 333333; 
scrollbar-arrow-color: 000000;
scrollbar-darkshadow-color: 000000;
scrollbar-highlight-color: 666666;
scrollbar-track-color: 333333;
} 
</style>
</HEAD>
<BODY BGCOLOR="#444444" TEXT="#666666" LINK="#999999" VLINK="#999999" ALINK="#999999">
<BASEFONT FACE="arial">

	<table align="center" width="640" valign="top" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <IMG SRC="header.jpg" width="640" height="100">
</td>
</tr>
<tr>
<td height="1" bgcolor="#444444">
</td>
</tr>
<tr>
<td>
<table align="center" width="640" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">				<tr>					
          <td bgcolor="#000000"> 
            <table align="center" width="640" height="18" border="0" cellspacing="1" cellpadding="0">
<tr>
<span class="button">
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333" font color="#000000"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Main Page</b></center></a></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333" font color="#000000"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>News</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Comic</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Stuff</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Links</b></center></a></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Staff</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>Forum</B></center></A></td>
</a><A HREF="jagecp.htm">
<td width="80" onmouseover="this.style.background='#666666';" onmouseout="this.style.background='#333333';" bgcolor="#333333"><center><A HREF="jagecp.htm" class="xlink"><FONT SIZE="2"><B>???</B></center></A></td>
</a>
</span>
</tr>
</table>
</td>
</tr>
</table>
</table>			
</table>
<table align="center" width="150" border="0" cellspacing="0" cellpadding="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="150" height="4" bgcolor="#444444">
</td>
</tr>
</td>
</table>							</table>
<td>
<table align="center" width="638" height="480" border="0" cellspacing="0" cellpadding="0">
<tr valign="top"> 
    <td> <table width="638" height="480" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
        <tr> 
          <td><table width="638" height="480" border="0" cellpadding="1" cellspacing="0" bgcolor="#333333" background="bgr.jpg">
              <tr> 
                <td valign="top">
<span class="mailto">
<center><font size="2">-www.3v1l-l33t.tk-</center></font>
</p>
</span>         
</td>
</tr>        
</table>    
</td>
</tr>
</table>
</table>
</BODY>
</HTML>

[Jojoxx]

<HTML>
<HEAD>
<TITLE>TEST PAGE</TITLE>
<style type="text/css">
BODY
{ 
scrollbar-base-color: #333333; 
scrollbar-arrow-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-highlight-color: #666666;
scrollbar-track-color: #333333;
background-color:#444444;
font-family:Arial;
} 
a { color:#999999; }
.foo { background-color:#333333; color:#999999; }
.bar { background-color:#666666; color:white; }
</style>
<script language="JavaScript" type="text/javascript">
function sw(obj,cl){
	obj.className=cl;
	var children=obj.childNodes;
	for (var i=0;i<children.length;i++){
		if(children[i].tagName){ children[i].className=cl; }
	}
}
</script>

</HEAD>
<BODY>
	<table align="center" width="640" valign="top" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <IMG SRC="header.jpg" width="640" height="100">
</td>
</tr>
<tr>
<td height="1" bgcolor="#444444">
</td>
</tr>
<tr>
<td>
<table align="center" width="640" border="0" cellpadding="0" cellspacing="0" bgcolor="#333333">				<tr>					
          <td bgcolor="#000000"> 
            <table align="center" width="640" height="18" border="0" cellspacing="1" cellpadding="0">
<tr>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Main Page</b></a></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>News</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Comic</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Stuff</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Links</b></a></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Staff</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>Forum</B></A></td>
<td width="80" onmouseover="sw(this,'bar');" onmouseout="sw(this,'foo');" class="foo" align="center"><A HREF="jagecp.htm"><FONT SIZE="2"><B>???</B></A></td>
</tr>
</table>
</td>
</tr>
</table>
</table>			
</table>
<table align="center" width="150" border="0" cellspacing="0" cellpadding="0">
<tr valign="top" bgcolor="#FFFFFF">
<td width="150" height="4" bgcolor="#444444">
</td>
</tr>
</td>
</table>							</table>
<td>
<table align="center" width="638" height="480" border="0" cellspacing="0" cellpadding="0">
<tr valign="top"> 
    <td> <table width="638" height="480" border="0" cellpadding="1" cellspacing="0" bgcolor="#000000">
        <tr> 
          <td><table width="638" height="480" border="0" cellpadding="1" cellspacing="0" bgcolor="#333333" background="bgr.jpg">
              <tr> 
                <td valign="top">
<center><font size="2">-www.3v1l-l33t.tk-</font></center>
</td>
</tr>        
</table>    
</td>
</tr>
</table>
</table>
</BODY>
</HTML>

Jag korrigerade några html-fel, men du bör köra sidan genom en html-validator med jämna mellanrum. E.v. fel i din html-kod kan nämligen få många "roliga" fel-effekter i dina dhtml-script.

[Masj]

Tack för hjälpen det har löst sig nu =)

[Type]

*red
Jag gör på ett annat sätt istället...