Kijk mama, zonder events!
Als ik mag kiezen uit een shortlist van de bugs die mij het meest ergeren in Microsoft Internet Explorer, is het die van gebrek aan ondersteuning van de hover pseudoklasse. Eigenlijk werkt een hover in IE alleen op een link, meerbepaald op het a element.
Dat zuigt.
Want dat betekent dat je voor elk mousover effect moet gaan scripten. Is dat op zich al vrij vervelend, het wordt pas echt ergerlijk wanneer je dat iedere keer opnieuw moet doen voor telkens hetzelfde effect. Een concreet voorbeeld: je hebt een CSS klasse voor je buttons aangemaakt, waarin je onder andere een achtergond definieert.
En je wil een andere achtergrond bij een mouseover event — en uiteraard zet je hem terug naar de originele achtergrond bij een onmouseout. In de meeste browsers is dat geen probleem; een hover status van de klasse in je stylesheet definiëren en klaar is kees.
Maar dan is er dus nog IE. In principe moet je daarvoor events aan al je buttons gaan hangen, bijvoorbeeld zo:
<input type="submit" class="button" onmouseover="this.style.backgroundImage=url(back_button_on.gif)" onmouseout="this.style.backgroundImage=url(back_button_off.gif)" />
Een keer, geen probleem. De tweede keer krijg je die déjà vu. Wanneer je beseft dat je die buttons nog op 30 pagina's gaat moeten scripten én dat we tenslotte al in 2005 beland zijn, ga je op zoek naar een intelligentere oplossing.
Het principe
Wat je dan nodig hebt, zijn zogeheten event listeners of JavaScript triggers. Met andere woorden: je laadt een scriptje dat controleert of er iets gebeurt op een bepaalde plaast in de pagina. In ons voorbeeld moet het scriptje controleren of er een onmouseover event op de buttons gebeurt. Concreter nog: wanneer een input element de CSS klasse button heeft, moet bij een onmouseover een andere klasse toegepast worden. Goed nieuws: het principe van event listeners bestaat al. Minder goed nieuws: eentje die reageert op alle elementen van een bepaalde klasse, is zometeen niet terug te vinden.
Het script
En daarom: deze doet precies wat wij nodig hebben.
1. hoverButton = function() {
2. if (document.all&&document.getElementById) {
3. inputs = document.getElementsByTagName("input");
4. for (i=0;i <inputs.length; i++) {
5. if (inputs[i].className=="bt") {
6. inputs[i].onmouseover=function() {
7. this.className+=" over";
8. }
9. inputs[i].onmouseout=function() {
10. this.className=this.className.replace (" over", "");
11. }
12. }
13. }
14. }
15. }
16. window.onload=hoverButton;
Regeltje 1 spreekt voor zich; we definiëren de functie. In regeltje 2 zeggen we eigenlijk dat de code alleen voor IE van toepassing is (de andere browsers begrijpen de :hover uit de stylesheet).
Daarna gaan we even filteren. Omdat buttons per definitie input elementen zijn, gaan we eerst daar een selectie van maken, zoals in lijn 3.
In lijn 4 en 5 gaan we met een loopje alle input elementen controleren op de klasse button. Regeltje 6 zegt dat we voor elk van die elementen een functie gaan uitvoeren voor het onmouseover event. De functie zelf zegt dan weer dat we de klasse over aan de huidige klasse moeten toevoegen (7 en 8). En we doen precies het omgekeerde voor de onmouseout op regeltje 9 en 10.
Uiteindelijk laden we de functie zodra het huidige venster geladen wordt (16).
De stylesheet
Weet u nog wat we net in het scriptje gedaan hebben ter hoogte van regeltje 7? Juist, we hebben gezegd dat de browser de klasse over moet gebruiken. Dus voegen we die toe aan de stylesheet; precies daar waar we de hover gedefinieerd hebben.
Als de code zo in de stylesheet staat:
.bt:hover {
background:url(back_button_on.gif)
}
... voegen wij daar zo de over klasse aan toe:
.bt:hover, .over {
background:url(back_button_on.gif)
}
En klaar is kees. Hadden wij al propere html code zonder opmaak door een aparte stylesheet die de volldige opmaak voor zich neemt, nu is onze html code ook nog vrij van javascript vervuiling. HTML gaat er anno 2005 weer precies zo uitzien als het bedoeld was in 1992. Clean and lean.
Een uitgewerkt voorbeeld vindt u hier.
Meer informatie:
A List Apart: JavaScript Triggers
Digital Web Magazine: Separating behavior and structure
JavaScript tutorial: Manipulating CSS using the DOM
Cookiecrook.com: getElementByClass (view source)
http://druppels.be/movableType/mt-tb.cgi/811
Reacties (3)
Er is ook de IE7 lib: http://dean.edwards.name/IE7/
Enkele javascript includes, en IE6 wordt zo goed als mogelijk omgevormd tot een CSS2 compliant browser. En dus moet je die trukjes zelf niet meer toepassen. ;)
Worth checking out, IMHO...
sprak Inferis 
op April 10, 2005 2:24 PMGa jij fun hebben met xaml :-p
er staat een foutje in de js-code:
4. for (i=0;i < inputs.length; i++) {
moet zijn:
4. for (i=0;i
sprak Corniel op August 21, 2006 1:56 PMPlaats zelf een reactie
