MasjMedlem sedan maj 20033 inlägg 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>
JojoxxMedlem sedan juni 20004 308 inlägg Välkommen till wF.
Detta var inget bra exempel :) Se längre ner i tråden.
Ä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>
dectgapMedlem sedan sep. 20021 655 inlägg 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>
JojoxxMedlem sedan juni 20004 308 inlägg 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. :)
dectgapMedlem sedan sep. 20021 655 inlägg 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>
JojoxxMedlem sedan juni 20004 308 inlägg
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 SMedlem sedan dec. 20025 483 inlägg 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 SMedlem sedan dec. 20025 483 inlägg Johan; det skall inte vara några "snuffar" i CSS-klasserna ;)
:)
JojoxxMedlem sedan juni 20004 308 inlägg Känslig liten rackare. Tack för extraparet ögon. :)
dectgapMedlem sedan sep. 20021 655 inlägg 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 SMedlem sedan dec. 20025 483 inlägg 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 :r
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.
:)
dectgapMedlem sedan sep. 20021 655 inlägg Jag tänkte inte på att :link bara påverkar obesökta adresser.
Med ett enkelt "a" blev det urtjusigt.
Tack.
Peter SMedlem sedan dec. 20025 483 inlägg Ä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.
;)
MasjMedlem sedan maj 20033 inlägg Okej jag ger er hela koden....
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>
JojoxxMedlem sedan juni 20004 308 inlägg <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.
MasjMedlem sedan maj 20033 inlägg Tack =)
Tack för hjälpen det har löst sig nu =)
TypeMedlem sedan mars 20021 239 inlägg *red
Jag gör på ett annat sätt istället...
