Skip links en inhoudsopgave

Uitleg van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen

Laatst aangepast: .

Van boven, onder of opzij tijdelijke nieuwe afbeelding over bestaande afbeelding slepen

Dit voorbeeld is verouderd

Dit voorbeeld werkt helemaal niet of niet goed op touchscreens. De in dit voorbeeld gebruikte technieken zijn volstrekt ongeschikt voor touchscreens. Voor touchscreens heb je - om dit voorbeeld werkend te krijgen - nauwelijks css nodig, maar wel veel JavaScript. En daar is deze site niet voor bedoeld.

Normaal genomen wordt een voorbeeld vroeger of later geüpdatet. In dit geval gebeurt dat niet, omdat een update nog weinig met css te maken zou hebben. Omdat dit voorbeeld niet meer wordt bijgewerkt, zijn ook grote delen van de meer algemene teksten over zoekmachines, toegankelijkheid, en dergelijke (zwaar) verouderd.

In de uitleg wordt nog over code voor oudere versies van Internet Explorer gesproken, maar die code zelf is verwijderd. Het is echter wat zonde van de tijd om elke verwijzing naar die mensenhatende browser uit de tekst te verwijderen, dus her en der zijn die blijven staan.

Omdat het, toen het werd gemaakt, best wel leuk werkte, blijft het gewoon op de site staan. Maar de gebruikte techniek is dus echt volstrekt ongeschikt voor touchscreens, waarop het voorbeeld dan ook niet (goed) zal werken.

Korte omschrijving

Als je met de cursor vanaf de buitenkant naar binnen 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.

BELANGRIJK

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 ontbreekt bijvoorbeeld de navigatie voor de site. 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.

Alles op deze site kan vrij worden gebruikt, met drie beperkingen:

* Je gebruikt het materiaal op deze site volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte info zitten. Voor eventuele schade die door gebruik van materiaal van deze site ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze uitleg op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat de uitleg afkomstig is van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

* Het kan zijn dat materiaal is gebruikt dat van anderen afkomstig is. Dat materiaal kan onder een bepaalde licentie vallen, waardoor het mogelijk niet onbeperkt gebruikt mag worden. Als dat zo is, wordt dat vermeld onder Inhoud van de download en licenties.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

Alle code is geschreven in een afwijkende lettersoort en -kleur. De code die te maken heeft met de basis van dit voorbeeld (essentiële code), is in de hele uitleg blauw gekleurd. Alle niet-essentiële code is bruin. (In de inhoudsopgave staat alles vanwege de leesbaarheid in een gewone letter.)

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.

Dit voorbeeld is gemaakt op een systeem met Linux (Kubuntu). Daarbij is vooral gebruik gemaakt van Visual Studio Code, 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:
Naar site van War Child Nederland

Achterliggend idee

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.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Toegankelijkheid (accessibility in het Engels) is belangrijk voor bijvoorbeeld blinden die een schermlezer 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 (en oplossingen).

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 schermlezer, zoals die door blinden wordt gebruikt. Fangs Screen Reader Emulator is een extensie bij Firefox die de pagina laat zien zoals een schermlezer 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, enzovoort in wel geteste browsers: graag!)

Wijzigingen

Alleen grotere wijzigingen worden hier vermeld, geen dingen als een link die is geüpdatet.

:

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:

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:

20 april 2018

Bekende problemen (en oplossingen)

Dit voorbeeld wordt niet meer bijgewerkt. Het werkt niet (goed) op touchstreens. Meer details zijn te vinden bij Dit voorbeeld is verouderd.

Inhoud van de download en licenties

De inhoud van deze download kan vrij worden gebruikt, met drie beperkingen:

* Sommige onderdelen die van 'n andere site of zo afkomstig zijn, vallen mogelijk onder een of andere licentie. Dat is hieronder bij het betreffende onderdeel te vinden.

* Je gebruikt het materiaal uit deze download volledig op eigen risico. Het kan prima zijn dat er fouten in de hier verstrekte code en dergelijke zitten. Voor eventuele schade die door gebruik van materiaal uit deze download ontstaat, in welke vorm dan ook, zijn www.css-voorbeelden.nl en medewerkers daarvan op geen enkele manier verantwoordelijk.

* Dit voorbeeld (en de bijbehorende uitleg en dergelijke) wordt regelmatig bijgewerkt. Het is daarom niet toegestaan dit voorbeeld (en de bijbehorende uitleg en dergelijke) op welke manier dan ook te verspreiden, zonder daarbij duidelijk te vermelden dat voorbeeld, uitleg, en dergelijke afkomstig zijn van www.css-voorbeelden.nl en dat daar altijd de nieuwste versie is te vinden. Dit is om te voorkomen dat er verouderde versies worden verspreid.

Een link naar www.css-voorbeelden.nl wordt trouwens altijd op prijs gesteld.

afbeelding-033.html: de pagina met het voorbeeld.

afbeelding-033.pdf: deze uitleg (aangepast aan de inhoud van de download).

afbeelding-033-inhoud-download-en-licenties.txt: een kopie van de tekst onder dit kopje (Inhoud van de download en licenties).

033-pics:

De vijf gebruikte foto's. 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.

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>

<html 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 eventuele url, anders werkt het niet goed.

Het hier gebruikte doctype is dat van html5. Dit kan al veilig worden gebruikt.

<meta charset="utf-8">

Zorgt dat de browser letters met accenten en dergelijke goed kan weergeven.

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" href="../../css/naam-van-stylesheet.css">

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

D 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> en </style> staat (zonder deze begin- en eindregel).

Deze regel 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.

<style>

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 dat 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 p {
            margin-left: 16px;
            height: 120section
            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.

Als eenheid wordt de relatieve eenheid % gebruikt, omdat bij gebruik van een absolute eenheid zoals px niet alle browsers de lettergrootte kunnen veranderen. Zoomen kan wel altijd, ongeacht welke eenheid voor de lettergrootte wordt gebruikt.

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, enzovoort. 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 voorouder 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, enzovoort.

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: none;

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 voorouder 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 voorouder 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, enzovoort.

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, de eerste voorouder 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.