Er is een (redelijk simpele) manier
om het rollover-button-effect te krijgen d.m.v. CSS.

• Het werkt met 1 plaatje waarop beide buttons staan
• Ze staan onder elkaar
• Zie hieronder het "hoe en wat"

Button 1: w=125 & h=26		Button 2: w=125 & h=26
De uiteindelijke rolloverbutton wordt zo: w=125 & h=52

Het voorbeeld op internet werkte met "id", maar dat vond ik knap lastig,
en alhoewel 't werkte, kwam ik niet heelhuids door de w3c validator die mekkerde dat ik de ID maar 1x kon toepassen in het document... (zal best)
Heb er dus voor gekozen om de css zodanig te wijzigen dat er nu een class op kan worden toegepast.

• de onderstaande css code - (wijst zich vanzelf) -komt in de stylesheet (embedded of external)
• en er wordt een class op toegepast
• de hoogte van de button/banner is de hoogte van de "enkele" button/banner, dus NIET de hoogte van het plaatje met beide images
• bij de hover code wordt ook de negatieve hoogte genoteerd

.butthome
{
display: block;
width: 125px;
height: 26px;
background: url(buttons/button-home-d.jpg) no-repeat 0 0;
}

.butthome:hover
{

background-position: 0 -26px;
}

.butthome span
{
display: none;
}

• In de body wordt tenslotte de class als volgt toegepast:

<a class="butthome" href="index.html" title="button home"> <span>HOME</span> </a>
• en dat IS 't eigenlijk
• hieronder 't resultaat
•  
• HOME

Nog een simpel back-home-next-menuutje met css-rollover-buttons.