How2: Hover effekt på <td>'erne?

F.eks.

<td onmouseover="this.style.backgroundColor='#ddd'" onmouseover="this.style.backgroundColor=''">

Cool, du glemte måske liiige en onmouseout
<td onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'">

:)

Hvordan får jeg så hele td til at være et link? Altså ikke kun teksten skal være et link, men hele td'en som teksten står i.
/Pep

-- nej, jeg glemte ikke en onmouseout, men jeg glemte at ændre 3 bogstaver til 2:

<td onmouseover="this.style.backgroundColor='#ddd'" onmouseout="this.style.backgroundColor=''">

-- det kan gøres på forskellige måder, simplest er at gøre et link i cellen til et block-level-element med:

<a href="..." style="display:block;">link</a>

-- men det kan give problemer, hvis der er forskel på link-højder (f.eks. nogle fler-linjede, andre kun een linje !-)

-- men man kan også bruge noget javascript på cellen:

<td ... onclick="location.href='nyheder.html'">

js virker, men kan ikke få style'en til at virke (IE6.0).
Tilgengæld skifter musen ikke til finger, så man ved umiddelbart ikke at det er et link.

style="corsor:pointer;" skal så også ind i tagget !-)

Uff ...

style="cursor:pointer;"

Forklar mig lige, hvorfor dette kun virker på den først td...

<table cellspacing="2" cellpadding="2" border="1">
<tr>
    <td style="width:200px" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'" style="cursor:pointer;"><a href="her" style="display:block;">Virker</a></td>
</tr>
<tr>
    <td style="width:200px" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'" style="cursor:pointer;"><a href="her" style="display:block;">Virker ikke</a></td>
</tr>
<tr>
    <td style="width:200px" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'" style="cursor:pointer;"><a href="her" style="display:block;">Virker ikke</a></td>
</tr>
<tr>
    <td style="width:200px" onmouseover="this.style.backgroundColor='red'" onmouseout="this.style.backgroundColor='white'" style="cursor:pointer;"><a href="her" style="display:block;">Virker ikke</a></td>
</tr>
</table>

Bør måske lige tilføje, at det er block-linket som ikke virker på de sidste tre td'er.

Det kan jeg ikke forklare !-)

-- og det virker forøvrigt uden problemer i andre browsere end IE !o]

Ja, det virker i de andre (for en gangs skyld) men ikke i IE... Måske hvis jeg stopper dem ind i css fil?

HVordan vil jeg tilføje det? Lige nu ser min css fil således ud:
<style type="text/css">    <!--
    BODY, P, TD, TH, DIV, BLOCKQUOTE, DL, UL, OL {
        font-family: Verdana, Arial, Sans-serif; font-size: xx-small; font-weight: 400; font-style: normal; text-decoration: none; text-transform: none; font-variant: normal;
    }
    A:link {text-decoration: none;}
    A:visited {text-decoration: none;}
    A:link {color: Navy;}
    A:visited {color: #800046;}
    A:hover {color: #FF4500;}
    A:active {color: #6495ED;}

    A.link1:link {text-decoration: none;}
    A.link1:visited {text-decoration: none;}
    A.link1:link {color: black;}
    A.link1:visited {color: black;}
    A.link1:hover {color: #FF4500;}
    A.link1:active {color: black;}
    -->
</style>

Jeg har faktisk prøvet at stoppe det i et stylesheet, tvinge IE til at fortolke css korrekt m.m., men det hjalp ikke !-)

-- men så skal det se sådan ud:

    a{display:block;}
    a:link {text-decoration: none;color: Navy;}
    a:visited {text-decoration: none;color: #800046;}
    a:hover {color: #FF4500;}
    a:active {color: #6495ED;}

    a.link1:link,a.link1:visited {text-decoration: none;color: black;}
    a.link1:hover {color: #FF4500;}
    a.link1:active {color: black;}

Ok spanx.
Hvordan dælen får andre det så til at virke i IE (fx bt.dk)
Kast et svar, så får du point :)

Hvis du sætter det på onclick på cellerne vil det jo virke !-)

Og hvordan ser det ud?
onclick="display='block'"?

Se sidste linje i indlægget 14:09:52 !-)

roger, vil du ha' point, så gi' lige et svar.

Oki '-)

-- men behold selv de fleste !-)

Lige en ting mere. Hvordan får jeg tekstens hover-farve frem, når man holder musen over td'en, men ikke lige rammer selve teksten?

Så må du ændre den onmouseover !-)

<td style="width:200px" onmouseover="this.style.backgroundColor='red';this.firstChild.style.color='#FF4500';" onmouseout="this.style.backgroundColor='';this.firstChild.style.color='';" style="cursor:pointer;">

Det åbner så op for et nyt problem. Nemlig at man ikke længere kan se, om man har været på linket før.

<td style="height:19px" onclick="location.href='settings.asp'" style="cursor:pointer;" onmouseover="this.style.backgroundColor='#C7C6AF';this.firstChild.style.color='FF4500';" onmouseout="this.style.backgroundColor='#DFE6E3';this.firstChild.style.color='#800046';"> <a href="settings.asp">Indstillinger</a></td>

Sæt onmouseout, som jeg viste !-)

-- det er bestemt ikke en fejl, at jeg brugte ='' ...

U soo rock man. Point er helt fortjent!!!
Tak for hjælpen.
/Pep

-- og jeg takker for point ;~}