Skift farve på td ved rollover

Det skal ikke laves i php. Det skal laves i JavaScript. Men kan da godt hjælpe alligevel :)

<?php

$rollovercolor = "#FF0000"; //RØD når musen kører over
$rollbackcolor = "#00FF00"; //GRØN når musen forsvinder igen.

?>

<td onMouseOver="this.style.backgroundColor='<?php print $rollovercolor; ?>; onMouseOut="this.style.backgroundColor='<?php print $rollbackcolor; ?>';" >


Hvordan du får den til at skifte class ved jeg ikke lige umiddelbart. Men med ovenstående skifter den i hvert fald baggrundsfarve når musen kører henholdsvis over og væk fra <td>'en :)


Mvh
Anders Eiler
www.anderseiler.dk :)

Eksempel:

<style>
.norm {
    background-color: #ccc;
}
.hot {
    background-color: #fee;
}
</style>
<table width="100%">
    <tr>
        <td class="norm" onmouseover="this.className='hot'" onmouseout="this.className='norm'">
            Hejsa
        </td>
    </tr>
    <tr>
        <td class="norm" onmouseover="this.className='hot'" onmouseout="this.className='norm'">
            Hej igen
        </td>
    </tr>
</table>

Hej du'

Prøv evt. at kigge her ;)

http://www.webdesign101.dk/www/cssmenu/index.php

nickyc, Alternativt kan du sætte gøre det med A:

<style>
#tabel a {
    display: block;
    background-color: #ccc;
}
#tabel a:hover {
    background-color: #fee;
}
</style>
<table id="tabel" width="100%">
    <tr>
        <td>
            <a class="navn" href="blah">blah</a>
        </td>
    </tr>
    <tr>
        <td>
            <a class="navn" href="blah">blah</a>
        </td>
    </tr>
</table>

class="navn" er ikke nødvendig - glemte at fjerne det :)

Ok, tak for svar, men får en lille syntakts fejl, kan sq ik lige se hvad der er galt?

echo "<td class='mennorm' onmouseover='this.className=\"menover\" onmouseout='this.className=\"mennorm\">
<A href='index.php?pageid=".$row['doc_id']."' onMouseover=\"dropdownmenu(this, event, menu".$i.", '200px')\" onMouseout=\"delayhidemenu()\">".$row['title']."</A></td>";

Du manglede et par '

echo "<td class='mennorm' onmouseover='this.className=\"menover\"' onmouseout='this.className=\"mennorm\"'>
<A href='index.php?pageid=".$row['doc_id']."' onMouseover=\"dropdownmenu(this, event, menu".$i.", '200px')\" onMouseout=\"delayhidemenu()\">".$row['title']."</A></td>";

Ok, men det ser stadig ikke helt ud til at virke....

Se på www.musikkentiljeresbryllup.dk/index.php
--------------------------------------------------------
Mit css ser sådanne ud:

#menu .menover {
    color: #FFF;
    background-color: #911919;
}

#menu .mennorm a {
    color: #000;
    background-color: #FFF;
}

#menu .menover a: {
    color: #FFF;
    background-color: #911919;
}

#menu a:hover {
    color: #911919;
}

#dropmenudiv{
    position:absolute;
    padding: 2px 0 0 0;
    border-bottom-width: 0;
    /*font: normal 10px Verdana;*/
    line-height:18px;
    z-index:100;
}

#dropmenudiv a{
    display: block;
    text-indent: 1px;
    border-bottom: 0px solid;
    padding: 1px 4px;
    text-decoration: none;
    border-bottom: 1px solid #FFF;
    text-align: left;
    color: #FFF;
    background-color: #911919;
}

#dropmenudiv a:hover{ /*hover background color*/
    background-color: #911919;
    color: #000;
}

Må jeg foreslå at prøve noget andet?

.menuWrap a {
    color: #000;
    background-color: #FFF;
    display: block;
}
.menuWrap a:hover {
    color: #FFF;
    background-color: #911919;
}

Og din menu nu:

<div class="menuWrap">
    <table cellpadding="4" cellspacing="0" border="0"><tr>
        <td><A href='index.php?pageid=1' onMouseover="dropdownmenu(this, event, menu1, '200px')" onMouseout="delayhidemenu()">Forside</A></td>
        <td><A href='index.php?pageid=11' onMouseover="dropdownmenu(this, event, menu2, '200px')" onMouseout="delayhidemenu()">Bands</A></td>
        <td><A href='index.php?pageid=12' onMouseover="dropdownmenu(this, event, menu3, '200px')" onMouseout="delayhidemenu()">DJ</A></td>
        <td><A href='index.php?pageid=13' onMouseover="dropdownmenu(this, event, menu4, '200px')" onMouseout="delayhidemenu()">Pianister</A></td>
        <td><A href='index.php?pageid=14' onMouseover="dropdownmenu(this, event, menu5, '200px')" onMouseout="delayhidemenu()">Sangere</A></td>
        <td><A href='index.php?pageid=15' onMouseover="dropdownmenu(this, event, menu6, '200px')" onMouseout="delayhidemenu()">Underholdning</A></td>
        <td><A href='index.php?pageid=16' onMouseover="dropdownmenu(this, event, menu7, '200px')" onMouseout="delayhidemenu()">Hvorfor bruge os?</A></td>
        <td><A href='index.php?pageid=17' onMouseover="dropdownmenu(this, event, menu8, '200px')" onMouseout="delayhidemenu()">Anbefalinger</A></td>
        <td><A href='index.php?pageid=18' onMouseover="dropdownmenu(this, event, menu9, '200px')" onMouseout="delayhidemenu()">Om os</A></td>
        <td><A href='index.php?pageid=19' onMouseover="dropdownmenu(this, event, menu10, '200px')" onMouseout="delayhidemenu()">Gode links</A></td>
    </tr></table>
</div>

Det fungere på sin vis, men alligevel ikke, for vil have hele td'en for baggrundsfarven rød, og ikke kun bagved teksten.

Hmm underligt, prøv at fjerne cellpadding på tabellen... Evt. smid padding i .menuWrap a

Min pointe er, at det er lidt dumt at bruge javascript-tricks når det rent faktisk kan laves med ren css...

Kommentar: nickyc
26/02-2007 20:07:10

Hvis du bruger IE er der noget med at den lige skal have et HACk, hvis du skal bruge Hover på andre elementer end A.

Se her:
Peter Nederhoff
:hover på ethvert element er Peter Nederhoffs begavede artikel om udviklingen af en MS behavior (.htc-fil), der gør det muligt at anvende :hover pseudo-klassen på et vilkårligt element i IE i stedet for kun på a-markøren.

Peter Nederhoffs eksempelmenu er ikke færdigudviklet. Som det fremgår af artiklen er der problemer med visningen i IE5.

Min version af denne menu finder du som eksempel 4. Jeg vil dog anbefale dig også at kigge på Nederhoffs demo. Hans ikoner er meget flottere end mine.

2004.05.15 gør jeg opmærksom på, at der på Peter Nederhoffs ovennævnte hjemmesider er publiceret et opdateret .htc-script. Det er ikke det, jeg har anvendt i mit eksempel.

Hentet fra webdesing101.dk

http://www.webdesign101.dk/www/cssmenu/dynamiske_menuer.php