Tabel veranderd van kleur on mouse-over

[L01]

Op de website van songteksten.com zie je links een menu'tje staan.

Als je daar overheen gaat veranderd de achtergrond van de tekst van kleur.
Ik ben op zoek gegaan in Dreamweaver MX 2004 maar ik heb daar niets daarover kunnen vinden, ook in een boek vond ik geen resultaat.

Toen ben ik de broncode gaan bekijken van de website en heb ik het volgende gevonden:

code:

<td class="menuitem" onclick="javascript:window.location.href='/index.php'" onmouseout="this.style.backgroundColor='CED4E8'" onmouseover="this.style.backgroundColor='EAECFD'">&nbsp;&nbsp;Home</td>

Dit werkt zeer goed maar toch heb ik een vaag:

Is dit zelfde effect ook te doen met behulp van Dreamweaver? Dus dat je aan kan geven in Dreamweaver dat de kleur van de tabel (want dat gebruiken ze neem ik aan) als je eroverheen gaat met de muis.

thnx

[Ruzor]

In Dreamweaver kan je toch gewoon die code invoeren en die veranderen naar jouw smaak?

[L01]

ja dat klopt zo heb ik ook gedaan, maar ik vind het nogal omslachtig, ik heb liever dat je gewoon ergens je kleuren in kan voeren.

Ik ben namelijk niet zo erg goed in code en het onthouden ervan

[ Voor 20% gewijzigd door L01 op 22-08-2004 12:43 ]

[Johnny]

Mag ik even zeggen dat dit geen goede manier is om de navigatie van je website op te bouwen.

Door een onclick te gebruiken kan je niet meer met het toetsenbord navigeren, kunnen bepaalde browsers voro bijvoorbeeld visueel gehandicapten de links niet meer vinden, en zullen ook zoekmachines zoals Google je website niet/slecht indexeren.

Je kunt dit allemaal voorkomen door gewoon een normale <a> link te gebruiken. Het leuke daarvan is datje via CSS met :hover de achtergrondkleur kunt veranderen waardoor je ook weer geen javascript nodig hebt.

[Zoefff]

Je kan veel beter een unordered list gebruiken als navigatie, en in je css een hover neerkwakken, geeft het zelfde effect, en is veel minder omslachtig.

HTML:

<style>
li {
    display:block;
    background:#CCDDFF;
    width:100px;
}
li:hover {
    background:#AACCFF;
}
</style>


<ul>
    <li>Blaat 1</li>
    <li>Blaat 2</li>
    <li>Blaat 3</li>
</ul>

[ Voor 200% gewijzigd door Zoefff op 22-08-2004 12:52 ]

[Verwijderd]

Tip: http://www.naarvoren.nl/artikel/hover.html

[crisp]

Hier wat recente menuutjes van mijn hand:
menu 1
menu 2
menu 3

[Zoefff]

Dit (http://www.naarvoren.nl/artikel/hover.html) is ook een leuk artikel over menu's om even door te lezen, aan de hand daarvan heb ik mn laatste menu gemaakt

Hm krijg nou tieten, die heeft euss dus ook al gegeven, sorry Geeft wel aan dat het een leuk artikel is

[ Voor 30% gewijzigd door Zoefff op 22-08-2004 13:25 ]

[L01]

Geweldig! precies wat ik zocht! thnx!

@Johnny, javascript wordt door die site gebruikt waar ik die code van af geript had, zelf gebruik ik dat niet.

[ Voor 59% gewijzigd door L01 op 22-08-2004 16:07 ]

[klokop]

crisp schreef op 22 augustus 2004 @ 13:17:
Hier wat recente menuutjes van mijn hand:
menu 1
menu 2
menu 3

Menu 1 heeft wat overlap probleempjes in FireFox.

[crisp]

klokop schreef op 23 augustus 2004 @ 15:39:
[...]

Menu 1 heeft wat overlap probleempjes in FireFox.

Menu 1 is een compromis om het ook in IE redelijk werkend te krijgen, maar dat geeft idd in alle browsers wel wat problemen. Dit is een versie die het wel goed doet in Gecko-browsers, en meteen mooi illustreerd hoe brak en buggy de CSS support van IE is

[Verwijderd]

crisp is de man