Skip links en inhoudsopgave
Van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen

Korte omschrijving

Als je met de cursor van boven naar beneden, van beneden naar boven, van links naar rechts of van rechts naar links over de afbeelding beweegt, sleep je een nieuwe afbeelding over de oude. Welke nieuwe afbeelding is afhankelijk van de richting waarvan je komt. De vervanging is tijdelijk, zodra de cursor de afbeelding verlaat staat de originele er weer.

In Internet Explorer 6 werkt het slepen niet en floepen de afbeeldingen in één keer tevoorschijn.

Alles op deze site kan vrij worden gebruikt. Je gebruikt het wel op eigen risico: als er ergens fouten in zitten, ben ik daar niet verantwoordelijk voor en ook niet voor eventueel daardoor aangerichte schade in welke vorm dan ook. Een link naar https://www.css-voorbeelden.nl is niet verplicht, maar wordt wel gewaardeerd.

Opmerkingen

De foto's zijn gemaakt in het Vondelpark in Amsterdam op Koninginnedag 2009. Als je jezelf herkent en de originele foto wilt hebben, stuur dan even 'n mailtje naar info@css-voorbeelden.nl.

De veranderde afbeelding verdwijnt weer als niet meer over de afbeelding wordt gehoverd, het gaat dus niet om een blijvende verandering.

Als je bij div#wrapper de overflow: hidden; even uitzet, kun je beter zien wat er gebeurt als je dingen verandert.

Zonder css wordt alleen de eerste afbeelding getoond, alsof er geen tweede is. Daarom moet je geen belangrijke informatie op deze manier geven. Als je dat toch doet, zorg dan ook voor 'n alternatieve manier, bijvoorbeeld gewone links die je buiten het scherm positioneert, en die dus alleen zonder css zichtbaar worden.

De vervangende afbeeldingen worden pas geladen als ze nodig zijn.

Opmerking 3 oktober 2011: deze tekst is inmiddels alweer 'n tijdje oud. Ongetwijfeld is een aantal van de in de tekst genoemde problemen inmiddels opgelost. Ik heb dat verder niet meer gecontroleerd, omdat dat veel tijd zou kosten. En deze constructie is wel leuk en aardig en zo, maar inmiddels biedt css3 veel en veel meer mogelijkheden op dit gebied, dus ik kan m'n tijd wel beter gebruiken.

Links in deze uitleg, vooral links naar andere sites, kunnen verouderd zijn. Op de pagina met links vind je steeds de meest recente links.

Alles op deze site is gemaakt op een systeem met Linux. Daarbij is vooral gebruik gemaakt van Quanta Plus, GIMP en Firefox met extensies. De pdf-bestanden zijn gemaakt met LibreOffice.

Vragen of opmerkingen? Fout gevonden? Ga naar het forum.

Iets gevonden waar je wat aan hebt? Mooi. Als je je waardering wilt uiten, maak dan een donatie over aan War Child Nederland, een organisatie die kinderen uit oorlogsgebieden helpt hun trauma's te verwerken. Of - nog beter - wordt donateur:
War Child Nederland

Achterliggend idee

Op Internet Explorer 6 na werkt bij alle nieuwere browsers :hover op alle elementen. Over Internet Explorer 6 later meer.

De hele constructie staat in een wrapper-div met position, zodat daarop gepositioneerd kan worden. Deze wrapper-div heeft 40 px meer hoogte en breedte dan de afbeeldingen, zodat er aan alle kanten 20 px ruimte is voor 'n zone voor 'n speciaal doel.

Binnen deze wrapper-div komen vier absoluut gepositioneerde divs, eentje voor elke vervangende afbeelding, die absoluut gepositioneerd worden.

Onder deze vier divs komt een gewone afbeelding. Dat is van belang voor mensen die geen css gebruiken: die zien 'n gewone normale afbeelding. Vervangen kan uiteraard niet, want daarvoor is css nodig.

Omdat de vier divs absoluut gepositioneerd zijn, komt de afbeelding ook gewoon bovenin de wrapper-div te staan. En omdat de afbeelding als laatste in de code staat, komt deze dus óver de vier divs te staan, en schermt daarmee deze af tegen hoveren. Behalve 'n zone aan alle kanten van 20 px: elk van de vier divs heeft aan 'n eigen kant 'n zone waar alleen die div reageert op hoveren. Voor dit afschermen tegen hoveren moet de afbeelding trouwens ook nog absoluut gepositioneerd worden, anders werkt het niet goed.

Ik beschrijf hier eerst de afbeelding die je vanaf de bovenkant kunt binnenslepen.

Deze staat dus binnen absoluut gepositioneerde div. In deze div zit alles wat nodig is om de nieuwe afbeelding binnen te slepen.

In de div staat 'n enorme serie lege <span>'s, waar via css van alles mee wordt gedaan. De hoogte van de spans is 5 px. Je kunt ook 'n grotere hoogte nemen, dan heb je minder code nodig, maar bij 'n te grote hoogte wordt de beweging schokkerig.

De vervangende afbeelding is een background-image. Die heeft van zichzelf geen hoogte en breedte, maar vult alleen het element op waar hij in staat. Dus de spans moeten de breedte van de afbeelding krijgen. Die krijgen ze bij hoveren, maar zonder hoveren is de hoogte 5 px. Omdat ze als blok-element worden weergegeven, beginnen ze automatisch op 'n nieuwe regel. Dit levert dus 'regels' van 5 px hoogte op. De spans moeten de hele originele afbeelding bedekken, dat is 'n kwestie van tellen en proberen.

En dan beginnen de problemen: Firefox en Safari gaan overal mee akkoord, maar Opera en Internet Explorer 7 gedragen zich als 'n veganist versus 'n carnivoor. Wat de een het einde vindt, leidt bij de ander tot het virtuele equivalent van 'n woede-koliek. Bij de beschrijving van de code zal ik zoveel mogelijk erbij zetten waarom iets zo is gedaan, hier alleen het belangrijkste.

Als ik de spans 'n hoogte en breedte geef, werkt 't niet in Opera en Internet Explorer 7, want die constateren hoveren dan niet. Als ik 'n doorzichtig plaatje boven de spans zet, werkt 't prima in Opera, maar Internet Explorer wordt dan ongelooflijk traag. Zelfde verhaal voor 'n background-image in de spans. Opera en Internet Explorer 7 blijken uiteindelijk beide gelukkig met 'n span die 0 px hoog is (anders maakt Internet Explorer 7 'm veel te hoog), en 'n doorzichtige border. Door die border reageren de spans op hoveren, ook al zijn ze verder leeg.

Tot nu toe is alleen nog maar 't constateren van de hover bereikt. Er moet natuurlijk ook nog echt iets gebeuren als er over de spans wordt gehoverd.

Als er over 'n span wordt gehoverd krijgt die 'n background-image: het nieuwe plaatje. De span krijgt de hoogte van het plaatje. Maar omdat die spans als blok-elementen worden weergegeven, staan ze onder elkaar. Dus bij elke volgende span begint 't plaatje weer iets lager. En omdat dat plaatje volledig wordt weergegeven, schuift het de eronder liggende spans omlaag. Die worden daardoor onbereikbaar voor de cursor.

Om dat te voorkomen zet ik de spans met 'n negatieve marge terug omhoog. Die negatieve marge is even groot als de hoogte van 't plaatje (met 'n kleine afrondingscorrectie). Dit werkt in alle browsers, position en andere oplossingen werken niet in alle browsers. En omdat de spans onder elkaar staan met 'n hoogte (eigenlijk 'n border) van 5 px, lijkt de afbeelding mee omlaag te schuiven met de cursor.

Het plaatje wordt over de volle hoogte zichtbaar en gaat dus boven de oude afbeelding uitsteken. Om dat te hoge deel af te kappen is bij de wrapper-div overflow op hidden gezet.

Omdat de originele afbeelding de bovenste div volledig bedekt, reageert deze (en dus de daarin liggende spans) niet op hoveren. Aan de bovenkant is daarom een padding aangebracht van 20 px. Deze ligt boven de afbeelding en reageert dus wel op hoveren. Zodra hierover gehoverd wordt, krijgt de div met de spans 'n hogere z-index, waardoor deze boven de originele afbeelding komt te liggen en dus reageert op hoveren.

Omdat deze 'gevoelige' zone alleen aan de bovenkant ligt, verschijnt de nieuwe afbeelding alleen maar als de cursor vanaf de bovenkant de originele afbeelding binnengaat.

Zodra de nieuwe afbeelding exact gelijk is met de originele afbeelding en de cursor nog 1 px meer omlaag gaat, verdwijnt de nieuwe afbeelding. In de praktijk blijkt dit nogal sadistisch te zijn: net als je de afbeelding zichtbaar hebt is hij floep, weg. Daarom is onderaan ook 'n zone van 20 px aangebracht waarin de nieuwe afbeelding nog zichtbaar blijft.

Voor de andere drie vervangende afbeeldingen geldt in principe hetzelfde, maar dan steeds vanaf 'n andere kant. In principe. In de praktijk zijn er nogal wat aanpassingen nodig. Deze code moet dus heel goed worden getest in zoveel mogelijk browsers.

Internet Explorer 6

Voor de brekebeen onder de browsers, Internet Explorer 6, werkt dit niet, want die herkent hover alleen maar bij 'n <a>. Helaas worden de spans wel herkend, waarbij als extra bonus transparent wordt veranderd in zwart. Heel apart, dat wel, maar toch niet helemaal wat je wilt hebben. Dus wordt wat css toegevoegd om dit te voorkomen, speciaal voor Internet Explorer 6.

Omdat Internet Explorer 6 hoveren over 'n <a> wel herkent, is in de html wat code toegevoegd die alleen door Internet Explorer 6 wordt gelezen. Aan alle vier de kanten van de originele afbeelding staat een <a> van 20 px hoog. Als de cursor daaroverheen hovert, wordt deze <a> vergroot en komt er een achtergrond-afbeelding in te staan, die de originele afbeelding vervangt. Deze nieuwe afbeelding verdwijnt weer als de cursor buiten de afbeelding komt.

Het langzaam binnenslepen van de vervangende afbeelding, zoals dat bij alle andere browsers wel kan, kan dus niet bij Internet Explorer 6: de vervangende afbeelding floept gewoon in één keer tevoorschijn.

Sommige mensen gebruiken de Tab-toets en niet de muis om van link naar link te gaan, bijvoorbeeld vanwege een handicap. De vier extra toegevoegde links zouden ook worden bezocht als de Tab-toets wordt gebruikt, terwijl daar geen enkele reden voor is.

Daarom is bij de links in de html voor Internet Explorer 6 tabindex="-1" toegevoegd. Dit zorgt ervoor dat deze links nooit worden bezocht. Eigenlijk is dit iets van html 5, een toekomstige versie, maar het werkt al in alle browsers. Omdat de html voor Internet Explorer 6 als commentaar wordt gezien door de validator, heeft het ook geen invloed op het valideren van de html. Er is dus geen reden om al het doctype van html 5 te gebruiken.

Beschrijving van code en css

De code die te maken heeft met de basis van dit voorbeeld is rood gekleurd. Alle voor dit voorbeeld niet-essentiële code is bruin.

Deze uitleg hoort bij het voorbeeld dat in de download zit. Het voorbeeld uit de download verschilt iets van het voorbeeld hier op de site. In de download ontbreken bijvoorbeeld de witte vlakken met de links. Ook in de kopregels zit vaak wat verschil. Daarnaast kunnen er nog andere (meestal kleine) verschillen zijn.

Als je deze uitleg leest naast de broncode van het voorbeeld op de site, kan het dus bijvoorbeeld zijn dat 'n h1 uit de css bij 'n <h2> uit de html hoort. Maar het gaat niet om hele grote, fundamentele afwijkingen.

Als je dit lastig vindt, downloadt dan de hele handel (ga terug naar het voorbeeld en kies daar voor downloaden). In de download zit 'n voorbeeld dat wel naadloos aansluit op de uitleg in de download.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">

Een document moet met een doctype beginnen om weergaveverschillen tussen browsers te voorkomen. Zonder doctype is de kans op verschillende (en soms volkomen verkeerde) weergave tussen verschillende browsers heel erg groot.

Geldige doctypes vind je op www.w3.org/QA/2002/04/valid-dtd-list.html.

Gebruik het volledige doctype, inclusief de url, anders werkt het niet goed.

De toevoeging achter <html hierboven hoort bij het gekozen doctype.

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven. Als je als doctype html hebt gekozen, moet je niet eindigen op />, maar op > (dit geldt voor alles in de head wat eindigt op />).

utf-8 is de beste charset (tekenset), omdat deze alle talen van de wereld (en nog heel veel andere extra tekens) bestrijkt, maar toch niet meer ruimte inneemt voor de code dan nodig is. Als je utf-8 gebruikt, hoef je veel minder entiteiten (&auml; en dergelijke) te gebruiken, maar kun je bijvoorbeeld gewoon ä gebruiken.

Deze regel moet zo hoog mogelijk komen te staan, als eerste regel binnen de head, omdat hij anders door sommige browsers niet wordt gelezen.

<link rel="stylesheet" type="text/css" href="../../css/naam-van-stylesheet.css" /> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Dit stukje code heeft in dit voorbeeldbestand geen enkel nut. Normaal genomen is het een verwijzing naar een extern stylesheet, waarin de style staat. In dit voorbeeld verwijst de href naar een niet bestaand bestand.

De bedoeling is dat je bovenstaande regels aanpast voor je eigen bestand. De hele style, die onder deze regels in de <head> staat, wordt dan in het externe bestand geplaatst waar de href naar verwijst. In dat bestand komt de style precies zo te staan zoals die nu in de <head> staat. Het bestand moet eindigen op .css.

Voordeel van een externe stylesheet is onder andere, dat deze geldig is voor alle pagina's waaraan deze is gelinkt. 'n Verandering in de lay-out hoef je dan maar op één enkele centrale plek te aan te brengen.

In die externe stylesheet zet je alles wat in dit voorbeeld tussen <style type="text/css"> en </style> staat (zonder deze begin- en eindregel).

De bovenste regel is voor de algemene stylesheet, geldig voor alle browsers. Dit is gewoon 'n link die naar 'n bestand elders verwijst, waar de css in staat. Op de plaats van "../../css/naam-van-stylesheet.css" moet je pad naar en naam van jouw stylesheet invullen.

Het eigenaardige stukje code daaronder heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden. Op deze manier kun je 'n stylesheet alleen voor Internet Explorer opnemen.

Dit stukje geldt voor alle versies van Internet Explorer, maar je kunt het ook per versie aangeven.

De link verwijst naar een aparte stylesheet voor Internet Explorer, waarin je css speciaal voor die browser zet. Op de plaats van "../../css-naam-van-ie-stylesheet.css" moet je pad naar en naam van je stylesheet voor Internet Explorer invullen.

De link naar het aparte stylesheet voor Internet Explorer moet ná de link naar het algemene stylesheet komen, omdat de opdrachten voor Internet Explorer dan over die uit het algemene stylesheet heen gaan.

<style type="text/css">

Voor de duidelijkheid staat de style hier in het bestand zelf, maar het is beter deze in een apart stylesheet te zetten, zoals hierboven beschreven. In die stylesheet komt alles wat tussen bovenstaande regel en </style> staat.

Technisch gezien is er geen enkel bezwaar om het in die stylesheet te zetten met dezelfde vreselijke lay-out als die ik in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen omdat het volstrekt onoverzichtelijk is. Ik gebruik alleen deze lay-out omdat het anders veel te veel regels worden.

Voorbeeld van 'n goede lay-out in je css:


	div#header-buiten
	{
	    position: absolute;
	    right: 16px;
	    width: 100%;
	    height: 120px;
	    background: yellow;
	}

	div#header-binnen
	{
	    margin-left: 16px;
	    height: 120px;
	    text-align: center;
	}
body margin: 0; padding: 0;

Slim om te doen, is soms wat afwijkend in verschillende browsers.

font-family: Arial, Helvetica, sans-serif;

Lettersoort. Als er geen Arial is, wordt gezocht naar Helvetica. Als dat er ook niet is in ieder geval 'n lettersoort zonder schreef (dwarsstreepjes).

font-size: 110%;

Iets groter dan standaard. 't Zal de leeftijd zijn, maar ik vind de standaardgrootte wat te klein.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. Dat komt door Internet Explorer. Als ik als maateenheid iets als px neem, kunnen gebruikers van Internet Explorer de lettergrootte niet veranderen.

Maar als ik overal em neem als maateenheid, wat dan voor de hand zou liggen, kom ik in de problemen met versies van Internet Explorer ouder dan versie 8. De stappen van de verkleining of vergroting zijn in die browsers zo groot, dat 't gelijk onleesbaar klein of absurd groot is.

Als je nou echter bij body geen em gebruikt (font-size: 1.1em; zou hetzelfde moeten zijn als font-size: 110%;), dan is de lettergrootte in Internet Explorer te veranderen, en in oudere versies dan versie 8 zijn de tussenstappen teruggebracht tot normale grootte.

Dit werkt ook als je als lettergrootte 100% invult. Dat heeft geen enkele invloed op de lettergrootte, behalve dus dat de tussenstappen in oudere versies nu normaal werken.

In Internet Explorer 8 is deze bug eindelijk gerepareerd. Aangezien we waarschijnlijk nog vele jaren met oudere versies dan Internet Explorer 8 zitten opgescheept, zal deze truc ook nog jaren moeten worden toegepast.

background: #ff9;

Achtergrondkleurtje.

div#wrapper

De div met id="wrapper". De div waarin de hele handel staat.

position: relative;

Als ik elementen binnen deze div wil kunnen positioneren ten opzichte van deze div, moet ik 'n position geven. Ook al vul ik daar verder niets in, dat maakt niet uit, als ik maar 'n position geef.

margin: 60px auto 0;

Omdat hier maar drie getallen staan staat hier eigenlijk margin: 60px auto 0 auto; De missende waarde voor links wordt automatisch hetzelfde genomen als die voor rechts.

60 px vanaf de bovenkant, geen marge aan de onderkant, en links en rechts auto oftewel: evenveel. Waardoor de div en alles daarin dus horizontaal gecentreerd wordt. Deze manier van horizontaal centreren van een blok-element werkt alleen maar als het te centreren blok-element een breedte heeft.

width: 440px;

De breedte van de afbeelding plus marges links en rechts van 20 px voor 'n speciaal doel. De breedte is ook nodig om overflow: hidden te kunnen gebruiken en om met margin te kunnen centreren op de manier zoals hierboven is gedaan.

height: 426px;

De hoogte van de afbeeldingen is 386 px. Ik maak de wrapper-div 40 px hoger, zodat ik aan boven- en onderkant 20 px ruimte heb om later te gebruiken voor 'n speciaal doel. Door het opgeven van een hoogte kan ik overflow: hidden gebruiken.

overflow: hidden;

Alles wat niet in deze div past wordt verborgen. Als je dit even uitzet, kun je beter zien wat er gebeurt.

Als ik over 'n span hover, opent de nieuwe afbeelding. Die wordt gelijk over de volle hoogte of breedte weergegeven. Bij 'n span aan de bovenkant komt de nieuwe afbeelding dus (ver) boven de originele afbeelding uit, bij 'n span aan de linkerkant ver links buiten de originele afbeelding, enz. Door 'n hoogte en breedte op te geven en overflow op hidden te zetten, wordt alles van de nieuwe afbeelding wat buiten de oude afbeelding zou komen afgekapt. (Die marge van 20 px aan alle kanten los ik iets verderop op.)

div#boven

De div met id="boven". Dat is de div waar het hele regiment spans voor de van boven komende vervangende afbeelding staat.

position: absolute;

Het gebruik van 'n absolute positie zorgt ervoor dat deze div de andere divs en de originele afbeelding, die later wordt neergezet, niet in de weg zit. Er wordt gepositioneerd ten opzichte van div#wrapper, de eerste ouder-div met een position.

Wat hier nog belangrijker is: 'n position geeft de mogelijkheid om z-index te gebruiken, waarmee later deze div over de originele afbeelding heen kan worden neergezet, zodat hoveren dan overal werkt voor deze div.

left: 20px;

De originele afbeelding staat 20 px naar rechts ten opzichte van div#wrapper, dus deze vervangende afbeelding moet ook 20 px naar rechts. Links blijft dan een strook van 20 px vrij die gebruikt kan worden voor de van links komende afbeelding.

padding-top: 20px;

Deze div komt gewoon bovenin div#wrapper te staan. De originele afbeelding wordt straks 20 px omlaag gezet, zodat er een strook ontstaat waar deze div bereikbaar is voor hoveren, ongeacht z-index en zo.

In eerste instantie is dus alleen maar een strook van 20 px boven de originele afbeelding gevoelig voor hoveren. Maar omdat de z-index wordt verhoogd door dit hoveren, is hierna deze hele div#boven gevoelig voor hoveren.

Als ik nu over een van de latere spans hieronder hover, opent de afbeelding. De afbeelding wordt dan ook zichtbaar in deze padding, dus gelijk bij de eerste span is de afbeelding al 20 px hoog. Dat kun je waarschijnlijk wel wegwerken met bijvoorbeeld clip, maar ik vind 't eigenlijk wel 'n grappig effect, dus ik heb 't zo gelaten.

z-index: 1;

Dit is de standaard-instelling, dus dit zou eigenlijk niet nodig moeten zijn. Maar niet altijd wordt de later veranderde z-index goed teruggezet naar deze standaard-instelling.

div#boven:hover

Als ik over de div met id="boven" hover. Dit is ook de reden dat dit niet werkt in Internet Explorer 6: die kent hoveren alleen maar bij 'n <a>.

In eerste instantie is alleen 'n strook van 20 px hoog boven de originele afbeelding gevoelig voor hoveren, omdat de rest van deze div wordt afgedekt door de originele afbeelding.

height: 406px;

Internet Explorer 7 heeft hier 'n hoogte nodig, anders werkt 't hoveren niet. En 't stoort andere browsers niet, dus... 406 px is de hoogte van de afbeelding plus een marge van 20 px onderaan voor 'n speciaal doel.

z-index: 40;

Door de z-index te verhogen wordt nu de hele div#boven gevoelig voor hoveren. En dus alle daarin liggende spans, waarin het vervangende plaatje als background-image komt te staan.

div#boven span

De spans binnen de div met id="boven". Dat zijn de spans waarmee de afbeelding als het ware in horizontale regels wordt verdeeld. Door aan elke span straks 'n :hover mee te geven, krijg ik 'n vloeiende beweging bij het verschijnen van de nieuwe afbeelding.

display: block;

Van zichzelf is 'n span 'n inline-element. Door er 'n blok-element van te maken kan ik attributen als breedte en hoogte gebruiken.

width: 400px;

De span moet even breed zijn als de afbeelding, zodat het hoveren over de volle breedte werkt.

Bij het hoveren wordt een background-image toegevoegd aan de span. Ook hiervoor is een breedte nodig, want een background-image heeft van zichzelf geen afmetingen, het vult alleen maar het element waar het in staat.

height: 0;

Elke span is als het ware een horizontale regel die over de originele afbeelding wordt gelegd. En bij elke 'regel' hoort een :hover, zodat de nieuwe afbeelding met de cursor mee lijkt te schuiven. Hoe kleiner ik de hoogte van de spans maak, hoe vloeiender de beweging. Maar de hoeveelheid code neemt dan ook toe. Voor elke 'regel' staat er één keer <span></span>.

Ik wil 'regels' van 5 px hoog. Echter: als ik de spans 5 px hoog maak, werkt het hoveren niet in Opera. Die reageert dan helemaal nergens op. Ik kan dat opvangen door 'n transparante achtergrond te geven aan de span, maar als ik ook maar iets met achtergrond doe in de spans, maakt niet uit wat, wordt Internet Explorer 7 ongelooflijk traag. Position, padding, niets werkt goed bij álle browsers (bij Safari en Firefox werkt vreemd genoeg elke methode goed, nog veel meer dan ik hier beschrijf. Tja.)

Maar als ik elke span 'n border geef van 5 px blijkt dat in alle browsers goed te werken. Ik moet dan wel 'n hoogte van 0 opgeven, omdat Internet Explorer 7 anders van ontroering of zo dat 't lukt spontaan de hoogte van de spans tot ongeveer 20 px oprekt.

border-top: transparent solid 5px;

Voor uitleg zie hierboven. Omdat deze border onzichtbaar moet zijn, maak ik hem doorzichtig. De enige functie is om in alle browsers hoveren mogelijk te maken. 5 px hoog, dan is de beweging nog redelijk vloeiend.

div#boven span:hover

Als ik over een van de spans binnen de div met id="boven" hover. Dat zijn de spans waarmee de afbeelding als het ware in horizontale regels wordt verdeeld.

height: 386px;

Maak de span even hoog als de afbeelding is, zodat deze erin past als background-image (een background-image heeft geen breedte en hoogte, het vult alleen maar het element op waarin het staat).

margin-top: -385px;

Omdat de spans worden weergegeven als blok-elementen, staan ze steeds op 'n nieuwe regel, steeds 5 px lager (de hoogte van de border van de span).

Als ik over 'n span hover, wordt deze 386 px hoog: even hoog als de afbeelding. Dus de afbeelding begint op de hoogte van de span en loopt 386 px naar beneden door, waarmee alle spans eronder dus naar onderen worden geschoven en onbereikbaar voor de cursor worden, omdat ze ver buiten div#wrapper komen te staan.

Als ik over de bovenste span hover, bedekt deze dus gelijk de volledige afbeelding. En maakt daarmee alle andere spans onbereikbaar.

Hetzelfde geldt voor de tweede span ten opzichte van alle spans daaronder, enz.

Door nu de span de volle hoogte van de afbeelding terug omhoog te zetten, komt de onderkant van de afbeelding gelijk met de onderkant van de span: precies wat ik wil. Alleen komt dan wel 'n deel van de nieuwe afbeelding boven de originele afbeelding uit. Vandaar dat er bij div#wrapper overflow: hidden; staat: alles wat buiten div#wrapper komt wordt nu afgekapt. Waarmee de illusie wordt gewekt dat de nieuwe afbeelding vloeiend uit het niets opduikt. Ik denk wel 'ns dat ik eigenlijk in de tweedehands auto's had moeten gaan...

margin-top is het enige wat in alle browsers goed werkt.

Wacht even. De afbeelding is 386 px hoog, en de verschuiving omhoog is maar 385 px. Dat is omdat 't enigszins afgerond moet worden, omdat de spans 5 px hoog zijn (eigenlijk niet 'hoog', maar 'n border van 5 px). Als ik ze 386 px omhoog schuif houd ik 'n kiertje van 1 px over onderaan. Je kunt dit waarschijnlijk uitrekenen, maar even uitproberen vind ik simpeler. Zo'n wisseltruc schijnt trouwens ook handig te zijn bij tweedehands auto's. Misschien toch 'ns...

border-top: 0;

De border die nodig is voor het hoveren weer weghalen. Dit is nodig voor Internet Explorer 8, omdat het hoveren daar anders niet werkt.

Wat hiervan de reden is, weet ik niet precies. Als je iets nieuw maakt en voortdurend test, is vaak snel duidelijk waarom iets werkt op 'n bepaalde manier. In dit geval heb ik 'n bestaand iets aangepast en zou het erg lastig zijn om de precieze oorzaak te vinden.

Je kunt dit ook niet zonder meer 'n bug noemen. Verschillende browsers werken bij hoveren net iets anders. Maar het werkt nu in de standaardmodus van Internet Explorer 8 en dat is het belangrijkste.

background: url(033-pics/twee-gitaristen.jpg);

En dit is dan de nieuwe afbeelding.

div#boven span#boven-onderste:hover

Als ik over de span met id="boven-onderste" binnen de div met id="boven" hover.

Helemaal onderaan zit 'n aparte span, die wat afwijkt van de andere. Als ik met m'n cursor omlaag ga en de onderkant van de originele afbeelding heb bereikt, zijn de spans 'op'. Als ik nog 1 px meer omlaag ga en buiten de afbeelding kom, sluit de nieuwe afbeelding gelijk. Dus je moet 'n verrekt vaste hand hebben om precies de onderkant van de originele afbeelding te bereiken: 1 px te hoog en je ziet de nieuwe afbeelding niet volledig, 1 px te laag en de nieuwe afbeelding floept weg.

position: absolute; bottom: 0;

In de nieuwe zoomfunctie van Firefox 3 bleef bij zoomen aan de onderkant een kier over. Vreemd genoeg zowel bij in- als bij uitzoomen. Dit kan worden gecorrigeerd door de span bij hoveren erover gelijk 'naar onderen te trekken'.

Bij zoomen wordt het laatste stukje nu wel ineens getoond, maar het gaat maar om 'n klein stukje en dit is beter dan zo'n kier. Andere browsers reageren er niet op, ook niet bij zoomen. Het lijkt dus echt 'n foutje in Firefox.

height: 406px;

De spans zijn blok-elementen van 2 px hoog. Deze span ook, zolang er niet over wordt gehoverd, want pas bij hoveren wordt de hoogte meer. Deze span staat precies onderaan de afbeelding op het ogenblik dat erover wordt gehoverd. Als ik dan de hoogte geen 386 px maak, maar 406 px heb ik dus aan de onderkant 20 px extra, waar hoveren ook werkt. (Alle spans worden 385 terug omhoog gezet, ook deze, vandaar de extra px onderaan die over blijven. Misschien is deze marge dus 21 px, maar dat maakt verder niks uit.) Zodat de nieuwe afbeelding niet gelijk wegfloept als ik 1 px te laag kom met de cursor.

background: url(033-pics/twee-gitaristen.jpg) no-repeat;

Omdat de afbeelding 386 px hoog is en deze span 406 px, zou de afbeelding zich gaan herhalen, zoals 'n welopgevoede background-image hoort te doen. Dat wil ik hier niet. De afbeelding wordt gewoon bovenin de span gezet, en onderaan heb ik 'n kier van 20 px. Daar werkt hoveren dus wel, maar zie ik verder niets.

Ik moet de naam van de afbeelding herhalen, omdat anders wordt gedacht dat ik opdracht geef om geen background-image te plaatsen in deze span.

div#onder

De div met id="onder". Dat is de div waar het hele regiment spans voor de van onderen komende vervangende afbeelding staat.

position: absolute;

Het gebruik van 'n absolute positie zorgt ervoor dat deze div de andere divs en de originele afbeelding, die later wordt neergezet, niet in de weg zit. Er wordt gepositioneerd ten opzichte van div#wrapper, de eerste ouder-div met een position.

Wat hier nog belangrijker is: 'n position geeft de mogelijkheid om z-index te gebruiken, waarmee later deze div over de originele afbeelding heen kan worden neergezet, zodat hoveren dan overal werkt voor deze div.

bottom: 0;

Deze afbeelding komt van onder naar boven binnen, daarom moet alles vanaf de onderkant werken en wordt div#onder dus aan de onderkant van div#wrapper neergezet.

left: 20px;

De originele afbeelding staat 20 px naar rechts ten opzichte van div#wrapper, dus deze vervangende afbeelding moet ook 20 px naar rechts. Links blijft dan een strook van 20 px vrij die gebruikt kan worden voor de van links komende afbeelding.

z-index: 1;

Dit is de standaard-instelling, dus dit zou eigenlijk niet nodig moeten zijn. Maar niet altijd wordt de later veranderde z-index goed teruggezet naar deze standaard-instelling.

div#onder:hover

Als ik over de div met id="onder" hover. Dit is ook de reden dat dit niet werkt in Internet Explorer 6: die kent hoveren alleen maar bij 'n <a>.

In eerste instantie is alleen de strook van 20 px onder de originele afbeelding gevoelig voor hoveren, omdat de rest van deze div onder de originele afbeelding zit.

height: 426px;

Dit is de hoogte van de afbeelding (386 px) plus 'n zone van 20 px boven en onder voor 'n speciaal doel. De div beslaat nu de hele originele afbeelding plus die twee zones.

z-index: 40;

Door de z-index te verhogen wordt nu de hele div#onder gevoelig voor hoveren. En dus alle daarin liggende spans, waarin het vervangende plaatje als background-image komt te staan.

div#onder span#onder-bovenste

Als ik over de span met id="onder-bovenste" binnen de div met id="onder" hover.

Helemaal bovenaan zit 'n aparte span, die wat afwijkt van de andere. Als ik met m'n cursor omhoog ga en de bovenkant van de originele afbeelding heb bereikt, zijn de spans 'op'. Als ik nog 1 px meer omhoog ga en buiten de originele afbeelding kom, sluit de nieuwe afbeelding gelijk. Dus je moet 'n verrekt vaste hand hebben om precies de bovenkant van de originele afbeelding te bereiken: 1 px te laag en je ziet de nieuwe afbeelding niet volledig, 1 px te hoog en de nieuwe afbeelding floept weg.

height: 0;

Deze span moet gevoelig zijn voor hoveren, dus je zou zeggen dat hij 'n hoogte moet krijgen. Maar dit (en allerlei anderen methoden) leveren problemen op in allerlei browsers. Het enige dat probleemloos werkt in alle browsers is een doorzichtige border van 20 px. Dan is de span gevoelig voor hoveren en je ziet er niets van.

border-top: solid 20px transparent;

De border waar ik het hierboven over heb. Dit is een van de twee zones van 20 px waardoor de hoogte van de div#onder bij hoveren 426 px moest worden en geen 386 px, de hoogte van de afbeelding.

div#onder span#onder-bovenste:hover

Als ik over de span met id="onder-bovenste" binnen de div met id="onder" hover.

height: 386px;

Een background-image heeft van zichzelf geen afmeting, hij vult alleen maar het element waar hij in staat op. De breedte geef ik iets verderop voor alle spans binnen div#onder op. Maar ik heb hierboven een hoogte opgegeven speciaal voor deze span, en daarbij heb ik de id van deze span gebruikt. De hoogte die ik iets verder opgeef voor alle spans verliest het van de hoogte die ik hierboven opgeef door het gebruik van die id. Dus geef ik hier de hoogte speciaal voor deze span op. Voortrekkerij? Ja. Gelukkig zijn spans niet jaloers...

div#onder span

De spans binnen de div met id="onder". Dat zijn de spans waarmee de afbeelding als het ware in horizontale regels wordt verdeeld. Door aan elke span straks 'n :hover mee te geven, krijg ik 'n vloeiende beweging bij het verschijnen van de nieuwe afbeelding.

display: block;

Van zichzelf is 'n span 'n inline-element. Door er 'n blok-element van te maken kan ik attributen als breedte en hoogte gebruiken.

width: 400px;

De span moet even breed zijn als de afbeelding, zodat het hoveren over de volle breedte werkt.

Bij het hoveren wordt een background-image toegevoegd aan de span. Ook hiervoor is een breedte nodig, want een background-image heeft van zichzelf geen afmetingen, het vult alleen maar het element waar het in staat.

height: 0;

Elke span is als het ware een horizontale regel die over de originele afbeelding wordt gelegd. En bij elke 'regel' hoort een :hover, zodat de nieuwe afbeelding met de cursor mee lijkt te schuiven. Hoe kleiner ik de hoogte van de spans maak, hoe vloeiender de beweging. Maar de hoeveelheid code neemt dan ook toe. Voor elke 'regel' staat er één keer <span></span>.

Ik wil 'regels' van 5 px hoog. Als ik elke span 'n border geef van 5 px blijkt dat in alle browsers goed te werken. Ik moet dan wel 'n hoogte van 0 opgeven, omdat Internet Explorer 7 anders van ontroering of zo dat 't lukt spontaan de hoogte van de spans tot ongeveer 20 px oprekt.

border-top: transparent solid 5px;

Voor uitleg zie hierboven. Omdat deze border onzichtbaar moet zijn, maak ik hem doorzichtig. De enige functie is om in alle browsers hoveren mogelijk te maken. 5 px hoog, dan is de beweging nog redelijk vloeiend.

div#onder span:hover

Als ik over een van de spans binnen de div met id="onder" hover. Dat zijn de spans waarmee de afbeelding als het ware in horizontale regels wordt verdeeld.

height: 386px;

Maak de span even hoog als de vervangende afbeelding, zodat deze erin past als background-image (een background-image heeft geen breedte en hoogte, het vult alleen maar het element op waarin het staat).

background: url(033-pics/gitariste.jpg) no-repeat;

De vervangende afbeelding.

De no-repeat is nodig omdat er boven de span van 386 px hoog nog een border staat van 5 px hoogte. Weliswaar wordt die border over de background-image heen gezet, maar daar heb je hier niets aan omdat de border doorzichtig is. En anders dan de ramen van mijn huis is een doorzichtige border écht onzichtbaar.

div#rechts

De div met id="rechts". Dat is de div waar het hele regiment spans voor de van rechts komende vervangende afbeelding staat.

position: absolute;

Het gebruik van 'n absolute positie zorgt ervoor dat deze div de andere divs en de originele afbeelding, die later wordt neergezet, niet in de weg zit. Er wordt gepositioneerd ten opzichte van div#wrapper, de eerste ouder-div met een position.

Wat hier nog belangrijker is: 'n position geeft de mogelijkheid om z-index te gebruiken, waarmee later deze div over de originele afbeelding heen kan worden neergezet, zodat hoveren dan overal werkt voor deze div.

top: 20px;

De originele afbeelding staat 20 px naar onderen ten opzichte van div#wrapper, dus deze vervangende afbeelding moet ook 20 px naar onderen. Bovenaan blijft dan een strook van 20 px vrij die gebruikt kan worden voor de van boven komende afbeelding.

right: 0;

Deze afbeelding komt vanaf de rechterkant binnen, dus ik moet nu bij alles uitgaan van de rechterkant. Rechterkant van deze div gelijk zetten met de rechterkant van div#wrapper.

width: 0;

De heren en dames browser zijn 't hier niet over eens. Zonder deze instelling maken Safari, Firefox 3 en Opera op Linux deze div even breed als div#wrapper. Omdat deze div in de html na div#links staat, wordt dan dus de linkerborder van div#links steeds afgedekt en kan div#links niet meer worden bereikt met hoveren. Opera op Windows en Internet Explorer 7 hebben geen problemen met deze instelling, dus...

height: 386px;

Als ik geen hoogte opgeef, heeft de span helemaal geen hoogte en valt er dus weinig te hoveren.

z-index: 1;

Dit is de standaard-instelling, dus dit zou eigenlijk niet nodig moeten zijn. Maar niet altijd wordt de later veranderde z-index goed teruggezet naar deze standaard-instelling.

border-right: transparent solid 20px;

Ik wil aan de rechterkant 'n strook waar deze div al gevoelig is voor hoveren, maar waar verder nog niets gebeurt. 'n Doorzichtige border is de simpelste oplossing die in alle browsers goed werkt.

padding-right: 1px;

Nou, in tegenstelling tot wat hierboven staat, niet helemaal goed in álle browsers. Bij Safari en Google Chrome, die beide op dezelfde weergave-machine zijn gebaseerd, opende de hele vervangende afbeelding heel even als je vanaf rechts sleept. Bij deze twee browsers bleek er 'n zone van 1px breed helemaal rechts van de doorzichtige border te zijn, wat ervoor zorgde dat de hele vervangende afbeelding even opende, en gelijk daarna weer sloot.

Waarom deze padding dat voorkomt, is me eigenlijk niet duidelijk. De border blijft namelijk precies hetzelfde, en daar zat het probleem. Maar goed, dit werkt.

div#rechts:hover

Als ik over de div met id="rechts" hover. Dit is ook de reden dat dit niet werkt in Internet Explorer 6: die kent hoveren alleen maar bij 'n <a>.

In eerste instantie is alleen 'n strook van 20 px breed rechts van de originele afbeelding gevoelig voor hoveren, omdat de rest van deze div wordt afgedekt door de originele afbeelding.

width: 420px;

Samen met de hierboven opgegeven transparante border van 20 px aan de linkerkant maakt dit samen 440 px breed. De vervangende afbeelding is 400 px breed, dus nu heb ik nog 20 px links over voor 'n speciaal doel.

Als ik geen breedte opgeef werkt het hoveren niet. Er zou van alles moeten gebeuren als ik over 'n span binnen deze div hover, maar als deze div geen breedte heeft gebeurt er gewoon helemaal niks.

z-index: 40;

Door de z-index te verhogen wordt nu de hele div#rechts gevoelig voor hoveren. En dus alle daarin liggende spans, waarin het vervangende plaatje als background-image komt te staan.

div#rechts span

De spans binnen de div met id="rechts". Dat zijn de spans waarmee de afbeelding als het ware in verticale regels wordt verdeeld. Door aan elke span straks 'n :hover mee te geven, krijg ik 'n vloeiende beweging bij het verschijnen van de nieuwe afbeelding.

display: block;

Van zichzelf is 'n span 'n inline-element. Door er 'n blok-element van te maken kan ik attributen als breedte en hoogte gebruiken.

(Deze display: block; is per ongeluk blijven staan. Een span die wordt gefloat, zoals gelijk hieronder gebeurt, verandert ook al in een soort blok-element. Dus deze regel is overbodig. Ik laat hem staan, omdat ik niet meer test in Internet Explorer 6. Mogelijk levert het problemen op in dat onding, en andere browsers hebben geen last van deze overbodige regel, dus...)

float: right;

Een blok-element, waar ik de spans hierboven in heb omgetoverd, wordt steeds op 'n nieuwe regel gezet. Met deze float zorg ik dat ze steeds zo hoog mogelijk en dan zoveel mogelijk naar rechts worden gezet, oftewel: naast elkaar.

height: 386px;

Als ik geen hoogte opgeef, heeft de span helemaal geen hoogte en valt er dus weinig te hoveren.

border-left: transparent solid 5px;

Elke span is als het ware een verticale regel die over de originele afbeelding wordt gelegd. En bij elke 'regel' hoort een :hover, zodat de nieuwe afbeelding met de cursor mee lijkt te schuiven. Hoe kleiner ik de hoogte van de spans maak, hoe vloeiender de beweging. Maar de hoeveelheid code neemt dan ook toe. Voor elke 'regel' staat er één keer <span></span>.

Ik wil 'regels' van 5 px breed. Als ik elke span 'n border geef van 5 px blijkt dat in alle browsers goed te werken.

div#rechts span:hover

Als ik over een van de spans binnen de div met id="rechts" hover. Dat zijn de spans waarmee de afbeelding als het ware in verticale regels wordt verdeeld.

width: 400px;

Maak de span even breed als de afbeelding is, zodat deze erin past als background-image (een background-image heeft geen breedte en hoogte, het vult alleen maar het element op waarin het staat).

margin-right: -400px;

Omdat de spans worden weergegeven als gefloate blok-elementen, staan ze naast elkaar, steeds 5 px naar links (de breedte van de border van de span).

Als ik over 'n span hover, wordt deze 400 px breed: even breed als de afbeelding. Dus de afbeelding begint aan de linkerkant van de span en loopt 400 px naar links door, waarmee alle spans ernaast dus naar links worden geschoven en onbereikbaar voor de cursor worden, omdat ze ver buiten div#wrapper komen te staan.

Als ik over de meest rechtse span hover, bedekt deze dus gelijk de volledige afbeelding. En maakt daarmee alle andere spans onbereikbaar.

Hetzelfde geldt voor de tweede span ten opzichte van alle spans daarnaast, enz.

Door nu de span de volle breedte van de afbeelding terug naar rechts te zetten, komt de linkerkant van de afbeelding gelijk met de linkerkant van de span: precies wat ik wil. Alleen komt dan wel 'n deel van de nieuwe afbeelding rechts buiten de originele afbeelding uit. Vandaar dat er bij div#wrapper overflow: hidden; staat: alles wat buiten div#wrapper komt wordt nu afgekapt. Waarmee de illusie wordt gewekt dat de nieuwe afbeelding vloeiend uit het niets opduikt.

background: url(033-pics/jongleur.jpg) no-repeat;

De vervangende afbeelding.

De no-repeat is nodig omdat er naast de span van 400 px breed nog een border staat van 5 px breed. Weliswaar wordt die border over de background-image heen gezet, maar daar heb je hier niets aan omdat de border doorzichtig is.

div#wrapper img

De afbeeldingen binnen de div met id="wrapper". Dat is hier alleen de originele afbeelding.

position: absolute;

Om te kunnen positioneren. Dit is ook nodig om de vier onderliggende divs goed af te schermen tegen hoveren. Zonder deze position reageren ze af en toe toch op hoveren als dat niet de bedoeling is.

top: 20px; left: 20px;

Aan alle vier de kanten van de afbeelding moet een hover-gevoelige zone van 20 px komen voor de divs van de vervangende afbeeldingen. Door de image zo te positioneren blijft er onder en rechts ook 20 px over.

Er wordt gepositioneerd ten opzichte van div#wrapper, het eerste ouder-element met een position.

z-index: 1;

Dit is de standaard-instelling, dus dit zou niet nodig moeten zijn. Maar de z-index werkt niet altijd helemaal foutloos in alle browsers.

Voor alle browsers behalve Internet Explorer 6, 7 en 8

<!--[if (!IE 6) & (!IE 7) & (!IE 8)]>--> <style type="text/css"> div#links span {background: url(033-pics/space-1x1.gif);} </style> <!--<![endif]-->

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Het is belangrijk dat de spaties in <!--[if (!IE 7) & (!IE 6)]>--> en <!--<![endif]--> precies zo worden overgenomen zoals ze hier staan.

Anders dan bij de meeste conditional comments kan dit niet in een extern stylesheet worden geplaatst. Meestal is 'n conditional comment alleen voor Internet Explorer, en dan kun je in plaats van de css 'n link naar 'n extern stylesheet voor Internet Explorer erin zetten, maar hier is het omgekeerd: dit geldt juist voor álle browsers behalve Internet Explorer.

Je zou in theorie 'n aparte stylesheet kunnen maken voor alle browsers behalve Internet Explorer, maar voor één regel is dat 'n beetje overkill.

<!--[if (!IE 6) & (!IE 7) & (!IE 8)]>-->

Deze regel is in feite commentaar, omdat hij tussen <!-- en --> staat. Browsers lezen deze regel dan ook niet. Maar Microsoft heeft in Internet Explorer iets ingebouwd, waardoor Internet Explorer dit toch leest. Eerlijk is eerlijk: 'n heel goed idee. Ik zou willen dat elke browser zoiets had, want elke browser heeft bugs en afwijkingen van de standaard.

En hoe vreemd dit er misschien ook uitziet: het is volledig valide html, want in 'n commentaar mag je vrijwel alles zetten wat je wilt. En het staat Microsoft ook vrij om met iets wat binnen commentaar staat vreemde dingen uit te spoken: het blijft volledig valide.

!IE 6

! betekent gewoon 'niet'.

IE 6 betekent Internet Explorer 6.

Hier staat dus: 'niet Internet Explorer 6'.

Het staat tussen haakjes zodat de computer weet dat het uitroepteken bij IE 6 hoort en niet bij de rest van de uitdrukking.

Hetzelfde verhaal voor het tweede deel, maar dan voor Internet Explorer 7.

En het derde deel is voor Internet Explorer 8.

De & betekent gewoon 'en', en de if 'als'. De complete uitdrukking wordt dan in normale mensentaal:

Als het niet Internet Explorer 6 is én niet Internet Explorer 7 én niet Internet Explorer 8. Oftewel: elke andere browser.

Ik zet de versies erbij, het echt 'n hobby van Microsoft is om niet alleen hun browsers anders te maken dan alle andere, maar om ze ook nog 'ns onderling op de meest weerzinwekkende manieren van elkaar te laten verschillen.

Om problemen met nieuwere versies te voorkomen, zet ik er daarom altijd de exacte versies bij waarvoor de css is bedoeld. En inderdaad: de inmiddels verschenen Internet Explorer 9 heeft dit niet nodig.

In de meeste conditional comments kan ook 'n link naar 'n extern stylesheet voor Internet Explorer staan, maar hier niet, omdat dit juist door alle browsers behálve Internet Explorer moet worden gelezen.

div#links span

Alle spans binnen de div met id="links".

background: url(033-pics/space-1x1.gif);

Om wat voor reden dan ook werkt hoveren niet in Opera bij de vervangende afbeelding die van links komt, als er geen doorzichtige afbeelding als achtergrond in de spans wordt gezet. Vreemd genoeg is dit alleen in div#links nodig.

Maar Internet Explorer 7 wordt hier ongelooflijk traag door. Ook als ik voor Internet Explorer 7 opgeef dat er geen background moet worden gebruikt. Zodra ik ook maar iets met de background doe, treedt de traagheid op.

In Internet Explorer 6 en 8 werkt het hoveren niet goed.

Dus geef ik deze css alleen maar voor alle andere browsers op, dan zien Internet Explorer 6, 7 en 8 het gewoon helemaal niet. Iedereen tevreden.

Speciaal voor Internet Explorer 6

<!--[if IE 6]> <style type="text/css"> div#boven span, div#onder span, div#links, div#links span, div#links span#links-meest-rechts, div#rechts, div#rechts span, div#rechts span#rechts-meest-links {border: none;} a#ie-6-boven {display: block; position: relative; top: 20px; left: 20px; width: 400px; height: 20px; background: url(033-pics/space-1x1.gif); z-index: 100;} a#ie-6-boven:hover {height: 386px; background: url(033-pics/twee-gitaristen.jpg); cursor: default;} a#ie-6-rechts {display: block; position: relative; left: 400px; width: 20px; height: 386px; background: url(033-pics/space-1x1.gif); z-index: 100;} a#ie-6-rechts:hover {width: 400px; left: 20px; background: url(033-pics/jongleur.jpg); cursor: default;} a#ie-6-onder {display: block; position: relative; bottom: 20px; left: 20px; width: 400px; height: 20px; background: url(033-pics/space-1x1.gif); z-index: 100;} a#ie-6-onder:hover {bottom: 386px; height: 386px; background: url(033-pics/gitariste.jpg); cursor: default;} a#ie-6-links {display: block; position: relative; bottom: 408px; left: 20px; width: 20px; height: 386px; background: url(033-pics/space-1x1.gif); z-index: 1000;} a#ie-6-links:hover {width: 400px; background: url(033-pics/vioolspeler.jpg); cursor: default;} </style> <![endif]--> <!--[if IE 6]>

Dit eigenaardige stukje code heet een 'conditional comment' en wordt door alle browsers gezien als commentaar, omdat het tussen <!-- en --> staat. Maar Internet Explorer herkent het, door de extra toevoegingen, als speciaal voor Internet Explorer bedoeld en zal het dus uitvoeren. Het is veiliger dan een zogenaamde 'hack', waarbij vaak gebruik wordt gemaakt van 'n fout (bug) in de browser. Dit is opzettelijk aangebracht door Microsoft en zal dus blijven bestaan, terwijl 'n bug gerepareerd kan worden.

De style voor Internet Explorer moet ná de normale komen, omdat de opdrachten voor Internet Explorer dan over de normale heen gaan.

Dit stukje geldt voor Internet Explorer 6, maar je kunt het ook voor andere versies aangeven.

In plaats van de style kun je ook 'n normale link naar 'n extern css-bestand aanbrengen:

<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="../../css/naam-van-ie-stylesheet.css"> <![endif]-->

Op de plaats van "../../css/naam-van-ie-stylesheet.css" vul je pad naar en naam van jouw stylesheet voor Internet Explorer 6 in. De css voor Internet Explorer 6 komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

Het is belangrijk dat de spaties in <!--[if IE 6]> en <![endif]--> precies zo worden overgenomen zoals ze hier staan.

div#boven span, div#onder span, div#links, div#links span, div#links span#links-meest-rechts, div#rechts, div#rechts span, div#rechts span#rechts-meest-links

Dit zijn alle spans en divs waar een doorzichtige (transparent) border wordt gebruikt.

border: none;

Hoewel Internet Explorer 6 hoveren niet kent op andere elementen dan <a>, wordt de inhoud van die elementen wel gewoon weergegeven. Dat heeft verder niets met hoveren te maken. Dus ook de rand van 20 px aan alle kanten van de originele afbeelding wordt weergegeven.

En die rand bevat nogal wat onderdelen die doorzichtig zijn. Internet Explorer 6 kent transparent niet als kleur. En verandert dat dan in de kleur die kennelijk volgens Microsoft het meest op doorzichtigheid lijkt: zwart. Door al die borders weg te halen voorkom ik dat.

a#ie-6-boven

De a met id="ie-6-boven". Dit is de <a> in de html die alleen door Internet Explorer 6 wordt gezien.

display: block;

Van zichzelf is een <a> een inline-element. Als ik er een blok-element van maak kan ik attributen als breedte en hoogte gebruiken.

position: relative;

Om de <a> op de juiste plaats neer te kunnen zetten. Het eerste ouder-element met een position is div#wrapper, dus er wordt gepositioneerd ten opzichte van deze div.

top: 20px; left: 20px;

Deze <a> is de voor hoveren gevoelige zone voor Internet Explorer 6. Omdat div#wrapper aan alle kanten 20 px groter is dan de afbeelding, moet ik deze gevoelige zone dus 20 px meer naar binnen zetten. In het geval van deze aan de bovenkant staande <a> is dat 20 px vanaf de bovenkant en 20 px vanaf de linkerkant. Deze gevoelige zone ligt dus op 'n iets andere plek dan die voor de andere browsers, omdat hij heel anders werkt.

width: 400px;

Over de volle breedte van de afbeelding.

height: 20px;

Gevoelige zone 20 px hoog maken.

background: url(033-pics/space-1x1.gif);

Zonder deze doorzichtige achtergrond-afbeelding werkt het hoveren niet goed bij Internet Explorer 6.

z-index: 100;

Omdat allerlei onderdelen die bij de andere browsers werken een z-index hebben gekregen die hoger is dan de normale, moet ik bij deze alleen voor Internet Explorer 6 werkende zones ook een hogere z-index opgeven, anders schuiven ze onder de delen die voor andere browsers zijn bedoeld.

a#ie-6-boven:hover

Als ik hover over de <a> met id="ie-6-boven".

height: 386px;

Hoogte nu even groot maken als de vervangende afbeelding is. Omdat dat een achtergrond-afbeelding is, heeft die van zichzelf geen hoogte en breedte.

background: url(033-pics/twee-gitaristen.jpg);

Vervangende afbeelding openen als achtergrond-afbeelding.

cursor: default;

Omdat dit geen echte link is, wil ik de cursor hier niet in 'n handje laten veranderen, maar gewoon de standaardcursor houden.

a#ie-6-rechts {display: block; position: relative; left: 400px; width: 20px; height: 386px; background: url(033-pics/space-1x1.gif); z-index: 100;} a#ie-6-rechts:hover {width: 400px; left: 20px; background: url(033-pics/jongleur.jpg); cursor: default;} a#ie-6-onder {display: block; position: relative; bottom: 20px; left: 20px; width: 400px; height: 20px; background: url(033-pics/space-1x1.gif); z-index: 100;} a#ie-6-onder:hover {bottom: 386px; height: 386px; background: url(033-pics/gitariste.jpg); cursor: default;} a#ie-6-links {display: block; position: relative; bottom: 408px; left: 20px; width: 20px; height: 386px; background: url(033-pics/space-1x1.gif); z-index: 1000;} a#ie-6-links:hover {width: 400px; background: url(033-pics/vioolspeler.jpg); cursor: default;}

Dit zijn de instellingen voor de zijkanten en de onderkant. Ze zijn hetzelfde als die voor de <a> aan de bovenkant, alleen wordt de afstand gemeten vanaf een andere buitenkant, en moeten afwisselend breedte en hoogte worden ingesteld.

Html speciaal voor Internet Explorer 6

<!--[if IE 6]> <a id="ie-6-boven" href="#" ></a> <a id="ie-6-rechts" href="#" ></a> <a id="ie-6-onder" href="#" ></a> <a id="ie-6-links" href="#" ></a> <![endif]-->

Deze html wordt alleen gelezen door Internet Explorer 6, uitleg bij Speciaal voor Internet Explorer 6. De uitleg daar is voor css, maar voor html werkt het precies hetzelfde, alleen kan de html natuurlijk niet in 'n extern bestand worden gezet.

<a id="ie-6-boven" href="#" ></a>

Speciaal voor Internet Explorer 6 wordt een <a> toegevoegd, zodat hover ook voor Internet Explorer 6 werkt. Deze <a> staat aan de bovenkant, maar aan de andere drie kanten staat er ook een. De hele rest gebeurt via css.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een spraakbrowser gebruiken, of voor motorisch gehandicapte mensen die moeite hebben met het bedienen van een muis. Een spider van een zoekmachine (dat is het programmaatje wat de site indexeert voor de zoekmachine) is te vergelijken met een blinde. Als je je site goed toegankelijk maakt voor gehandicapten, is dat dus gelijk goed voor een hogere plaats in een zoekmachine. Dus als je 't niet uit sociale motieven wilt doen, kun je 't uit egoïstische motieven doen.

(Op die plaats in de zoekmachine heb je maar beperkt invloed. De toegankelijkheid van je site is maar één van de factoren, maar zeker niet onbelangrijk.)

Als je bij het maken van je site al rekening houdt met toegankelijkheid, is dat nauwelijks extra werk. 't Is ongeveer te vergelijken met inbraakbescherming: doe dat bij 'n nieuw huis en 't is nauwelijks extra werk, doe 't bij 'n bestaand huis en 't is al snel 'n enorme klus.

Enkele tips die helpen bij toegankelijkheid:

Getest in

Laatst gecontroleerd op 4 oktober 2011.

(Internet Explorer 6 is voor het laatst gecontroleerd op 15 november 2009. Op deze browser test ik niet meer. Maar omdat de code niet is veranderd, neem ik aan dat dit voorbeeld ook nog werkt in Internet Explorer 6.)

Dit voorbeeld is getest in Firefox, Opera, Safari, Google Chrome, Internet Explorer 6, 7, 8 en 9 in de resoluties 800x600, 1024x768 en 1280x1024. Steeds met de laatste versie van die browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. In de resoluties 1024x768 en 1280x1024 is ook in- en uitzoomen en een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%. Eventuele problemen staan bij Bekende problemen.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, Jaws en Fangs Screen Reader Emulator. Lynx is een browser die alleen tekst laat zien en geen css gebruikt. WebbIE is een browser die gericht is op mensen met een handicap. Jaws is een screenreader, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox die de pagina laat zien zoals een screenreader hem ziet.

Als het voorbeeld in deze vier programma's toegankelijk is, zou het in principe toegankelijk moeten zijn in alle aangepaste browsers en dergelijke. En dus ook voor zoekmachines, want een zoekmachine is redelijk vergelijkbaar met een blinde. Eventuele opmerkingen over de toegankelijkheid van dit voorbeeld staan bij Opmerkingen.

Nieuwe browsers test ik pas als ze uit het bèta-stadium zijn, omdat er anders 'n redelijke kans is dat ik 'n bug zit te omzeilen die voor de uiteindelijke versie nog gerepareerd wordt. Dit voorbeeld is alleen getest in de hierboven met name genoemde browsers. Vragen over niet-geteste browsers kan ik niet beantwoorden, en het melden van fouten in niet-geteste browsers heeft ook geen enkel nut. (Melden van fouten, problemen, enz. in wel geteste browsers: graag!)

Wijzigingen

12 mei 2008:

Nieuw opgenomen.

17 juni 2008:

Werkt nu ook (min of meer) in Internet Explorer 6 door het toevoegen van wat html en css speciaal voor die browser.

25 juli 2008:

4 januari 2009:

25 maart 2009:

14 april 2009:

15 november 2009:

In de html voor Internet Explorer 6 tabindex="-1" toegevoegd bij alle links. Zie verder bij Sommige mensen...

28 oktober 2010:

Opmerkingen over overbodige display: block; toegevoegd aan beschrijving code.

30 december 2009:

Afbeeldingen van lp's vervangen door eigengemaakte foto's van Koninginnedag 2009 in het Vondelpark in Amsterdam. Dit in verband met copyright. Ook op deze afbeeldingen bleek dat te zitten. Tja.

4 oktober 2011:

Bekende problemen

Internet Explorer 6

Internet Explorer 7

Bij in- of uitzoomen werkt dit niet meer, of heel onregelmatig. Als je alleen de lettergrootte verandert, werkt het wel goed. In Internet Explorer 8 werkt dit wel goed.