Het is weer zondag en dat betekent een nieuwe webtip. Vandaag gaan we kijken hoe we een zogenaamde rollover button kunnen maken. Dit is een button die veranderd wanneer je er met je muis overheen gaat., zie bijvoorbeeld de 'tabs' hierboven op Skindo. Om dit te realiseren maken we gebruik van CSS, enige kennis over CSS is dan ook wel handig bij deze webtip!

Laten we maar eerst eens beginnen met de HTML. Het HTML-gedeelte is verrassend simpel:

<a id="contact" href="/contact/" title="Neem contact met ons op">Contact</a>

Vervolgens maken we deze doodnormale link op met CSS. Dit kan op twee manieren: Of we laden een compleet nieuw plaatje zodra de muis over de link gaat. Of we gebruiken één plaatje, maar laten steeds maar een gedeelte van dat plaatje zien: één gedeelte wanneer de muis over de link gaat en één gedeelte wanneer dit niet het geval is.

We kiezen voor het laatste, omdat bij gebruik van twee verschillende plaatjes de button gaat 'flikkeren' wanneer je je muis er voor de eerste keer overheen beweegt. Dit komt doordat de server het rollover-plaatje pas laadt wanneer je er overheen gaat.

In ons voorbeeld gebruiken we dan ook het volgende plaatje:

We gebruiken nu de bovenste button in de 'normale toestand' en het onderste in de 'rollover toestand'. Dit doen we als volgt in CSS:

#contact {
	display: block;
	width: 100px;
	height: 27px;
	background: url('contact-button.gif') no-repeat;
	text-indent: -99999px;
}

#contact:hover {
	background-position: 0 -27px;
}

Ons plaatje is 100 pixels breed en 54 pixels hoog. Wat we hier in feite doen is de bovenste 27 pixels gebruiken voor de 'normale toestand' en de onderste 27 pixels voor de 'rollover toestand'. Dit doen we door de achtergrond als het ware met 27 pixels naar boven te verschuiven wanneer iemand er met zijn/haar muis overheen gaat.

Vervolgens zitten we alleen nog met de tekst in onze link, deze willen we natuurlijk niet laten zien, omdat de tekst 'Contact' al in onze button verwerkt zit. Echter is het voor zoekmachines en voor mensen die zonder afbeeldingen browsen wel noodzakelijk dat er een tekst is opgegeven in de link, daarom maken we gebruik van 'text-indent' om onze tekst zo uit onze pagina te verschuiven.

KLIK HIER VOOR EEN DEMO