Cel verkleuren bij mouseover

Info 
Door: Admin Moeilijkheidsgraad: 1/3
Views:29.037Reacties: 12(Bekijken)
  Log in om zelf te reageren
 Waardering:7.8/10 (6 stemmen)



Zoals je vaak op veel sites ziet, kunnen cellen van een tabel verkleuren als je er met de muis overheen gaat, zoals in ons menu hierboven.

De code voor al dit moois zie je hieronder:

#Code
1
2
3
4
5
6
<table bgcolor="#0066cc" border="1">
<tr>
<td width="250" onmouseover="this.style.backgroundColor='#99cccc';"
onmouseout="this.style.backgroundColor='#0066cc'" nowrap align="center">Welkom!</td>
</tr>
</table>


De eerste kleur die genoemd wordt(#0066cc) is de kleur die je ziet als de muis niet op de cel staat. De tweede kleur(#99cccc) is de kleur die we zien als de muis eroverheen gaat. Natuurlijk kun je verder alles naar wens aanpassen, zoals de breedte(250), de rand(border="1"), de uitlijning(align="center") en de tekst die er in staat(Welkom!)

Met links

Dit werkt best leuk, zolang je geen link in de cel zet. Dan is het veel mooier om de hele link als cel te laten dienen, net als in ons menu. Dat is iets ingewikkelder. Het werkt met CSS. We geven 2 stijlen op voor de tabelcel(de <td>):een gewone en een hover, dus voor wanneer de muis eroverheen gaat. Dat doe je bijvoorbeeld zo:

#Code
1
2
3
4
5
6
7
8
9
10
td.mijncel a {
display: block;
width:100%;
background-color: #0066cc;


td.mijncel a:hover {
width:100%;
background-color: #5B9CD9;
}


In je html voor de tabel zet je dan:

#Code
1
2
3
4
5
<table>
<tr>
<td class="mijncel">Dit is de link</td>
</tr>
</table>


Zo moet het lukken. Je kunt in de styles nog veel meer stijlen opgeven, zoals de kleur van de link zelf(die dus ook weer kan veranderen) etc. Kom je er niet uit? Stel je vraag even in het forum!

12 reacties
5v3n Geplaatst op 17-07-2007 om 11:41
 

Regular
Leuke tut ;-)
Alles werkt bij mij 8)
timmm Geplaatst op 24-05-2007 om 17:11
 

Regular
oke, dankj
Peck Geplaatst op 18-05-2007 om 15:10
 

Moderator
Dan kan zeker,
#Code
1
2
3
4
5
6
7
8
9
10
td.mijncel a {
display: block;
width:100%;
color: #0066cc;


td.mijncel a:hover {
width:100%;
color: #5B9CD9;
}

en
#Code
1
2
3
4
5
<table>
<tr>
<td class="mijncel">Dit is de link</td>
</tr>
</table>

Maar zulke vragen dien je op het FORUM te stellen!!!!!!!
Of op google zoeken, daar vind je het meteen!
timmm Geplaatst op 18-05-2007 om 12:20
 

Regular
kan je het ook andersom doen, dat de tekst verkleurd in plaats van de achtergrond? zo ja, wat is de code daarvan dan?
stinohomepage Geplaatst op 16-11-2006 om 19:29
 

Regular
waar moet je
td.mijncel a {
display: block;
width:100%;
background-color: #0066cc;
}

td.mijncel a:hover {
width:100%;
background-color: #5B9CD9;
}
zetten ?

Pagina 1 2 3 

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!


Terug naar gewone pagina

Websitemaken wordt gehost door Nucleus.be, uw Hosting Solution Builder