Skip links en inhoudsopgave

Laatst aangepast: .

css-imagemap: afbeelding met hotspots waaronder extra informatie zit

Korte omschrijving

Op een afbeelding staan gele kringen. Door over 'n kring te hoveren of door er met de Tab-toets naartoe te gaan, verschijnen 'n venster met meer informatie en een afbeelding.

BELANGRIJK

Alles op deze site kan vrij worden gebruikt, met twee 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 medewerkers daarvan op geen enkele manier verantwoordelijk.

* Deze uitleg wordt regelmatig bijgewerkt. Het is daarom niet toegestaan deze 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.

Opmerkingen

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 (Kubuntu). 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

Het basisidee is niet zo heel erg ingewikkeld, maar de uitvoering had toch wel wat voeten in de aarde. Mede omdat ik wilde dat het ook zo goed mogelijk in verouderde browsers - inderdaad, Internet Explorer 7, 8 en 9 - zo goed mogelijk moet werken.

(Internet Explorer 9 verouderd???? Ja, omdat Microsoft na het uitkomen van een nieuwe versie van Internet Explorer alleen veiligheids-updates uitbrengt en halsstarrig weigert om ook maar iets van nieuwe functionaliteit toe te voegen. Zolang Microsoft dit zo blijft doen, is daardoor élke versie van Internet Explorer op de dag van verschijnen in feite al verouderd.)

Helemaal bovenaan de html staat een div die zorgt dat de achtergrond-afbeeldingen gelijk bij het laden van de pagina al worden geladen. De afbeeldingen openen niet in één keer, maar geleidelijk. Als de afbeeldingen nog niet zouden zijn geladen, opent de eerste afbeelding niet geleidelijk, maar in één keer.

De rest van de pagina staat binnen één grote div. Die div wordt gebruikt om de hele handel te kunnen centreren en om de tekst boven de grote afbeelding met de fiets op de juiste plaats neer te kunnen zetten.

Binnen deze buitenste div staat een tweede div, waarbinnen het hoveren en dergelijke plaatsvindt. Zodra de cursor boven deze binnenste div komt, verandert hij in een yinyang-symbool. (Het is in het algemeen een bijzonder slecht idee om de cursor te veranderen, omdat mensen gewend zijn geraakt aan de standaardvormen van een cursor. In het echt zou ik dit nooit op deze manier doen, maar dit is 'n satire, en dan kan er wat meer, denk ik.)

Als eerste wordt in de binnenste div de grote afbeelding met de fiets neergezet. Voor elk onderdeel waar een toelichting bij komt, wordt een aparte div neergezet. Aan het begin van de code worden een soort standaard-instellingen opgegeven voor deze divs. Afwijkende instellingen worden dan later per div opgegeven. Dit spaart nogal wat css uit, omdat bijvoorbeeld de ronde hoeken hetzelfde zijn in veel divs.

De divs worden gepositioneerd ten opzichte van de div, waarbinnen ook de grote afbeelding met de fiets staat. Daardoor zijn ze precies op de juiste plaats boven de grote afbeelding met de fiets neer te zetten. Lengte en breedte worden eventueel per div aangepast. Elke div krijgt een gele border.

Binnen elke div staat binnen een span een tekst, die zichtbaar wordt als je over de divs hovert. Door de divs ook een tabindex te geven, kunnen de teksten ook zichtbaar worden, als je met behulp van de Tab-toets de divs afloopt (als de div focus heeft). Op welke plaats de tekst zichtbaar wordt, is afhankelijk van waar de div met de gele border staat. In een enkel geval wordt meer dan één venstertje met tekst zichtbaar, omdat de div met de gele rand min of meer in het midden van de grote afbeelding met de fiets staat en de tekst dus óm de div heen moet komen te staan.

Naast de tekst staat in vrijwel elke div nog een span, waarin een uitvergroot stukje van de grote afbeelding met de fiets zichtbaar wordt. Deze vergrotingen staan samen op drie achtergrond-afbeeldingen, waarover iets verderop meer.

Door de achtergrond op de juiste positie te plaatsen, wordt steeds de bijbehorende vergroting zichtbaar. Het openen van deze afbeeldingen duurt met behulp van transition 'n halve seconde. Door ook de positie van de achtergrond te veranderen, lijkt het of de afbeeldingen stilstaan en vanuit het midden naar buiten toe openen.

Ook het openen van deze spans gebeurt bij hoveren over 'n div, of als een div met behulp van de Tab-toets focus heeft gekregen.

Op Android en de iPad werkt hoveren niet. Maar op Android heeft een aanraking met de vinger hetzelfde effect als hoveren. Op de iPad ook, maar alleen als overal waar moet hoveren onClick="void(0)" wordt toegevoegd. Normaal genomen is het een bijzonder slecht, achterhaald idee om JavaScript in de html te zetten. Maar dit stukje JavaScript heeft verder geen enkel effect. Het benadeelt ook de toegankelijkheid niet, het zorgt er alleen voor dat een aanraking ook op de iPad hetzelfde werkt als hoveren.

Internet Explorer kent transition niet, daarin openen de afbeeldingen in één keer. Opera kan een achtergrond-positie (nog) niet veranderen, daarin schuiven de afbeeldingen van opzij het beeld in.

Bij sommige onderdelen opent nog 'n tweede afbeelding. Het openen gebeurt ook door hoveren over de div of als de div focus heeft, alleen is de manier van openen anders bij de tweede afbeelding: ze worden langzaamaan zichtbaar, bewegen van buiten de afbeelding naar binnen, dat soort dingen. Internet Explorer kan dit niet, dus daar openen ze in één keer.

De teksten zijn nog wat opgeleukt met kopjes en zo, en sommige teksten hebben één of meer noten. De achtergronden van de teksten zijn licht doorschijnend.

Gebied waar hoveren werkt voor de knop 'Toebehoren'

Rechtsboven staat een knop met de tekst 'Toebehoren'. Als je over die knop hovert, opent weer een klein rijtje knoppen. Als je over een van die knoppen hovert, opent een bijbehorende tekst met afbeelding.

De knoppen openen naar links, zoals hiernaast is te zien. Normaal genomen blijven de knoppen alleen geopend, zolang je erover hovert. Daardoor zou je vanuit 'Toebehoren' eerst naar links naar 'Filterus Nasus' moeten gaan, en dan naar onder tot je bij de juiste knop bent. Waarbij alle bij de tussenliggende knoppen horende teksten dus open- en dichtfloepen. Omdat mensen de neiging zullen gewoon in een diagonale richting van 'Toebehoren' naar de juiste knop te gaan, zonder over alle tussenliggende knoppen te hoveren, blijft het rijtje met knoppen ook geopend als je onder 'Toebehoren' bent. Zolang je in het op de afbeelding donkergrijs gemaakte blok blijft met de cursor, blijft het rijtje knoppen geopend.

Bij deze knoppen gebruik ik geen display: none;, zoals bij de teksten die bij de onderdelen van de fiets, pardon: holistobiel, horen. Dit levert namelijk problemen op bij gebruik van de Tab-toets om de knoppen af te lopen.

Als je de Tab-toets gebruikt, worden eerst alle divs die bij een onderdeel horen afgelopen. Daarna zou je bij de knop 'Toebehoren' aankomen. Dat gaat ook nog goed, die krijgt ook keurig focus. En als die focus heeft, kun je het rijtje met knoppen zichtbaar maken.

Maar zodra een van de knoppen uit dat rijtje focus zou krijgen, heeft 'Toebehoren' geen focus meer, want er kan maar één element gelijktijdig focus hebben. Als 'Toebehoren' geen focus meer heeft, werkt display: none; weer. En verdwijnt het rijtje met knoppen dus. Een element dat verborgen is met behulp van display: none; kan geen focus krijgen. Dus de knoppen uit het rijtje kunnen nooit focus krijgen.

Kort samengevat: zodra 'Toebehoren' focus heeft, verschijnt het rijtje met knoppen. Zodra ik nog 'n keer Tab, verdwijnt dat rijtje weer en kan daardoor geen focus krijgen.

Daarom gebruik ik voor deze knoppen geen display: none;. Ik parkeer ze gewoon boven het venster van de browser. Ook al zijn ze niet zichtbaar, ze kunnen dan wel gewoon focus krijgen. Zodra één van de knoppen focus heeft, verschijnen de bijbehorende tekst en afbeelding op het scherm. Het hele rijtje knoppen verschijnt nooit, want daar heb je met de Tab-toets niets aan. Je moet ze toch één voor één allemaal af gaan, want zo werkt de Tab-toets nou eenmaal.

Omdat de pop-ups met tekst worden neergezet ten opzichte van de knoppen, komen die nu helaas wel op een verschillende plaats te staan, afhankelijk van of er over de knop wordt gehoverd of dat deze focus heeft. Bovendien staan de knoppen niet op dezelfde hoogte, terwijl ik de tekst wel steeds op dezelfde hoogte wil hebben. Dus moet ik de pop-ups voor elke knop apart positioneren, en dat ook nog afhankelijk van hover of focus.

Als een van de knoppen focus heeft, blijft de tekst geopend. Als ik nu gelijktijdig over 'n knop hover, opent 'n tweede pop-up met tekst op 'n totaal andere plaats. Geen gezicht. Dus moet de tekst die is geopend als de knop focus heeft, weer sluiten als er over een knop wordt gehoverd. De css voor dit stukje wordt er door al deze dingen niet simpeler op.

Ten slotte is er linksboven nog een knop 'Getuigenissen'. Bij hoveren over die knop, of als hij focus heeft, opent een tekstvenstertje met Getuigenissen van klanten. Alsmede een schrijfsel van ene Jacobse aan ene Van Es, dat kennelijk per ongeluk niet is verwijderd. Deze tekst is opgemaakt met wat kopjes en dergelijke. De afwisselend gekleurde achtergronden zijn gemaakt met behulp van css3-selectors. Internet Explorer 7 en 8 herkennen die niet, dus die geven gewoon een effen witte achtergrond.

De tekst met getuigenissen is langer dan de afbeelding hoog is. Daarom is de tekst met dit venstertje scrollbaar. In oudere mobiele browsers kan dit problemen opleveren. Daarom wordt in mobiele browsers deze tekst in twee kolommen weergegeven, waardoor hij niet hoger is dan de afbeelding en niet gescrold hoeft te worden.

Bij vergroten lettergrootte verdwijnt tekst

Dan zijn er nog wat onverwachte problemen, die in de code aan de orde komen. Een van die grappen laat ik hier al zien. Als mensen de letters (fors) vergroten, past de tekst niet meer binnen de grote afbeelding met de fiets en verschijnt een scrollbalk. Op de afbeelding hiernaast is de plaats waar de vergroting verschijnt, en die dus gevoelig is voor hoveren, geel gemaakt. De tekst staat een eind rechts daarvan en is niet volledig zichtbaar. Met de cursor kun je daar nooit komen om te scrollen, omdat de tekst verdwijnt zodra je de voor hoveren gevoelige gele cirkel verlaat.

Dit is opgelost door de span met de tekst een relatieve breedte te geven: bij een grotere letter wordt de span breder. Voor er een scrollbalk verschijnt, staat de span (gedeeltelijk) boven de gele cirkel en is dus bereikbaar met de cursor. (Dit speelt alleen bij hoveren. Met de Tab-toets krijgt de div focus en blijft gewoon geopend, ook als ik met de cursor naar de tekst ga.)

Tekst die op andere plaatsen staat ten opzichte van de bijbehorende div, heeft hetzelfde probleem, met ongeveer dezelfde oplossing.

Gecombineerde achtergrond-afbeelding ('sprite')

De achtergrond-afbeeldingen die verschijnen als over een div wordt gehoverd, of als de div focus heeft, zijn gecombineerd in twee grotere afbeeldingen, waarvan eentje hiernaast verkleind is weergegeven. (Voor de duidelijkheid is er even een zwart randje om gezet.)

Hierdoor hoeft niet voor elke kleine afbeelding een nieuwe aanroep naar de server te worden gedaan. Zo'n gecombineerde afbeelding heet een 'sprite'. Met behulp van background-position wordt het juiste stukje van de afbeelding weergegeven.

De achtergrond-afbeeldingen staan elk in een span. In principe zouden alle ronde hoeken ook zijn te maken met behulp van border-radius. Maar er kunnen, zeker bij zoomen, kleine kiertjes tussen de buitenkant van de span en de achtergrond-afbeelding zitten. Verder is het voor de twee technische hoogstandjes Internet Explorer 7 en 8 niet mogelijk om de spans ronde hoeken te geven, ook niet met behulp van de bagger, pardon techniek die Microsoft daar speciaal voor heeft bedacht.

Daarom heb ik de meeste achtergrond-afbeeldingen zelf ook ronde hoeken gegeven en staan ze op een doorzichtige achtergrond. Eventuele kiertjes zijn nu onzichtbaar, en ook in de Wondere Wereld van Microsoft hebben de afbeeldingen nu ronde hoeken. (Als aller-, allerlaatste is 's werelds grootste softwarebedrijf er dan toch in geslaagd om Internet Explorer 9 gewoon op 'n normale manier ronde hoeken te laten maken, dus daar spelen dit soort problemen met ronde hoeken niet meer.)

Als formaat voor de afbeelding is voor een gif gekozen, want dat formaat kan een doorzichtige achtergrond krijgen. Een gif heeft echter ook een groot nadeel: hij kan maar 256 verschillende kleuren bevatten. En dat levert 'n probleem op. Voor de hierbij getoonde sprite zijn 256 kleuren genoeg: op 'n paar tinten blauw na zijn het allemaal varianten van grijs. Maar bijvoorbeeld het achterlichtje heeft allerlei tinten rood en oranje. 256 kleuren is hierdoor niet genoeg.

Daarom heb ik twee sprites gemaakt. Dat levert bij elkaar 512 kleuren op, en dat is voldoende voor een acceptabele kwaliteit. (Ter vergelijking: een normale monitor kan 16.777.216 verschillende kleuren weergeven.)

Uiteindelijk is één van deze gifs weer in een png veranderd, omdat die png weer zo'n tien procent kleiner bleek te zijn dan een gif met dezelfde inhoud. Eén sprite is nu dus een gif, de ander een png. Voor de rest van het verhaal maakt dit geen enkel verschil.

(Aanvulling 19 augustus 2012: de tweede gif is nu ook in een png veranderd, omdat ook deze 10% kleiner bleek te zijn. Mogelijk heb ik dat vorige keer gemist. Je zou nu dus ook één sprite kunnen maken, één png, want een png kan veel meer kleuren bevatten. Om die twee png’s die het nu dus zijn om te zetten naar één png is nogal wat werk, dus ik laat het zo.)

De afbeeldingen die worden gebruikte bij Toebehoren staan gezamenlijk in een jpg. Voor deze afbeeldingen kon geen gif worden gebruikt, omdat 256 kleuren gewoon niet genoeg was: het werd veel te streperig en blokkerig. Dit heeft wel tot gevolg dat de achtergrond van de afbeelding niet doorzichtig kan zijn.

Hier zit één nadeel aan: in Internet Explorer 7 en 8 hebben deze afbeeldingen rechte hoeken. In alle andere browsers kan ik met behulp van border-radius ronde hoeken aan de afbeeldingen geven, maar in deze twee virtuele pestkoppen, pardon browsers, kan dat niet. Als ik het met 'n behavior probeer, verschijnen de afbeeldingen helemaal niet. In Internet Explorer 7 en 8 hebben deze afbeeldingen daarom gewone rechte hoeken.

(Je zou in plaats van een jpg voor een png kunnen kiezen, want die kan een doorzichtige achtergrondkleur én meer dan 256 kleuren krijgen. Maar die wordt ongeveer tien keer zo groot, en dat vind ik die ronde hoeken niet waard. Als alle drie de afbeeldingen worden gecombineerd tot één grote png, wordt dat een monster van bijna 2 MB groot. Ook geen goed idee.)

De voorvoegsels -moz-, -ms-, -o- en -webkit-

Voordat een nieuwe css-eigenschap wordt ingevoerd, is er in de regel een experimentele fase. Browsers passen het dan al toe, maar met een aangepaste naam. Tijdens deze fase kunnen problemen worden opgelost en worden veldslagen uitgevochten over hoe de standaard precies moet worden toegepast.

Als iedereen het overal over eens is en alle problemen zijn opgelost, wordt de officiële naam uit de standaard gebruikt.

De belangrijkste browsers hebben elk een eigen voorvoegsel:

Firefox: -moz-, naar de maker: Mozilla.

Google Chrome en Safari: -webkit-, naar de gebruikte weergave-machine: webkit.

Opera: -o-, je mag zelf bedenken waar de letter o vandaan komt (hint: Opera wordt door Opera Software gemaakt).

Internet Explorer: -ms-, naar de maker: Microsoft. Traditiegetrouw heeft Microsoft zich hier jarenlang niets van aangetrokken, pas bij Internet Explorer 8 is Microsoft -ms- gaan gebruiken. Omdat het ook zonder -ms- werkt en de speciale css voor Internet Explorer toch in een aparte stylesheet staat, gebruik ik -ms- nooit voor oudere versies dan Internet Explorer 9.

Als je css valideert met de w3c css-validator, moet je even instellen dat je geen foutmelding krijgt voor het gebruik van deze voorvoegsels.

In dit voorbeeld worden transition, transform, column-count en column-rule gebruikt.

In Opera, Google Chrome, Safari en Firefox moet voor transition en transform nog een voorvoegsel worden gebruikt.

Voor Internet Explorer 9 moet voor transform een voorvoegsel worden gebruikt. transition, column-count en column-rule kent deze browser niet.

Internet Explorer 10 ondersteunt transition, transform, column-count en column-rule zonder voorvoegsel.

column-count en column-rule moeten in Firefox, Google Chrome en Safari nog met voorvoegsel worden gebruikt. In Opera werken ze al zonder. Internet Explorer 10 gaat ze zonder voorvoegsel ondersteunen.

Zodra de experimentele fase voorbij is, wordt het voorvoegsel weggelaten. Omdat dat moment niet bij alle browsers hetzelfde is, zet je nu ook al de officiële namen transition en transform erbij. Deze worden als laatste opgegeven. Bijvoorbeeld Firefox herkent -moz-transform. Zodra Firefox transform gaat herkennen, zal dit -moz-transform overrulen, omdat het er later in staat. Dat ze er beide in staan, is dus geen enkel probleem.

Op dit moment moet je nog het volgende schrijven:

{-moz-transform: ...; -ms-transform: ...; -o-transform: ...; -webkit-transform: ...; transform: ...;}

In de toekomst kun je volstaan met:

{transform: ...;}

Voor transition, column-count en column-rule geldt natuurlijk ongeveer hetzelfde.

Alleen :hover of :hover, :focus en :active?

Het eerste deel van deze tekst is voor alle voorbeelden met links en dergelijke hetzelfde, het laatste deel (onder het kopje Speciaal bij dit voorbeeld) is speciaal voor dit voorbeeld.

In mobiele browsers werkt de Tab-toets niet op de hieronder beschreven manier, dus daarop heeft deze tekst geen betrekking.

De meeste mensen openen 'n link door erop te klikken. Er is echter 'n tweede manier: met behulp van de Tab-toets (sommige browsers gebruiken andere toetsen, maar het principe is hetzelfde). Met behulp van de Tab-toets kun je van link naar link 'springen'. Op welke link je staat, wordt door alle browsers aangegeven met een of ander kadertje rondom de link.

De link met het kadertje eromheen heeft focus. Dat wil zeggen dat je die link volgt, als je op de Enter-toets drukt. In principe werkt dit precies hetzelfde als gewoon klikken op de link.

Als iemand geen muis wil of kan gebruiken, bijvoorbeeld door 'n handicap, is deze manier om 'n link te openen erg handig. Als de volgorde van de links in de code niet logisch is, kun je eventueel met behulp van tabindex 'n afwijkende volgorde van de links opgeven. De Tab-toets volgt dan die afwijkende volgorde.

Tot zover is er nauwelijks verschil tussen het gebruik van de Tab-toets of van de muis.

Als je echter extra dingen onder de link hebt gestopt, die pas gaan werken als je over de link hovert, is er wel 'n verschil. Je geeft dat aan met :hover: als je over de link hovert. Met de Tab-toets alleen kun je niet over 'n link hoveren. Dus als er bijvoorbeeld 'n pop-up wordt geopend, zul je die niet zien, als je de Tab-toets gebruikt om naar 'n link te gaan.

Om dit op te lossen kun je, op dezelfde manier als je :hover gebruikt, :focus gebruiken: als de link focus heeft. Dat is dus als er 'n kadertje rondom de link staat en de link wordt gevolgd bij het indrukken van Enter.

Door dus a:hover, a:focus {...} te gebruiken, opent bijvoorbeeld 'n pop-up ook, als je de Tab-toets gebruikt. Maar er zitten 'n paar adders onder het gras.

* Naast :hover en :focus is er nog :active. Deze laatste zou horen te werken als de muis wordt ingedrukt op de link. Dat werkt ook zo in alle browsers, behalve in Internet Explorer vóór versie 8. In haar onmetelijke wijsheid heeft Microsoft besloten af te wijken van de standaard: :active werkt in oudere versies zoals :focus hoort te werken, en :focus werkt gewoon helemaal niet vóór versie 8. In alle andere browsers werken :focus en :active dus wel volgens de standaard, en met ingang van versie 8 van Internet Explorer houdt Microsoft zich ook eindelijk aan de standaard.

Dit betekent dat je niet kunt volstaan met a:hover, a:focus {...}, maar dat je a:hover, a:focus, a:active {...} moet gebruiken, want anders werkt het niet in oudere versies van Internet Explorer. Het zal nog jaren duren voor deze oude versies niet meer worden gebruikt, maar omdat Microsoft zich nu eindelijk ook aan de standaard houdt op dit punt, wordt :active nu ook langzaamaan bruikbaar, voor waar het voor is bedoeld.

* Belangrijke informatie moet je niet geven via :focus of :active, omdat dit niet werkt als css uit staat.

* Ten slotte kan 'n pop-up of zoiets gruwelijk in de weg komen te staan, bijvoorbeeld door de rest van de pagina af te dekken. Iemand die gewoon de muis kan gebruiken, verplaatst deze even en de pagina is weer zichtbaar. Iemand die moeite heeft met het gebruik van de muis, heeft deze mogelijkheid niet of minder. Als je buiten de link en de daarbij horende pop-up en dergelijke klikt, sluit deze weliswaar, maar dat is nu juist het probleem: mensen die de muis niet goed kunnen gebruiken, hebben nou net daar problemen mee.

Als je via de Terug-toets teruggaat naar de vorige pagina, heeft de link waar je vandaan kwam nog steeds focus, en dus staan pop-up en dergelijke ook nog open. Wat ook heel storend kan zijn als andere delen van de pagina daardoor niet te zien zijn. Op het moment dat ik dit schreef, werkte de Terug-toets bij alle browsers zo, met uitzondering van Google Chrome. Maar 't kan best zijn dat Google Chrome het inmiddels ook doet, of 'n andere juist weer niet, want dit schijnt nogal te veranderen.

Om al deze redenen is het goed je even af te vragen, of de voordelen van 'n pop-up en dergelijke wel opwegen tegen de nadelen. Ik zet zelf mijn eigen overwegingen bij elk voorbeeld steeds even erbij. Wat natuurlijk niet wil zeggen dat je daar geen andere mening over zou kunnen hebben.

Speciaal bij dit voorbeeld

:active wordt hier niet gebruikt, omdat het zinloos is om ergens op te klikken: als je ergens op klikt, moet je er al met de cursor over hoveren, dus dan werkt :hover al.

:active zou alleen nodig zijn voor Internet Explorer 7 bij gebruik van de Tab-toets. Maar omdat :active niet werkt in deze browser, is :active ook voor deze browser niet nodig. (Mogelijk zou hij wel werkend zijn te krijgen, maar ik geloof het wel voor dit in verregaande staat van ontbinding verkerende wanproduct.)

:focus gebruik ik wel. Er worden hier geen andere delen van de pagina afgedekt of zo, en het maakt de onderdelen bereikbaar via de Tab-toets.

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.

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.

<meta name="viewport" content="width=device-width, initial-scale=1">

Mobiele apparaten variëren enorme in breedte. En dat is een probleem. Sites waren, in ieder geval tot voor kort, gemaakt voor desktopbrowsers. En die hebben, in vergelijking met bijvoorbeeld een smartphone, heel brede vensters. Hoe moet je op 'n smartphone een pagina weergeven, die is gemaakt voor de breedte van een desktop? Je kunt natuurlijk wachten tot álle sites zijn omgebouwd voor smartphones, tablets, enz., maar dan moet je waarschijnlijk heel erg lang wachten.

Mobiele browsers gokken erop dat een pagina een bepaalde breedte heeft. Safari voor mobiel bijvoorbeeld gaat ervan uit dat een pagina 980 px breed is. De pagina wordt vervolgens zoveel versmald dat hij binnen het venster van het apparaat past. Op een iPhone wordt de pagina dus veel smaller dan op een iPad. Vervolgens kan de gebruiker inzoomen op het deel van de pagina dat hij of zij wil zien.

Dit betekent ook dat bij het openen van de pagina de tekst meestal heel erg klein wordt weergegeven. (Meestal, want niet alle browsers en apparaten doen het op dezelfde manier.) Niet erg fraai, maar bedenk maar 'ns 'n betere oplossing voor bestaande sites.

Nieuwe sites of pagina's kunnen echter wel rekening houden met de veel kleinere vensters van mobiele apparaten. Deze pagina bijvoorbeeld hoeft in bredere vensters niet aangepast te worden, en in smallere vensters is hij gewoon volledig onbruikbaar. Maar die stomme mobiele browser weet dat niet, dus die gaat ervan uit dat ook de al aangepaste pagina 980 px breed is, en verkleint die dan. Dat is ongeveer even behulpzaam als de gedienstige kelner die behulpzaam de stoel naar achteren trekt, net als jij wilt gaan zitten.

Om de door de browser aangeboden hulp vriendelijk maar beslist te weigeren, wordt deze tag gebruikt. Hiermee geef je aan dat de pagina is geoptimaliseerd voor mobiele apparaten.

Een iPad in portretstand bijvoorbeeld is 768 px breed. De kreet width=device-width zegt tegen de mobiele browser dat de breedte van de weer te geven pagina gelijk is aan de breedte van het apparaat. Voor een iPad in portretstand dus 768 px. En dat klopt, want de weer te geven foto en de pop-ups passen binnen deze breedte. Er is dus geen enkele reden de pagina aan te passen.

In vensters smaller dan760 px werkt deze pagina gewoon niet lekker, omdat je niet de hele foto ziet. Bovendien vallen grote delen van de pop-ups buiten het venster, waardoor ze heel moeilijk te lezen zijn. En ook moeilijk te sluiten. Je zou de foto wel kunnen verkleinen, zodat hij binnen het venster past, maar dan worden de plaatsen om aan te raken te klein. Deze pagina is gewoon niet geschikt voor smallere vensters. Daarom is aanpassen ook hier niet zinvol.

Er staat nog een tweede deel in de tag: initial-scale=1. Sommige mobiele apparaten zoomen een pagina gelijk in of uit. Ook weer in een poging behulpzaam te zijn. Ook dat is hier niet nodig, want de pagina past zich aan het apparaat aan. Er is ook een instructie om zoomen helemaal onmogelijk te maken, maar die gebruik ik niet. De bezoeker kan zelf nog gewoon zoomen, wat belangrijk is voor mensen die wat slechter zien.

<link rel="stylesheet" href="../../css/naam-van-stylesheet.css"> <!--Instellingen voor Internet Explorer --> <!--[if IE]> <link rel="stylesheet" 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> 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.

In html5 is type="text/css" niet meer nodig bij een stylesheet, omdat dit de standaardinstelling is.

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 die uit de algemene stylesheet dan in principe overrulen.

<style>

In html5 is type="text/css" niet meer nodig bij <style>, omdat dit de standaardinstelling is.

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, zoals ik die in dit voorbeeld gebruik. Maar als je dat doet, garandeer ik je hele grote problemen, omdat het volstrekt onoverzichtelijk is. Ik gebruik deze lay-out alleen, 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

Het element waarbinnen de hele pagina staat. Veel instellingen die hier worden opgegeven, worden geërfd door de kinderen van <body>. Ze gelden voor de hele pagina, tenzij ze later worden gewijzigd. Dit geldt bijvoorbeeld voor de lettersoort, de lettergrootte en de voorgrondkleur.

margin: 0; padding: 0;

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

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

background: #ff9;

Achtergrondkleurtje.

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: 100%;

Dit slaat natuurlijk nergens op, want hier staat gewoon dat de letters de normale grootte moeten hebben. Dit is nodig vanwege Internet Explorer.

Ik gebruik hier % als eenheid, en voor alle andere lettergroottes gebruik ik em. 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: 1em; zou hetzelfde moeten zijn als font-size: 100%;), maar %, 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.

#smal-venster

Het element met id="smal-venster". Hierin staat een waarschuwing dat dit niet goed werkt in vensters smaller dan 760 px. Voor bredere vensters wordt dit bij @media screen and (min-width: 760px) verborgen.

Oudere en simpele browsers kunnen de breedte van het venster niet doorgeven. Dit zijn juist de browsers die vaak in kleine apparaten worden gebruikt. Daarom staat deze waarschuwing standaard aan en wordt pas uitgeschakeld, als daadwerkelijk wordt gemeld dat het venster breder dan 760 px is.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: white;

Achtergrond wit, zodat het goed opvalt.

width: 730px;

Breedte. Samen met de padding en de border wordt het nu even breed als de afbeelding. In dit geval maakt de breedte trouwens niet zo heel veel uit, omdat dit alleen op smallere vensters zichtbaar is.

max-width: 100%;

Een breedte in procenten wordt altijd genomen ten opzichte van de ouder. Als die er niet is, zoals hier het geval is, wordt de breedte genomen ten opzichte van het venster van de browser. Nooit breder maken dan het venster, zodat de volledige melding altijd is te zien.

margin: 0 auto;

Omdat voor onder en links geen waarde is opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 auto 0 auto in de volgorde boven - rechts - onder - links.

Boven en onder geen marge, links en rechts auto wat hier betekent: evenveel. De melding staat dus altijd horizontaal gecentreerd. Deze manier van horizontaal centreren van een blok-element werkt alleen, als het te centreren blok-element een breedte heeft.

Ook dit maakt hier niet zo heel veel uit. De melding is 750 breed (inclusief padding en border) en is alleen zichtbaar als het venster smaller dan 760 px is. Alleen bij een venster met een breedte tussen 750 en 760 px heeft dit dus effect. Tja, je bent 'n Pietje Precies of niet...

border: red solid 5px;

Duidelijke rode rand, zodat het goed opvalt.

border-radius: 10px;

Ronde hoeken. Als de browser dit niet kent, wordt het gewoon genegeerd.

padding: 5px;

Kleine ruimte tussen tekst en rand van de <p>.

#preload

Het element met id="preload". Dit is een div die alleen wordt gebruikt om de achtergrond-afbeeldingen al bij het openen van de pagina te laden. Verder speelt hij geen enkele rol.

background: url(099-pics/achtergrond.png), url(099-pics/achtergrond-2.png), url(099-pics/toebehoren.jpg);

css3 geeft de mogelijkheid om meerdere achtergrond-afbeeldingen te gebruiken in hetzelfde element. Hier krijgt deze div er drie. Omdat deze div helemaal bovenaan in de html staat, worden de drie achtergrond-afbeeldingen gelijk bij het openen van de pagina geladen.

Een achtergrond-afbeelding heeft van zichzelf geen grootte: hij vult alleen de achtergrond van het element waar hij in staat. Omdat deze div geen hoogte en breedte heeft, is er geen achtergrond om te vullen. Oftewel: de afbeeldingen worden wel geladen, maar je ziet ze niet. Precies de bedoeling.

Alle achtergrond-afbeeldingen die bij hoveren en focus verschijnen, zijn bij elkaar gezet op drie grote afbeeldingen, een zogenaamde 'sprite'. De aparte afbeeldingen op de sprite worden met behulp van background-position op de juiste plaats gezet. Het combineren van kleine afbeeldingen in een sprite, voorkomt 'n hele serie aanroepen naar de server. Hoe dit precies werkt, staat uitgebreider bij De achtergrond-afbeeldingen...

De achtergrond-afbeeldingen worden vaak met 'n kleine vertraging geopend door het gebruik van transition. Als de afbeeldingen dan nog moeten worden geladen, zie je die vertraging niet. De de tijd die voor de vertraging is bedoeld, wordt dan gebruikt om de afbeelding laden. Dit speelt alleen bij de eerst geopende achtergrond-afbeelding van elke sprite, want daarna is de sprite gelijk beschikbaar.

Door de sprites gelijk bij het openen van de pagina te laden, zorg je dat ook de eerst geopende afbeelding langzaam zichtbaar kan worden.

Overigens ben ik meestal niet zo'n voorstander van dit vooraf laden ('preloaden'), omdat je het risico loopt dat afbeeldingen worden geladen, zonder dat ze worden bekeken en dus onnodig. Maar in dit geval moet het wel. Bovendien is hier de kans dat ze niet worden bekeken vrijwel te verwaarlozen, lijkt mij.

Internet Explorer 7 en 8 kunnen maar één achtergrond-afbeelding weergeven, dus daarin wordt alleen de eerste afbeelding geladen. Omdat die transition ook niet kennen, is dat geen enkel probleem.

#content

Het element met id="content". De div waar de hele handel in zit.

width: 750px;

Breedte.

margin: 5px auto;

Omdat voor onder en links geen waarden zijn opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 5px auto 5px auto in de volgorde boven - rechts - onder - links. Boven en onder 5 px marge, links en rechts auto. Dat betekent in dit geval: evenveel. Oftewel: de div, en dus de hele pagina, staat altijd horizontaal in het midden. (De marge onderaan is feitelijk overbodig, maar staat ook niet in de weg, dus ik laat hem gewoon staan. Sommige mensen zouden dat slordig vinden...)

Deze manier van horizontaal centreren van een blok-element werkt alleen, als het blok-element een breedte heeft.

text-align: center;

Tekst horizontaal centreren.

Deze eigenschap wordt geërfd door alle kinderen van #content. Voor de elementen waar tekst niet gecentreerd moet worden, geef ik later aparte css op.

cursor: url(099-pics/yinyang.png) 10 10, url(099-pics/yinyang.cur), auto;

Opera kan de cursor (nog) niet veranderen. In Safari, Google Chrome, Firefox en Internet Explorer verandert, zodra je boven deze div hovert, de cursor in een yinyang-symbool. Normaal genomen is het veranderen van de cursor een bijzonder slecht idee, omdat mensen aan de standaardvormen gewend zijn. Maar in dit geval vond ik het als onderdeel van de satire wel grappig.

Het bestandje uit de eerste url is een doorzichtige png. Dat doorzichtige is nodig, omdat een afbeelding nou eenmaal vierkant is en je rondom de yinyang geen kleur wilt zien.

yinyang-teken

Hiernaast staat de cursor afgebeeld. Deze is 20 x 20 px groot. Als ik met deze cursor over een gele cirkel hover, moet een venstertje openen. Maar wat is precies 'de cursor'? Op welk deel van de yinyang moet worden gereageerd? Bij een gewone cursor is dat duidelijk, hier niet.

css3 biedt een nieuwe mogelijkheid: het instellen van een 'hotspot'. Als ik niets invul, zijn de waarden daarvan 0 0. Dat wil zeggen: 0 px in horizontale richting en 0 px in verticale richting, oftewel: de linkerbovenhoek. Zodra de linkerbovenhoek boven de gele cirkel komt, werkt het hoveren. Als ik van onderaf de cirkel binnenga, werkt het hoveren dus gelijk. Maar als ik van bovenaf kom, werkt het hoveren pas als de hele yinyang, inclusief linkerbovenhoek, boven de gele cirkel is.

Met de twee getallen 10 10 achter de eerste url geef ik aan, dat de hotspot 10 px vanaf links en 10 px vanaf boven is. En omdat de afbeelding 20 x 20 px is, is dat precies het midden. Nu wordt op hoveren gereageerd, zodra de hotspot boven de gele cirkel komt. Het maakt nu geen verschil meer of ik van boven of van onder kom.

Voor Internet Explorer kun je geen hotspot opgeven.

De tweede afbeelding is nodig voor Internet Explorer 7, 8 en 9. Die hebben een eigen formaat nodig, ook Internet Explorer 9 vreemd genoeg nog steeds. Bij Internet Explorer zijn, traditiegetrouw, 'n paar aparte problemen.

Het pad naar de cursor voor Internet Explorer moet altijd lopen vanaf het html-bestand, ook als je een extern stylesheet gebruikt. Op de site zelf staat de css in een extern stylesheet. Normaal genomen zou het pad voor de cursor dan worden:

url:(../afbeelding/imagemap/099-pics/yinyang.cur)

Ook in die externe stylesheet blijf het echter gewoon:

url:(099-pics/yinyang.cur)

Waarom dat zo is, is mij 'n raadsel. Het is wel heel verwarrend, want bijvoorbeeld een achtergrond-afbeelding krijgt wel het normale pad. Ook voor andere browsers wordt het normale pad gebruikt: vanuit de stylesheet en niet vanuit het html-bestand.

Op internet is nogal eens te lezen dat Internet Explorer voor versie 9 een eigen cursor standaard vergroot naar 32 x 32 px. Dat is maar gedeeltelijk waar.

In eerste instantie heb ik een met behulp van het programmaatje ImageMagick een gif van 20 x 20 px geconverteerd naar een cur-bestand. Die cursor werd inderdaad vergroot tot 32 x 32 px.

Omdat ik per ongeluk het cur-bestand had gewist, moest ik nogmaals converteren. Het gif-bestandje had ik niet meer, dus gebruikte ik nu ImageMagick om van een png naar een cur te converteren. Nu werd de cursor niet vergroot in Internet Explorer 7 en 8, maar stond deze ongeveer twee centimeter boven de plaats waar daadwerkelijk werd gehoverd.

Uiteindelijk heb ik een cursor van de goede grootte die op de goede plaats staat kunnen maken op www.cursor.cc. Ik heb de png, dezelfde als die ImageMagick had gebruikt, daar geüpload. De png is online geconverteerd naar een cur-bestand, en dat bleek eindelijk goed te werken. Kortom: een aantal verschillende manieren proberen kan helpen.

Een verklaring heb ik niet echt kunnen vinden, maar het schijnt dat in het cur-bestand allerlei informatie wordt opgeslagen. Het uiteindelijke cur-bestand is trouwens ruim zeven keer zo groot als de png. Uit dit soort dingen blijkt weer 'ns glashelder dat de eigen techniek van Microsoft echt veel en veel beter is dan de standaardmethoden!

Internet Explorer 9 kent dit soort problemen niet meer. Maar gelukkig heeft Microsoft zichzelf weer overtroffen: Internet Explorer 9 geeft gewoon helemaal geen yinyang weer, maar de gewone cursor. Zodra je een hotspot aangeeft (de getallen 10 10 achter de eerste cursor), negeert deze wereldbrowser namelijk deze regel. Maakt niet uit of je ergens anders iets speciaal voor Internet Explorer 9 neerzet of wat dan ook: zodra er ergens een hotspot is aangegeven, werkt cursor gewoon niet meer. Omdat deze cursor alleen maar 'n extraatje is, doet deze topprestatie van Microsoft het dan maar zonder aangepaste cursor.

(Je zou dit wel werkend kunnen krijgen in Internet Explorer 9 met behulp van conditional comments. Daarmee zou je Internet Explorer 9 een <html> met een eigen id kunnen geven. En daarmee kun je weer zorgen dat Internet Explorer 9 de regel met de hotspots gewoon helemaal niet te zien krijgt. Dat is me te veel moeite.)

Aan het einde staat nog auto. Als om een of andere reden de cursor niet kan worden geladen, geeft dit aan dat de gewone standaard-cursor moet worden gebruikt.

h1

Alle <h1>'s. Dat is er altijd maar eentje, waarin de belangrijkste kop van de pagina staat. Hier is dat de naam van mijn fiets, oeps, van de holistobiel.

De tekst die in een <h1> staat, is belangrijk voor screenreaders, zoekmachines, en dergelijke. Normaal genomen zet je daar dus niet zo'n idioot woord als 'holistobiel' in, tenzij je toevallig holistobielen importeert.

Een <h1> heeft van zichzelf allerlei eigenschappen, zoals grote letters. Die eigenschappen kan ik hier deels niet gebruiken. Maar ik wil wel de semantische betekenis van de <h1> gebruiken. Dit los ik op, door gewoon een <h1> te gebruiken en de eigenschappen met css aan te passen.

(In html5 komt waarschijnlijk de mogelijkheid om meer dan een <h1> te gebruiken. Omdat nog volstrekt onduidelijk is, hoe zich dat precies gaat ontwikkelen, hoe screenreaders en dergelijke er mee omgaan, en hoe zoekmachines dan de belangrijkste kop moeten ontdekken, maak ik daar voorlopig nog geen gebruik van.)

margin: 0;

Een <h1> heeft van zichzelf een marge aan boven- en onderkant. Dat komt hier niet goed uit: weg ermee.

border: black solid 1px;

Randje rondom de kop.

border-radius: 10px 10px 0 0; ronde hoek

Links- en rechtsboven ronde hoeken, rechts- en linksonder gewoon rechte hoeken.

Omdat maar één maat per hoek is opgegeven, wordt de hoek zowel verticaal als horizontaal 10 px lang. Op deze manier krijg ik cirkelvormige hoeken, alsof het 'n kwart van 'n cirkel is.

Internet Explorer 7 en 8 kennen border-radius niet, die krijgen later aparte css.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: #cfe;

Lichtblauwe achtergrond.

font-size: 1.5em;

Kleinere lettergrootte dan een <h1> normaal genomen heeft. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen aanpassen.

position: relative;

Om kinderen te kunnen positioneren ten opzichte van een ouder, moet die ouder zelf een fixed, relatieve of absolute positie hebben. Omdat ik verder niets opgeef hier, heeft dit geen enkele invloed op de <h1> zelf.

#touch-sluit

Het element met id="touch-sluit". Dit is een span met daarin de tekst 'Sluit pop-up', die alleen zichtbaar is op touchscreens. De tekst staat links van de titel. Eigenlijk is deze tekst niet nodig, omdat de pop-ups altijd sluiten, als je het scherm aanraakt buiten de pop-up. Maar voor het geval dat niet duidelijk is, wordt deze tekst getoond. Verderop wordt deze tekst voor desktopbrowsers verborgen.

background: rgba(200, 0, 200, 0.2);

Waarom hier voor rgba() is gekozen, staat iets hieronder bij line-height.

Meestal wordt voor 'n kleur de hexadecimale notatie gebruikt, iets als color: #33ab01;. Daarbij worden niet alleen cijfers, maar ook letters gebruikt. 0 tot en met 9 werken precies hetzelfde als altijd, maar na de 9 komen nog A, B, C, D, E en F.

Als je telt, is 't dus: 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12, enz. Daarbij is A gelijk aan het tientallige 10, B aan 11, enz. Op deze manier kun je met twee cijfers en/of letters 256 mogelijkheden aangeven: van 00 tot en met FF.

De eerste drie getallen bij rgba() geven de kleur aan. Deze lopen van 0 tot en met 255, dus ook hiermee kun je 256 mogelijkheden aangeven. En omdat er drie getallen zijn levert dat 256 x 256 x 256 = 16.777.216 mogelijke kleuren op, net iets meer dan het aantal kleurpotloden in de gemiddelde kleurdoos van 'n kind.

De notatie bij rgba() geeft dus precies evenveel mogelijkheden als de hexadecimale.

Het eerste getal staat voor rood, het tweede voor groen en het derde voor blauw (feitelijk de Engelse namen, maar de eerste letter is toevallig in het Nederlands hetzelfde). Uit deze drie kleuren zijn alle kleuren op een monitor opgebouwd.

255 wil zeggen volledig aanwezig, 0 wil zeggen helemaal ontbrekend.

255, 255, 255 levert wit op, 0 , 0 , 0 zwart.

In plaats van getallen mag je ook percentages gebruiken, bijvoorbeeld: rgba(10%, 20%, 100%, 0.3)

De hier gebruikte getallen 200, 0 en 200 leveren lichtpaars op (volgens mij, maar ik ben wat kleurenzwak...)

Het vierde getal staat voor het alfa-kanaal. Hiermee wordt de doorzichtigheid aangegeven. Dit getal loopt van 0 naar 1. Volledig doorzichtig is 0, volledig ondoorzichtig is 1.

Het getal voor het alfa-kanaal wordt als decimale breuk aangegeven, dus bijvoorbeeld 0.5 wil zeggen halfdoorzichtig. Let erop dat je 'n punt gebruikt, de Amerikaanse manier om breuken aan te geven. Als je 'n komma gebruikt, denkt de browser dat er twee verschillende getallen staan.

In dit voorbeeld is deze achtergrondkleur behoorlijk doorzichtig: 0.2. Hierdoor zie je nog behoorlijk goed, wat er onder de achtergrond zit. Waarom dat hier handig is, staat iets verderop bij line-height.

width: 120px;

Breedte.

font-size: 0.6em;

Omdat deze span binnen een <h1> staat, wordt de tekst 'Sluit pop-up' even groot als het kopje 'holistobiel'. Dat is veel te groot.

font-weight: normal;

Omdat deze span binnen een <h1> staat, wordt de tekst 'Sluit pop-up' vet. Dat is te veel van het goede.

line-height: 29px;

Regelhoogte.

Omdat de span iets verderop absoluut wordt gepositioneerd, verandert de span in een blok-element. De hoogte van een blok-element wordt normaal genomen precies hoog genoeg om de inhoud weer te geven. Hier is de inhoud 29 px hoog, vanwege deze regelhoogte. De span, en daarmee de achtergrondkleur, wordt ook 29 px hoog.

Je zou die hoogte ook met height kunnen opgeven, maar tekst komt automatisch halverwege de regelhoogte te staan. Door de hoogte op te geven met behulp van line-height in plaats van height, staat de tekst gelijk verticaal gecentreerd.

De hoogte geeft een apart probleem door afrondingsverschillen tussen browsers.

Kier onder sluitknop

Als ik de hoogte 28 px maak, staat hij goed in Firefox en Android browser. Maar in Google for iOS en Safari op de iPad en Opera Mobile op Android 4.0.3 en ontstaat dan een kiertje tussen de zwarte lijn aan de onderkant van 'holistobiel' en de achtergrondkleur van deze span. Dat is vooral te zien bij de staande zwarte rand aan de rechterkant van de span, zoals op de afbeelding hiernaast is te zien. (De achtergrond is voor de duidelijkheid even oranje gemaakt.)

Lijn onder sluitknop valt weg

Als ik de hoogte 29 px maak, is het goed in Google for iOS en Safari op de iPad en Opera Mobile in Android 4.0.3, maar bedekt de achtergrondkleur van de span in Firefox en Android browser op Android 4.0.3 de zwarte lijn aan de onderkant van 'holistobiel', zoals op de afbeelding is te zien. (De achtergrond is voor de duidelijkheid even wit gemaakt.)

Sluitknop helemaal goed

Uiteindelijk heb ik de hoogte 29 px gemaakt. De achtergrondkleur staat dus over de zwarte lijn onder de span heen. Deze zou daardoor wegvallen, net zoals bij de afbeelding hierboven met de witte achtergrond.

Maar door de achtergrondkleur vrijwel doorzichtig te maken, zie je de zwarte lijn door de achtergrondkleur heen. Nu is er geen kier én de lijn aan de onderkant is zichtbaar, in alle browsers.

border-right: black solid 1px;

Zwart lijntje rechts.

border-top-left-radius: 10px;

Linksboven zit een ronde hoek. Daarom krijgt deze span linksboven dezelfde ronde hoek. Anders dan de naam van deze eigenschap suggereert, wordt ook een achtergrondkleur afgerond.

position: absolute;

Om de span op de goede plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier de <h1> waar de span in staat.

Een span is van zichzelf een inline-element. Door de span absoluut te positioneren verandert deze in een blok-element, waardoor eigenschappen als breedte zijn te gebruiken.

Een absoluut gepositioneerd element is even asociaal als een absolute heerser: het trekt zich niets van de omgeving aan. Bij #content is alle tekst horizontaal gecentreerd. Dat geldt ook voor de tekst binnen de <h1> en voor de tekst binnen deze span.

Normaal genomen zou de tekst 'Sluit pop-up' uit deze span samen met de tekst 'holistobiel' worden gecentreerd, als een geheel. Maar omdat deze span absoluut is gepositioneerd, wordt 'Sluit pop-up' volledig los gezien van 'holistobiel'. Precies de bedoeling, want 'Sluit pop-up' moet helemaal links komen te staan.

left: 0;

Helemaal aan de linkerkant zetten.

.no-touch #touch-sluit

Het element met id="touch-sluit" binnen een element met class="no-touch". Dit is een span met daarin de tekst 'Sluit pop-up'.

Als je in de broncode kijkt, zul je de class "no-touch" niet vinden. Deze class wordt door het JavaScript modernizr toegevoegd aan <html> bij browsers, die touch events niet herkennen. In principe werkt deze regel daardoor alleen in browsers, die touch events niet herkennen. Dat zijn (meestal) desktopbrowsers.

Hoe dit verder precies werkt, staat bij Touchscreens herkennen met behulp van modernizr.

Om <html class="no-touch"> te kunnen zien in de broncode, moet je de gegenereerde code bekijken. In Firefox kan dat met behulp van bijvoorbeeld Firebug of Web Developer onder View Source → View Generated Source. Of met het in Firefox ingebouwde 'Element inspecteren'. Andere browsers hebben andere manieren om gegenereerde code te bekijken.

display: none;

Span en dus de daarin zittende tekst verbergen. Deze tekst is alleen zinvol op mobiele browsers.

#content p

De paragrafen binnen het element met id="content". Dat is er hier maar eentje. De tekst boven de grote afbeelding met de fiets staat erin.

margin: 0;

Een paragraaf heeft van zichzelf een marge aan boven- en onderkant. Dat komt hier niet goed uit.

border: black solid;

Zwarte rand. Hier gelijk onder geef ik de dikte van de rand op.

border-width: 0 1px 1px;

Kleur en stijl van de rand heb ik gelijk hierboven opgegeven, hier geef ik alleen de breedte op. Omdat voor links geen breedte is opgegeven, krijgt links automatisch dezelfde breedte als rechts. Hier staat dus eigenlijk 0 1px 1px 1px in de volgorde boven - rechts - onder - links.

Overal een randje, behalve aan de bovenkant. Gelijk boven deze paragraaf staat een <h1> met aan de onderkant een zwart randje van 1 px breedte. Als deze paragraaf ook een randje aan de bovenkant krijgt, staan die twee randjes tegen elkaar aan en wordt de rand tussen deze paragraaf en de <h1> erboven 1 + 1 = 2 px breed. Nu heeft alleen de <h1> onderaan een randje, dus de rand is overal 1 px breed.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: #cfe;

Lichtblauwe achtergrond.

#content p span

Spans die binnen een paragraaf staan, die weer binnen het element met id="content" staan. Dat is hier alleen de span, waarin de kleine tekst boven de grote afbeelding met de fiets staat.

position: relative;

Nu kan ik de span verplaatsen ten opzichte van de plaats, waar hij normaal genomen zou komen te staan.

De span komt iets te laag te staan. Omdat een span een inline-element is, kan ik geen eigenschappen als margin of zo gebruiken. De simpelste manier om hem iets omhoog te zetten, is het relatief positioneren van de span.

top: -3px;

3 px naar boven verplaatsen.

font-size: 0.7em;

Kleine letter. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

#hotspots

Het element met id="hotspots". Dit is een div waarbinnen de hele handel staat, met uitzondering van de tekst boven de grote afbeelding met de fiets.

position: relative;

Relatief positioneren. Dit heeft geen enkele invloed op deze div zelf, omdat ik verder niets opgeef. Maar dit geeft de mogelijkheid om kinderen van deze div ten opzichte van deze div te kunnen positioneren. Kinderen kunnen alleen maar ten opzichte van een ouder worden gepositioneerd, als deze ouder relatief, absoluut of fixed is gepositioneerd.

#hotspots img

De afbeeldingen binnen het element met id="hotspots". Dat is hier maar één afbeelding: de holistobiel.

display: block;

Een <img> is een inline-element. Veel mensen denken dat het een blok-element is, maar dat is niet zo. Het is een inline-element met wat aparte eigenschappen. Hier wordt het in een blok-element veranderd.

Deze regel is volstrekt overbodig. In het begin ben ik met allerlei eigenschappen van de grote afbeelding met de fiets bezig geweest en daarvoor moest het toen een blok-element worden. Inmiddels is dat niet meer zo.

Als ik het echter nu alsnog weghaal, wordt de grote afbeelding met de fiets weer een gewoon inline-element. Daardoor gaat de regelhoogte opeens meespelen. Wat weer tot gevolg heeft, dat alle gele cirkels, de achtergrond-afbeeldingen, de teksten, enz. ongeveer 3 px te laag komen te staan. Ook het punt van waaruit de achtergrond-afbeeldingen beginnen te openen, klopt niet meer. Aparte instellingen voor Internet Explorer 7 moeten worden aangepast. En nee, je kunt niet simpel alles 3 px hoger zetten: de correctie varieert.

Ergens line-height: 0; neerzetten werkt ook niet, want dan moet ik elders op tig plaatsen weer aangeven dat een regelhoogte wél nodig is, omdat anders alle tekst op dezelfde regel over elkaar heen wordt gezet.

Ik kies dus voor een schandalige oplossing: ik laat het gewoon lekker staan. Het kan geen kwaad, is maar één eigenschap en spaart enorm veel werk uit.

border-radius: 0 0 10px 10px;

Links- en rechtsboven geen ronde hoeken, rechts- en linksonder ronde hoeken. Omdat ik maar één maat per hoek opgeef, wordt de hoek zowel verticaal als horizontaal 10 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is.

Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven, maar het principe is hetzelfde.

Bij Opera geeft border-radius vreemd genoeg geen ronde hoeken aan een afbeelding. Omdat Opera zich in de regel prima aan de standaard houdt, zal dit in de (nabije) toekomst ongetwijfeld ook in Opera werken.

#hotspots div

De divs binnen het element met id="hotspots". Elk onderdeel waarover gehoverd kan worden, heeft een eigen div. De divs zijn te herkennen aan de gele rand rondom elke div.

Een aantal instellingen is voor alle divs hetzelfde, of komt vaak voor. Die kan ik hier in één keer opgeven, dat scheelt nogal wat css. Als een div afwijkende instellingen moet krijgen, geef ik die later apart voor die div op.

position: absolute;

Om de divs op de juiste plaats te kunnen neerzetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots.

width: 30px; height: 30px;

Elke div krijgt een eigen breedte en hoogte, afhankelijk van bij welk onderdeel hij hoort. Deze breedte en hoogte komen vaak voor, daarom geef ik die hier voor álle divs op. Ik hoeft dan alleen nog maar breedte en hoogte op te geven bij de divs die een afwijkende maat hebben.

border: yellow solid 2px;

Gele rand van 2 px breed rondom de div.

border-radius: 20px;

Alle divs krijgen ronde hoeken. Deze maat komt vaak voor, dus die geef ik hier op. Nu hoeven alleen divs met een afwijkende ronding nog maar een border-radius te krijgen.

Omdat ik maar één maat per hoek opgeef, wordt de hoek zowel verticaal als horizontaal 20 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is. Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is hetzelfde.

En omdat ik maar één hoek opgeef, geldt deze waarde voor alle hoeken: alle vier de hoeken worden rond.

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

Dit is een doorzichtige achtergrond-afbeelding van 1 x 1 px. Deze is nodig voor Internet Explorer 7, 8 en 9, omdat hoveren anders alleen boven de borders van de div werkt en niet binnen de div. Hoveren werkt ook als de div een massieve achtergrondkleur krijgt, maar dat kan niet, omdat er hier een afbeelding achter zit. En een doorzichtige achtergrondkleur werkt niet.

Heel vreemd trouwens dat deze truc ook bij Internet Explorer 9 nog steeds nodig is, want deze browser houdt zich meestal uitstekend aan de standaard.

#hotspots div:focus

De divs binnen het element met id="hotspots", maar alleen als de div focus heeft. Elk onderdeel dat focus kan krijgen, heeft een eigen div. De divs zijn te herkennen aan de gele rand rondom elke div.

Een div heeft focus als je er met behulp van de Tab-toets of op een soortgelijke manier naartoe bent gegaan. Als een link focus heeft, wordt de link gevolgd als je op Enter drukt. Hier zijn het geen links, maar de divs krijgen op dezelfde manier focus. Dit werkt trouwens alleen maar als de links een tabindex hebben gekregen in de html.

z-index: 10;

z-index kan alleen maar worden gebruikt als het element een relatieve, absolute of fixed positie heeft. Deze divs hebben bij #hotspots div een absolute positie gekregen, dus kan ik het hier gebruiken.

Ik gebruik wat grotere getallen als waarde. Hierdoor kan ik later, als dat ooit nodig zou zijn, andere z-indexen tussenvoegen zonder alle waardes van al bestaande z-indexen te moeten veranderen.

Sommige afbeeldingen komen bij openen onder de knoppen 'Toebehoren' en 'Getuigenissen' te staan. De simpelste manier om dat te voorkomen is om de divs, en dus de daarin zittende spans met afbeeldingen, bij focus een hogere z-index te geven.

outline: transparent solid 0;

Een element dat focus heeft, krijgt normaal genomen een outline. Dat is hier niet nodig en bovendien hartstikke lelijk. De volledige regel is nodig, want Opera is kennelijk zo trots op z'n foeilelijke knalblauwe outline, dat alleen outline: 0; niet voldoende is.

#hotspots div:hover

De divs binnen het element met id="hotspots", maar alleen als erover wordt gehoverd. Elk onderdeel waarover gehoverd kan worden, heeft een eigen div. De divs zijn te herkennen aan de gele rand rondom elke div.

z-index: 20;

z-index kan alleen maar worden gebruikt als het element een relatieve, absolute of fixed positie heeft. Deze divs hebben bij #hotspots div een absolute positie gekregen, dus kan ik het hier gebruiken.

Ik gebruik wat grotere getallen als waarde. Hierdoor kan ik later, als dat ooit nodig zou zijn, andere z-indexen tussenvoegen zonder alle waardes van al bestaande z-indexen te moeten veranderen.

Bij #hotspots div:focus heb ik de divs een z-index van 10 gegeven als ze focus hebben. Als een div focus heeft, blijven de afbeeldingen en tekst geopend, zolang de div focus heeft. Als ik gelijktijdig over een andere div hover, worden ook afbeelding en tekst daarvan geopend. De afbeeldingen en teksten van twee divs zijn dan gelijktijdig geopend.

Als de div waarover wordt gehoverd later in de html staat, dan de div die focus heeft, is de div waarover wordt gehoverd volledig zichtbaar. En dus de daarin zittende tekst en afbeelding ook. Want in principe wordt een element dat later in de html staat, boven een element gezet dat eerder in de html staat.

Maar als de div die focus heeft later in de html staat, dan de div waarover wordt gehoverd, doet zich een probleem voor. Nu komt de div waarover wordt gehoverd, en dus de daarin zittende tekst en afbeelding, ónder de div die focus heeft te staan. En is daardoor niet volledig zichtbaar, dus de erin zittende tekst en afbeelding zijn ook niet volledig zichtbaar.

Ik wil dat de div waarover wordt gehoverd altijd zichtbaar is, dat die 'wint' van een div die focus heeft. Door de z-index te verhogen, is de div waarover wordt gehoverd altijd volledig zichtbaar, inclusief tekst en afbeeldingen.

.tekst, .tekst-o, .tekst-r, .tekst-l

De elementen met class="tekst", class="tekst-o", class="tekst-r" en class="tekst-l". Dit zijn de spans waarbinnen de teksten staan die bij hoveren over een div, of als de div focus heeft, verschijnen.

.tekst: de teksten die boven de bovenste helft van de grote afbeelding met de fiets verschijnen.

.tekst-o: de teksten die boven de onderste helft van de grote afbeelding met de fiets verschijnen.

.tekst-r: de teksten die boven de rechterhelft van de grote afbeelding met de fiets verschijnen.

.tekst-l: de teksten die boven de linkerhelft van de grote afbeelding met de fiets verschijnen.

Het grootste deel van de instellingen is voor deze teksten hetzelfde, die geef ik hier in één keer op.

display: none;

Normaal genomen moeten de teksten onzichtbaar zijn.

position: absolute;

Om de spans en dus de teksten daarin op de juiste plaats te kunnen neerzetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier de div waarbinnen de span staat.

Van zichzelf is een span een inline-element. Door de span absoluut te positioneren, verandert hij in een soort blok-element en kan ik eigenschappen als breedte en hoogte gebruiken.

z-index: 10;

z-index kan alleen maar worden gebruikt als het element een relatieve, absolute of fixed positie heeft. Dat is hier gelijk boven geregeld.

Ik gebruik wat grotere getallen als waarde. Hierdoor kan ik later, als dat ooit nodig zou zijn, andere z-indexen tussenvoegen zonder alle waardes van al bestaande z-indexen te moeten veranderen.

Deze z-index hoort bij een span, en die span staat weer binnen een div. Die div heeft, als erover wordt gehoverd of als de div focus heeft, bij #hotspots div:hover en #hotspots div:focus zelf een z-index gekregen van 20 of 10. Als een element een z-index krijgt, geldt een eventuele z-index van de kinderen van dat element alleen binnen het ouder-element. Hier geldt de z-index van de spans alleen bínnen de ouder-div van de span.

De ouder-div heeft alleen een z-index, als erover wordt gehoverd of als de div focus heeft. Dat komt hier prima uit, want deze span is normaal genomen onzichtbaar. Hij wordt alleen zichtbaar als over de ouder-div wordt gehoverd, of als deze focus heeft. Oftewel: alleen als de ouder-div een z-index heeft. De z-index van deze span geldt dus precies op het juiste moment.

Behalve deze span met tekst staat binnen deze div nog span.gif, met daarin de afbeeldingen die moeten worden getoond. Bij de spans met teksten die boven de linker- en rechterhelft van de grote afbeelding met de fiets komen te staan, wordt verderop een breedte in em opgegeven. Daardoor worden de spans met die teksten bij een grotere letter breder. Uiteindelijk komen de spans, en daardoor de tekst in de spans, over de afbeelding te staan. Althans: dat is de bedoeling. Maar omdat span.gif in de html na de spans met tekst komt, komen de afbeeldingen over de tekst te staan. Waardoor de tekst niet meer volledig leesbaar is. Ik vind de tekst belangrijker dan de afbeeldingen, dus geef ik de spans met tekst een hogere z-index, zodat de tekst altijd boven de afbeeldingen komt te staan.

width: 740px;

Deze breedte is geschikt voor de teksten boven de bovenste en onderste helft van de grote afbeelding met de fiets. Voor de teksten links en rechts pas ik hem later aan.

De grote afbeelding met de fiets is 750 px breed en de tekst mag niet daarbuiten komen. Omdat de spans met tekst nog een padding van 4 px en een border van 1 px krijgen, wordt de totale breedte ook 750 px: 1 + 4 + 740 + 4 + 1 = 750 px.

max-width: 740px;

De spans waarin de teksten staan die boven de linker- en rechterhelft van de grote afbeelding met de fiets komen te staan, krijgen een breedte in em. Bij een grotere lettergrootte worden ze daardoor breder. Maar ze mogen nooit breder worden dan de grote afbeelding met de fiets. (Het verschil tussen de 750 px breedte van de grote afbeelding met de fiets en deze breedte wordt hier gelijk boven verklaard.)

max-height: 503px;

De spans met teksten krijgen geen hoogte. Ze zijn door het gebruik van position: absolute; veranderd in 'n soort blok-element, en een blok-element krijgt normaal genomen altijd precies de goede hoogte: ze groeien mee met de hoeveelheid tekst die erin staat. Bij een hogere lettergrootte groeien ze ook. Maar ze mogen nooit hoger worden dan de grote afbeelding met de fiets.

De grote afbeelding met de fiets is 512 px hoog. Omdat de spans met tekst nog een padding van 4 px en een border van 1 px krijgen, wordt de totale maximumhoogte 1 + 4 + 503 + 4 + 1 = 513 px. Dat is 1 px meer dan de grote afbeelding met de fiets. Dit voorkomt dat, als de span de maximumhoogte heeft, door afrondingsverschillen bij het zoomen soms net 'n pixeltje van de grote afbeelding met de fiets onder de tekst uitkomt.

overflow: auto;

Als de tekst niet meer in de span past, laat dan een scrollbar tevoorschijn komen.

border: black solid 1px;

Zwart randje rondom de tekst.

border-radius: 0 0 12px 12px;

Links- en rechtsboven geen ronde hoek, rechts- en linksonder wel. Omdat ik maar één maat per hoek opgeef, wordt de hoek zowel verticaal als horizontaal 12 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is.

Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is hetzelfde.

padding: 4px;

Kleine afstand tussen de buitenkant van de span en de tekst erin.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background-color: white; background-color: rgba(255, 255, 255, 0.85);

Het gebruik van rgba() kan bij iets oudere browsers grote problemen geven, tot en met het volledig onleesbaar worden van tekst. Deze browsers kennen wel css en veranderen dus bijvoorbeeld wel de voorgrondkleur, waaronder de tekst, maar kennen geen rgba(), waardoor de kleur van de achtergrond niet wordt veranderd. Met 'n beetje pech levert dat 'n tekstkleur op, die niet of nauwelijks is te onderscheiden van de achtergrond.

Daarom staat er twee keer een achtergrondkleur. De eerste wordt door alle browsers gelezen, ook door oudere. De tweede achtergrondkleur met rgba() wordt genegeerd door de oudere browsers, omdat ze dit niet kennen. Die oudere browsers, zoals Internet Explorer 7 en 8, krijgen dus gewoon een massief witte achtergrond.

(Zo zou het volgens de standaard horen te werken. Maar Internet Explorer 7 trekt zich daar niets van aan. Voor die browser volgt eigen css.)

Meestal wordt voor 'n kleur de hexadecimale notatie gebruikt, iets als color: #33ab01;. Daarbij worden niet alleen cijfers, maar ook letters gebruikt. 0 tot en met 9 werken precies hetzelfde als altijd, maar na de 9 komen nog A, B, C, D, E en F.

Als je telt, is 't dus: 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12, enz. Daarbij is A gelijk aan het tientallige 10, B aan 11, enz. Op deze manier kun je met twee cijfers en/of letters 256 mogelijkheden aangeven: van 00 tot en met FF.

De eerste drie getallen bij rgba() geven de kleur aan. Deze lopen van 0 tot en met 255, dus ook hiermee kun je 256 mogelijkheden aangeven. En omdat er drie getallen zijn levert dat 256 x 256 x 256 = 16.777.216 mogelijke kleuren op, net iets meer dan het aantal kleurpotloden in de gemiddelde kleurdoos van 'n kind.

De notatie bij rgba() geeft dus precies evenveel mogelijkheden als de hexadecimale.

Het eerste getal staat voor rood, het tweede voor groen en het derde voor blauw (feitelijk de Engelse namen, maar de eerste letter is toevallig in het Nederlands hetzelfde). Uit deze drie kleuren zijn alle kleuren op een monitor opgebouwd.

255 wil zeggen volledig aanwezig, 0 wil zeggen helemaal ontbrekend.

255, 255, 255 levert wit op, 0 , 0 , 0 zwart.

In plaats van getallen mag je ook percentages gebruiken, bijvoorbeeld: rgba(10%, 20%, 100%, 0.3).

Omdat in dit voorbeeld drie keer 255 is opgegeven, levert dit een witte kleur op.

Het vierde getal staat voor het alfa-kanaal. Hiermee wordt de doorzichtigheid aangegeven. Dit getal loopt van 0 naar 1. Volledig doorzichtig is 0, volledig ondoorzichtig is 1.

Het getal voor het alfa-kanaal wordt als decimale breuk aangegeven, dus bijvoorbeeld 0.5 wil zeggen halfdoorzichtig. Let erop dat je 'n punt gebruikt, de Amerikaanse manier om breuken aan te geven. Als je 'n komma gebruikt, denkt de browser dat er twee verschillende getallen staan.

In dit voorbeeld is deze achtergrondkleur behoorlijk ondoorzichtig: 0.85. Hierdoor zie je de grote afbeelding met de fiets nog 'n heel klein beetje door de achtergrond heen, maar is de tekst toch goed leesbaar.

text-align: left;

Bij #content heb ik opgegeven dat de tekst gecentreerd moet worden. text-align is een van de eigenschappen die wordt geërfd door de kinderen van een element. Maar deze tekst moet gewoon links worden uitgelijnd. Bij deze onterf ik de spans dus. Gelukkig kan dat zonder notariskosten.

.tekst-o

De elementen met class="tekst-o". Dit zijn de spans, waarbinnen de teksten staan die boven de onderste helft van de grote afbeelding met de fiets komen te staan. Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

border-radius: 12px 12px 0 0;

Links- en rechtsboven een ronde hoek, rechts- en linksonder geen ronde hoek. Omdat ik maar één maat per hoek opgeef, wordt de hoek zowel verticaal als horizontaal 12 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is.

Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is voor alle hoeken hetzelfde.

.tekst-r

De elementen met class="tekst-r". Dit zijn de spans, waarbinnen de teksten staan die boven de rechterhelft van de grote afbeelding met de fiets komen te staan. Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

border-radius: 12px 0 12px 12px;

Linksboven en rechts- en linksonder een ronde hoek, rechtsboven geen ronde hoek. Omdat ik maar één maat per hoek opgeef, wordt de hoek zowel verticaal als horizontaal 12 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is.

Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is voor alle hoeken hetzelfde.

.tekst-l

De elementen met class="tekst-l". Dit zijn de spans, waarbinnen de teksten staan die boven de linkerhelft van de grote afbeelding met de fiets komen te staan. Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

border-radius: 0 12px 12px 12px;

Linksboven geen ronde hoek, rechtsboven en rechts- en linksonder een ronde hoek. Omdat ik maar één maat per hoek opgeef, wordt de hoek zowel verticaal als horizontaal 12 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is.

Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is voor alle hoeken hetzelfde.

.met-noot

De elementen met class="met-noot". Binnen sommige spans met tekst staat een geneste span, waarbinnen tekst staat die kleiner moet worden weergegeven. Meestal zijn dat noten onderaan de tekst, maar niet altijd. De spans waarbinnen zo'n extra span staat, hebben als class "met-noot".

line-height: 0;

Geen regelhoogte.

Pardon? Wel tekst en geen regelhoogte? Dan komt toch alle tekst op één regel te staan, over elkaar heen?

Ja, dat klopt. Dit is een wat ingewikkeld verhaal, vrees ik.

De spans waarbinnen de tekst staat zijn bij .tekst, .tekst-o, .tekst-r, .tekst-l absoluut gepositioneerd, waardoor ze in een soort blok-element veranderen. Als ik aan een blok-element een regelhoogte geeft, wordt die regelhoogte geërfd door alle kinderen van dat blok-element. Dus ook door de spans waarbinnen de noten staan.

De spans met de noten zijn geen blok-elementen, maar gewone inline-elementen. En daar ontstaat het probleem: als ik aan een blok-element een regelhoogte geef, is de regelhoogte van inline-elementen binnen dat blok-element minimaal even groot als de regelhoogte van het blok-element. Je kunt de regelhoogte van het inline-element wel hoger maken dan van het blok-element waar het in staat, maar niet lager.

Als de span met de gewone tekst de juiste regelhoogte heeft voor de gewone tekst, erven de spans met noten dus minimaal die regelhoogte. En die is veel te hoog voor de kleinere letter binnen die noot. En de regelhoogte van de noten kleiner maken dan die van de tekst, kan dus niet. (Dat lijkt idioot, maar daar zijn goede redenen voor. Zou dit niet zo zijn, dan zou op het gebied van regelhoogte de meest liederlijke vorm van anarchie losbarsten. Alleen zitten die goede redenen hier toevallig even gruwelijk in de weg.)

Als ik de spans met noten in een blok-element zou veranderen, kan ik ze wel een eigen regelhoogte geven. Maar dan komen ze allemaal op een nieuwe regel te staan, en dat is niet overal de bedoeling. Deze oplossing is hier dus niet bruikbaar.

Als ik de spans met noten in een inline-block verander, kan ik ze een eigen regelhoogte geven. Maar ook dat werkt hier helaas niet goed. Een inline-block gedraagt zich ongeveer zoals een <img>: als niet de héle span op de regel past, wordt de héle span op de volgende regel gezet. Ook als dus een deel van de noot nog prima achter de tekst zou passen.

Noot staat niet op één regel

Op de hiernaast staande afbeelding zou het woord '(Navullingen' nog prima op de regel ervoor passen. Maar omdat de span met '(Navullingen verkrijgbaar)' niet in z'n geheel op die regel past, wordt de héle span - net als een <img> op de volgende regel gezet.

Er blijkt 'n oplossing te zijn. De spans met de gewone tekst en met de noten worden samen in een ouder-span gezet. Die ouder-span is de span die de class "met-noot" krijgt. Als ik nou die span.met-noot in een blok-element verander, kan ik die een eigen regelhoogte geven. En dat is precies wat er gebeurt.

Elke span.met-noot heeft als class ook "tekst", "tekst-o", "tekst-r" of "tekst-l", zodat de eigenschappen die bij .tekst, .tekst-o, .tekst-r, .tekst-l worden gegeven ook voor deze span.met-noot gelden. En daar worden deze spans onder andere absoluut gepositioneerd, waardoor ze in 'n soort blok-element veranderen.

Nu geef ik aan span.met-noot een regelhoogte van 0. Kinderen van deze span, ook al zijn het inline-elementen, kunnen wel een grótere regelhoogte krijgen. Een grotere regelhoogte dan 0 in dit geval. En omdat álles groter is dan 0, kan ik aan de kinderen van deze span élke regelhoogte geven.

Binnen deze span.met-noot komt 'n aantal gewone spans te staan: eentje met de normale tekst, en eentje (of meer, als er meer noten zijn) met de noot. Deze spans zijn gewoon inline-elementen, dus de problemen met noten die op een nieuwe regel komen te staan, spelen niet. Maar omdat de ouder-span expliciet een line-height: 0; heeft gekregen, kan ik deze spans nu wél een regelhoogte. Wat ik iets verderop ook doe:

Bij .met-noot span:first-child krijgt de span met tekst een regelhoogte van 1.2 em. Dit is de span die het eerste kind is van span.met-noot, en dat is altijd de span met de normale tekst. Als eenheid neem ik em, zodat de regelhoogte mee verandert met de lettergrootte.

Bij .noot krijgen de spans met noten een regelhoogte van 1.1em en een lettergrootte van 0.8 em.

Zodra ik in een element een lettergrootte geef, worden andere maten in em gerelateerd aan die lettergrootte. 1.2 em is de standaard-regelhoogte, hier geef ik dus een iets kleinere op van 1.1 em. Die 1.1 em is ten opzichte van de lettergrootte van 0.8 em, niet ten opzichte van een of andere standaard-lettergrootte.

Als eenheid neem ik overal em, zodat ook gebruikers van Internet Explorer de lettergrootte en bijbehorende regelhoogte kunnen veranderen.

.met-noot span:first-child {line-height: 1.2em;}

Spans binnen een element met class="met-noot", maar alleen als ze het eerste kind zijn. Dit zijn extra spans die worden gebruikt als er ook noten in de tekst staan. Binnen deze spans staat de normale tekst, de noten hebben eigen span.. Dit element hangt nauw samen met span.met-noot, daarom staat de uitleg bij .met-noot hierboven.

.noot {line-height: 1.1em; font-size: 0.8em;}

De elementen met class="noot". Dit zijn de spans waarbinnen de kleinere noten staan. Dit element hangt nauw samen met span.met-noot, daarom staat de uitleg bij .met-noot hierboven.

.kopje

De elementen met class="kopje". Dit zijn de spans waarbinnen de boven de tekst staande kopjes zitten.

display: block;

Van zichzelf is een span een inline-element. Door er een blok-element van te maken, kan ik eigenschappen als hoogte gebruiken.

height: 1.3em;

Achter de tekst staat een lichtgroene achtergrond. Deze hoogte zorgt er in combinatie met de padding hieronder voor, dat de groene achtergrond iets boven en onder de tekst uitsteekt.

Omdat de waarde in em is opgegeven, verandert de hoogte - en dus de groene achtergrond - mee met een andere lettergrootte.

border-radius: 15px;

Omdat ik maar één waarde opgeef, wordt de ronde hoek zowel horizontaal als verticaal 15 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is. Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is voor alle hoeken hetzelfde.

En omdat ik maar één hoek opgeef, geldt deze waarde voor alle hoeken: alle vier de hoeken worden rond.

padding: 2px 0;

Omdat voor onder en links geen waarde is opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 2px 0 2px 0 in de volgorde boven - rechts - onder - links.

Aan boven- en onderkant een kleine ruimte tussen de buitenkant van de span en de tekst in de span.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: lightgreen;

Lichtgroene achtergrondkleur.

Een achtergrondkleur loopt door achter de padding. Boven en onder de tekst staat een kleine padding, dus de achtergrondkleur loopt ook iets boven en onder de tekst door.

Door padding loopt achtergrondkleur iets door

De spans zijn in een blok-element veranderd. Een blok-element wordt normaal genomen even breed als zijn ouder. Dat is hier, afhankelijk van waar de span staat, tekst, tekst-o, tekst-l of tekst-r. Deze hebben bij .tekst, .tekst-o, .tekst-r, .tekst-l een padding van 4 px aan alle kanten gekregen. De span en dus de achtergrondkleur vult dus in de breedte de hele span met tekst, op 4 px padding links en rechts na.

Ook aan de bovenkant heeft de span met de tekst een padding van 4 px. Dat het kopje dichter bij de bovenkant van de tekst met de span staat dan bij de zijkant, komt doordat de ronde hoeken van de span met de tekst en van de span met het kopje de plaatsing enigszins beïnvloeden.

text-align: center;

Tekst horizontaal centreren.

font-size: 1.2em;

Iets grotere tekst. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

#hotspots div:focus .tekst, #hotspots div:hover .tekst, #hotspots div:focus .tekst-o, #hotspots div:hover .tekst-o, #hotspots div:focus .tekst-r, #hotspots div:hover .tekst-r, #hotspots div:focus .tekst-l, #hotspots div:hover .tekst-l

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Doe iets met de elementen met class="tekst", class="tekst-o", class="tekst-r" en class="tekst-l" die binnen een div staan. Die div staat weer binnen het element met id="hotspots". Maar doe alleen iets, als over de div wordt gehoverd of als de div focus heeft.

De divs zijn de divs die bij de gele randen horen. Als je binnen zo'n gele rand hovert, hover je over een van de divs. Een div heeft focus als je er met de Tab-toets bent aangekomen.

De elementen met 'tekst' in de naam zijn de spans waarbinnen de teksten staan:

.tekst: de teksten die boven de bovenste helft van de grote afbeelding met de fiets verschijnen.

.tekst-o: de teksten die boven de onderste helft van de grote afbeelding met de fiets verschijnen.

.tekst-r: de teksten die boven de rechterhelft van de grote afbeelding met de fiets verschijnen.

.tekst-l: de teksten die boven de linkerhelft van de grote afbeelding met de fiets verschijnen.

display: block;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l zijn de spans met de teksten met display: none; verborgen. Bij hoveren over de div waar ze in staan, of als de div focus heeft, moeten ze zichtbaar worden.

.gif

De elementen met class="gif". Dit zijn de spans, waarbinnen de achtergrond-afbeeldingen staan die zichtbaar worden bij hoveren over een div, of als een div focus heeft. (De knop 'Toebehoren' en de knoppen die daar weer onder vallen, hebben een andere class voor deze afbeeldingen: .extra-pic. Die vallen hier dus niet onder. Deze knoppen krijgen verderop eigen css.)

-moz-transition: 0.5s; -o-transition: 0.5s; -webkit-transition: 0.5s linear; transition: 0.5s;

Hier staat in feite vier keer hetzelfde: transition: 0.5s;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-. Bij -webkit- staat hier een woord extra: linear. Waarom dat zo is, staat hieronder.

Hieronder geef ik bepaalde waarden op, bijvoorbeeld top: 11px;. Als ik nu bij :hover, :focus, en dergelijke een andere waarde opgeef, zorgt transition ervoor dat die waarde niet in één keer wordt verandert bij hoveren en dergelijke, maar langzaamaan. Als de waarde van top bijvoorbeeld wordt veranderd van 11 px naar 30 px, schuift span.gif geleidelijk van 11 px naar 30 px. De span beweegt dus over het scherm, terwijl hij zonder transition in één keer van plaats zou veranderen.

En als span.gif van plaats verandert, geldt dat natuurlijk ook voor de daarin zittende achtergrond-afbeelding. En daar is het om te doen.

Ik gebruik transition hier voor top, left, width, height en background-position. Door hier de juiste begin- en eindwaarden voor te kiezen, lijken de afbeeldingen vanuit een bepaalde plaats naar buiten toe groter te worden, tot ze helemaal zichtbaar zijn. De beginplaats verschilt per afbeelding, omdat niet elke afbeelding precies boven de bijbehorende gele cirkel kan worden geopend. Dat zou namelijk soms problemen met de plaats van de bijbehorende tekst opleveren.

De beginwaarden van top en left geven de plaats aan, waar het openen begint. De eindwaarden worden verderop bij :hover en :focus gegeven en verschillen per afbeelding.

width en height staan allebei in het begin op 0. Bij het begin van het openen is de span dus volledig gesloten en de achtergrond-afbeelding dus volledig onzichtbaar. Doordat breedte en hoogte geleidelijk aan groter worden, lijkt de afbeelding te groeien. De eindwaarden worden verderop bij :hover en :focus gegeven en zijn afhankelijk van de grootte van de weer te geven achtergrond-afbeelding.

De achtergrond-afbeeldingen zijn gecombineerd in enkele grotere afbeeldingen, zoals wordt beschreven bij De achtergrond-afbeeldingen... Daardoor is het gebruik van background-position nodig (of de zogenaamde 'shorthand'-vorm: background met twee waarden, dat maakt voor de werking niets uit).

Als ik de achtergrondpositie niet aanpas, opent de achtergrond-afbeelding gewoon vanaf linksboven. Maar daar staat waarschijnlijk een totaal andere achtergrond-afbeelding. Daarom moet aangegeven worden, vanaf welke positie de achtergrond-afbeelding moet worden geopend. Bij :hover en :focus verderop worden de eindwaarden opgegeven.

Een juiste beginwaarde bij de achtergrondpositie zorgt er ook voor, dat de achtergrond-afbeelding lijkt stil te staan tijdens het openen.

In Google Chrome en Safari gaat iets mis, als je met behulp van transition de achtergrondpositie verandert. Aan het eind, als de afbeelding feitelijk al goed staat, volgt nog een kleine schokkende beweging. transition is redelijk nieuw en ik neem aan dat dit over 'n tijdje wel verholpen zal zijn. De toevoeging linear bij -webkit-transition zorgt dat dit schokje 'n stuk kleiner is. Het verdwijnt niet helemaal, maar het scheelt wel. Het wordt bij -webkit- neergezet, omdat Google Chrome en Safari beide van de weergave-machine webkit gebruik maken voor het weergeven van de pagina.

linear is een van de mogelijke waarden die het verloop van de verandering aangeven. linear wil zeggen dat de verandering steeds even snel is. Andere mogelijkheden zijn bijvoorbeeld langzaam beginnen of langzaam eindigen. Standaard is de verandering langzaam aan het begin en aan het einde en tussenin snel. Maar de hier opgegeven tijdsduur van 'n halve seconde is zo kort, dat je het verschil niet ziet.

Op dit moment kan Opera de achtergrondpositie nog niet veranderen met behulp van transition. Daardoor schuift de afbeelding mee met de span waarin hij staat. Hierdoor lijkt de afbeelding bij Opera van buitenaf de span in te schuiven, terwijl de bedoeling is dat de afbeelding stilstaat. Ongetwijfeld zal Opera dit over kortere of langere tijd ook ondersteunen.

Internet Explorer 7, 8 en 9 ondersteunen transition niet. In deze browsers vindt de verandering gewoon in één keer plaats, zonder vertraging.

Bij transition staat maar één waarde: 0.5s. Als er maar één waarde wordt opgegeven, bepaalt die over hoeveel tijd de beweging wordt uitgesmeerd. Dat is hier vrij kort: 'n halve seconde. Een eventuele tweede waarde, die hier ontbreekt, geeft een eventueel uitstel aan het begin aan.

transition brengt nog een geheel eigen risico met zich mee. In de specificatie staat, welke eigenschappen met behulp van transition kunnen veranderen. Je kunt eventueel bij transition opgeven, voor welke eigenschappen het geldt. Als ik bijvoorbeeld top en left beide wil veranderen bij :hover, kan ik bijvoorbeeld aangeven dat de geleidelijke verandering met behulp van transition alleen voor top geldt. left verandert dan gewoon in één keer.

Als ik niet opgeef voor welke eigenschappen transition geldt, geldt het voor álle eigenschappen die bij :hover, :focus, en dergelijke worden veranderd. Als daar 'n eigenschap bij zit die op dit moment niet door transition kan worden vertraagd, verandert die gewoon in één keer. Maar als de specificatie of een van de browsermakers de geest krijgt en plotsklaps die eigenschap ook onder transition laat vallen, kan dat tot heel onverwachte resultaten leiden.

Stel dat je iets heel traag zichtbaar wilt laten worden bij :hover en iets anders flitsend snel. Mogelijk wordt dat flitsend snel dan opeens ook heel traag. Daarom moet je absoluut zeker weten dat ook in de toekomst geen problemen kunnen ontstaan.

In dit geval geef ik verderop bij :hover en :focus alleen top, left, width, height en background-position op, en die mogen allemaal langzaam veranderen. Omdat er geen andere eigenschappen worden opgegeven, kunnen er in de toekomst dus ook niet plotseling andere eigenschappen onbedoeld langzaam gaan veranderen. Zou die kans wel aanwezig zijn, dat zou ik moeten opgeven dat transition alleen mag gelden voor de genoemde vijf eigenschappen.

position: absolute;

Om de span en dus de daarin zittende achtergrond-afbeelding op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier de div waar de span in staat. Deze heeft bij #hotspots div een absolute positie gekregen.

Van zichzelf is een span een inline-element. Door de span absoluut te positioneren verandert hij in een soort blok-element en kan ik eigenschappen als breedte en hoogte gebruiken.

top: 11px; left: 11px;

Beginpositie van de span aan het begin van de door transition geleidelijk verlopende verandering. Op deze positie staat de linkerbovenhoek van de span ongeveer in het midden van de gele rand waar de span bij hoort.

Niet alle gele randen zijn even groot, daarom wordt verderop voor sommige spans deze beginpositie aangepast. Maar voor veel spans hoef ik nu geen beginpositie meer op te geven.

width: 0; height: 0;

Bij het begin van de door transition geleidelijk verlopende verandering is de span helemaal dicht, en de achtergrond-afbeelding dus volledig onzichtbaar. De breedte en hoogte nemen tijdens de verandering geleidelijk aan toe, waardoor de afbeelding langzaam lijkt te groeien.

div#versnelling Versnelling

De div met id="versnelling".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 457px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 457 px vanaf de onderkant daarvan neerzetten.

left:166px;

En op 166 px vanaf de linkerkant van div#hotspots neerzetten.

width: 25px; height: 25px;

Breedte en hoogte.

#versnelling .tekst-o

De elementen met class="tekst-o" binnen het element met id="versnelling".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de onderkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#versnelling.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-o opgegeven eigenschappen, voor zover die hier niet worden veranderd.

bottom: -460px; left: -168px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#versnelling.

Door bij bottom een negatieve waarde van 460 px op te geven, komt de onderkant van de span met de tekst precies gelijk te staan met de onderkant van de grote afbeelding met de fiets. Omdat aan de onderkant wordt gepositioneerd, zal bij een grotere letter de hoogte naar boven toe toenemen, dus de onderkant van de tekst blijft altijd op dezelfde hoogte als de onderkant van de grote afbeelding met de fiets.

De negatieve waarde bij left plaatst de span met tekst naar links, waardoor de linkerkant van de tekst precies gelijk komt te staan met de linkerkant van de grote afbeelding met de fiets. En omdat de span met tekst even breed is als de grote afbeelding met de fiets, komt ook de rechterkant van de tekst gelijk te staan met de rechterkant van de grote afbeelding met de fiets.

#versnelling .gif

De elementen met class="gif" binnen het element met id="versnelling". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#versnelling of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 125px / 67px; Hoe een ovale hoek eruitziet

Omdat maar één hoek is opgegeven, krijgen alle hoeken dezelfde ronding.

Er zijn twee waarden opgegeven. In dat geval is de eerste waarde de lengte in horizontale richting, de tweede waarde die in verticale richting. Omdat deze waarden verschillend zijn, levert dit een ovaalvormige hoek op.

De span waar deze achtergrond-afbeelding in staat, wordt uiteindelijk 250 px breed en 134 px hoog. Omdat de ronding van de hoeken precies de helft is van deze waarden, wordt de span een ovaal, zonder rechte stukken tussen de hoeken.

Anders dan de naam suggereert, werkt een border-radius ook op de achtergrond-afbeelding, dus ook de achtergrond-afbeelding wordt uiteindelijk een ovaal.

De achtergrond-afbeelding is gecombineerd met andere achtergrond-afbeeldingen, zodat voor meerdere afbeeldingen maar één keer een aanroep naar de server nodig is. Zo'n soort afbeelding heet een 'sprite'. De afbeelding die bij de versnelling hoort, is onderdeel van 'achtergrond.png'. (Voor sommige achtergrond-afbeeldingen moet je op 'achtergrond-2.png' kijken.)

Als je 'achtergrond.png' zou bekijken, zie je dat de versnelling ook op die afbeelding al ovaalvormig is. En de achtergrond is doorzichtig. Dus eigenlijk is de border-radius niet nodig. Dat zou ook zo zijn, als de afbeelding in één keer werd geopend.

Maar bij .gif is opgegeven, dat het openen van de afbeelding 0,5 seconde duurt. Door wat te goochelen met de achtergrondpositie, opent de afbeelding vanuit het midden. En dat midden van de afbeelding is gewoon rechthoekig tijdens het openen, de ronde hoeken staan aan de rand van de afbeelding. Daardoor is de afbeelding, als ik geen border-radius opgeef, tijdens het openen rechthoekig. Pas aan het eind van het openen verschijnen de ronde hoeken opeens.

Door ook border-radius op te geven, zijn de hoeken ook tijdens het openen al rond.

background: -485px -38px;

Achtergrondpositie. Ik gebruik de 'shorthand'-notatie, waarbij alleen background voldoende is. De reden voor het opgeven van een achtergrondpositie hier is wat ingewikkeld, vrees ik.

Bij .gif is opgegeven dat de span 0 px breed en 0 px hoog is, en dat de span absoluut is gepositioneerd met een top: 11px; left: 11px;. (Voor sommige spans met class="gif" wordt die positie verderop met aparte css aangepast, maar dat maakt voor het principe van wat hier wordt beschreven niets uit.)

Bij hoveren over de div waarin de span zit, of als deze div focus heeft, moet de span zichtbaar worden. Er is bij .gif ook opgegeven dat de veranderingen van de span, zoals het van positie en breedte veranderen, niet in één keer plaatsvinden, maar dat deze over 'n halve seconde worden uitgesmeerd.

Hier geef ik een achtergrondpositie op die bij de achtergrond-afbeelding voor de versnelling hoort. De uiteindelijke achtergrondpositie, als de span helemaal is geopend, is anders. Ook de verandering van achtergrondpositie duurt 'n halve seconde.

Ten slotte is verderop voor elke span met class="gif" apart opgegeven, wat de uiteindelijke positie, breedte en hoogte moet worden, en ook wat de uiteindelijke achtergrondpositie moet worden. De verandering van de beginpositie, -breedte, -hoogte en -achtergrondpositie naar de uiteindelijke positie, breedte, hoogte en achtergrondpositie neemt dus een halve seconde in beslag.

Voor deze span, die bij de versnelling hoort, is de uiteindelijke positie top: -27px; left: -110px; de uiteindelijke breedte 250 px, uiteindelijke hoogte 134 px en de uiteindelijke achtergrondpositie -365px 0. Voor deze span worden die uiteindelijke waarden hieronder opgegeven bij #versnelling:focus .gif, #versnelling:hover .gif. Elke span met class="gif" krijgt verderop z'n eigen instellingen.

Alle veranderingen voor deze span op 'n rijtje:

van top: 11px; naar top: -27px;

van left: 11px; naar left: -110px;

van width: 0; naar width: 250px;

van height: 0; naar height: 134px;

van background: -485px -37px; naar background: -365px 0;

De tijdsduur van de begin- naar de uiteindelijke waarde is 'n halve seconde.

De span verschuift dus van positie en wordt geleidelijk breder en hoger. Als ik niets aan de achtergrondpositie doe, wordt de achtergrond-afbeelding linksboven in de hoek van de span gezet. Als de span van positie en grootte verandert, blijft de achtergrond-afbeelding braaf in die linkerbovenhoek staan. Zoals het een welopgevoede achtergrond-afbeelding betaamt.

Alleen komt dat hier rot uit, want nu beweegt de achtergrond-afbeelding mee met de span. Hij opent niet vanuit het midden, maar wordt vanaf de zijkant min of meer gewelddadig de span binnen gesleurd. Bij Opera werkt achtergrondpositie (nog) niet in combinatie met transition, en daar zie je dat inderdaad gebeuren.

(In Internet Explorer speelt dit niet, want die negeert transition gewoon volledig.)

In Firefox, Google Chrome en Safari (en ongetwijfeld binnenkort ook in Opera) is dit bewegen van de achtergrond-afbeelding te voorkomen, door de achtergrond al bij het openen van de span op een bepaalde plaats neer te zetten. Daar is de hier opgegeven achtergrondpositie voor bedoeld.

In werkelijkheid verandert de achtergrondpositie van de begin- naar de eindwaarden. Maar voor het oog lijkt het juist alsof de achtergrond-afbeelding tijdens het openen van de span stilstaat, en vanuit het midden naar buiten toe in alle richtingen groeit.

Normaal genomen zou je waarschijnlijk met 'n vrij simpele formule kunnen uitrekenen, wat de beginpositie van de achtergrond moet zijn. De eindpositie is bekend, en dan iets van de helft van de hoogte omhoog, of zoiets. Maar dat werkt niet: de beginpositie is niet goed te berekenen, er blijven kleine afwijkingen. Ik vermoed dat border-radius hier de oorzaak van is.

Je zal best 'n formule kunnen bedenken met hogere wiskunde, maar dan haak ik af: ik heb de beginpositie gewoon door uitproberen gevonden. De waarden zijn soms erg hoog, maar dat komt omdat er meerdere achtergrond-afbeeldingen tot één samengestelde zijn gecombineerd.

#versnelling:focus .gif, #versnelling:hover .gif

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Doe iets met de elementen met class="gif" die binnen het element met id="versnelling" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

Het element met class="gif" is er hier maar eentje: de span waarbinnen de achtergrond-afbeelding zit, die moet worden getoond als over div#versnelling wordt gehoverd, of als deze div focus heeft.

Voor deze span zijn bij .gif een aantal instellingen opgegeven. Een aantal daarvan wordt veranderd bij hoveren over de div waar deze span in zit, of als deze div focus heeft. Die verandering gaat niet in één keer, maar duurt 'n halve seconde.

Bij .gif is ook opgegeven dat deze span een absolute positie krijgt. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier de div, waarbinnen deze span staat. In dit geval is dat div#versnelling.

top: -28px;

Door de span op deze hoogte te zetten, komt de bovenkant van de span en dus van de daarin zittende achtergrond-afbeelding precies gelijk met de bovenkant van de grote afbeelding met de fiets.

Omdat bij .gif als beginpositie top: 11px; is opgegeven, lijkt de afbeelding vanuit het midden naar boven te openen.

left: -110px;

De span, en dus de daarin zittende achtergrond-afbeelding, wordt horizontaal midden boven de gele rand waar hij bij hoort gezet.

Omdat bij .gif als beginpositie left: 11px; is opgegeven, lijkt de afbeelding vanuit het midden naar links en rechts te openen.

width: 250px; height: 134px;

In de span staat een achtergrond-afbeelding. Een achtergrond-afbeelding heeft van zichzelf geen breedte en hoogte, hij vult alleen maar het element waar hij in staat. Daarom moet ik de breedte en hoogte aan de span opgeven. Met deze breedte en hoogte is de achtergrond-afbeelding precies zichtbaar.

Omdat bij .gif een beginbreedte en -hoogte van 0 is opgegeven, lijkt de afbeelding vanuit het midden naar buiten te groeien.

background: url(099-pics/achtergrond.png) -365px 0;

Achtergrond-afbeelding.

Meerdere achtergrond-afbeeldingen zijn gecombineerd in één grotere, waardoor er minder aanroepen naar de server nodig zijn. Deze afbeelding staat een eind naar rechts in de gecombineerde afbeelding, daarom moet hij 365 px naar links worden verplaatst om hem op de goede plaats te krijgen.

Een uitgebreider verhaal over zo'n gecombineerde afbeelding, een 'sprite', staat bij De achtergrond-afbeeldingen...

div#fietsbel Fietsbel

De div met id="fietsbel".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 361px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 361 px vanaf de onderkant daarvan neerzetten.

left: 267px;

En op 267 px vanaf de linkerkant van div#hotspots neerzetten.

width: 35px; height: 35px;

Breedte en hoogte.

#fietsbel .tekst-o

De elementen met class="tekst-o" binnen het element met id="fietsbel".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de onderkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#fietsbel.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-o opgegeven eigenschappen, voor zover die hier niet worden veranderd.

bottom: -363px; left: -269px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#fietsbel.

Door bij bottom een negatieve waarde van 363 px op te geven, komt de onderkant van de span met de tekst precies gelijk te staan met de onderkant van de grote afbeelding met de fiets. Omdat aan de onderkant wordt gepositioneerd, zal bij een grotere letter de hoogte naar boven toe toenemen, dus de onderkant van de tekst blijft altijd op dezelfde hoogte als de onderkant van de grote afbeelding met de fiets.

De negatieve waarde bij left plaatst de span met tekst naar links, waardoor de linkerkant van de tekst precies gelijk komt te staan met de linkerkant van de grote afbeelding met de fiets. En omdat de span met tekst even breed is als de grote afbeelding met de fiets, komt ook de rechterkant van de tekst gelijk te staan met de rechterkant van de grote afbeelding met de fiets.

#fietsbel .gif

De elementen met class="gif" binnen het element met id="fietsbel". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#fietsbel of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 56px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. En omdat de grootte van de hoeken precies de helft is van de breedte en hoogte die de span uiteindelijk krijgt, is het eindresultaat een cirkel.

background: -50px -210px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#fietsbel:focus .gif, #fietsbel:hover .gif {top: -36px; left: -38px; width: 112px; height: 112px; background: url(099-pics/achtergrond.png) 0 -163px;}

Doe iets met de elementen met class="gif" die binnen het element met id="fietsbel" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#handvat Handvat

De div met id="handvat".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 350px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 350 px vanaf de onderkant daarvan neerzetten.

left: 315px;

En op 315 px vanaf de linkerkant van div#hotspots neerzetten.

width: 35px; height: 20px;

Breedte en hoogte.

#handvat .tekst-o

De elementen met class="tekst-o" binnen het element met id="handvat".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de onderkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#handvat.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-o opgegeven eigenschappen, voor zover die hier niet worden veranderd.

bottom: -352px; left: -317px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#handvat.

Door bij bottom een negatieve waarde van 352 px op te geven, komt de onderkant van de span met de tekst precies gelijk te staan met de onderkant van de grote afbeelding met de fiets. Omdat aan de onderkant wordt gepositioneerd, zal bij een grotere letter de hoogte naar boven toe toenemen, dus de onderkant van de tekst blijft altijd op dezelfde hoogte als de onderkant van de grote afbeelding met de fiets.

De negatieve waarde bij left plaatst de span met tekst naar links, waardoor de linkerkant van de tekst precies gelijk komt te staan met de linkerkant van de grote afbeelding met de fiets. En omdat de span met tekst even breed is als de grote afbeelding met de fiets, komt ook de rechterkant van de tekst gelijk te staan met de rechterkant van de grote afbeelding met de fiets.

#handvat .gif

De elementen met class="gif" binnen het element met id="handvat". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#handvat of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 20px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte van deze span wordt 300 px en de hoogte 124 px. Omdat de hoeken maar 20 px hoog en breed zijn, komen er tussen de hoeken rechte lijnen te staan.

background: -140px -390px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#handvat:focus .gif, #handvat:hover .gif {top: -100px; left: -130px; width: 300px; height: 124px; background: url(099-pics/achtergrond.png) 0 -277px;}

Doe iets met de elementen met class="gif" die binnen het element met id="handvat" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

#spuitmondje Spuitmondje

Het element met id="spuitmondje".

Bij de meeste onderdelen verschijnt maar één afbeelding als je over de bijbehorende div hovert, of als deze focus heeft, maar bij het handvat verschijnt een tweede afbeelding met wat tekst. Deze afbeelding en de tekst zitten in een span met deze id.

-moz-transition: 3s; -o-transition: 3s; -webkit-transition: 3s; transition: 3s;

Hier staat in feite vier keer hetzelfde: transition: 3s;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

Hieronder geef ik voor top de waarde -560 px op. Als ik nu bij :hover, :focus, en dergelijke een andere waarde opgeef, zorgt transition ervoor dat die waarde niet in één keer wordt verandert bij hoveren en dergelijke, maar langzaamaan. Als de waarde van top wordt veranderd van -560 px naar -140 px, schuift span#spuitmondje geleidelijk van -560 px naar -140 px. De span beweegt dus over het scherm, terwijl hij zonder transition in één keer van plaats zou veranderen.

En als span#spuitmondje van plaats verandert, geldt dat natuurlijk ook voor de daarin zittende achtergrond-afbeelding. En daar is het om te doen.

Bij transition staat maar één waarde: 3s. Als er maar één waarde wordt opgegeven, bepaalt die over hoeveel tijd de beweging wordt uitgesmeerd. Dat is hier drie seconden. Een eventuele tweede waarde, die hier ontbreekt, geeft een eventueel uitstel aan het begin aan.

transition brengt nog een geheel eigen risico met zich mee. In de specificatie staat, welke eigenschappen met behulp van transition kunnen veranderen. Je kunt eventueel bij transition opgeven, voor welke eigenschappen het geldt. Als ik bijvoorbeeld top en left beide wil veranderen bij :hover, kan ik bijvoorbeeld aangeven dat de geleidelijke verandering met behulp van transition alleen voor top geldt. left verandert dan gewoon in één keer.

Als ik niet opgeef voor welke eigenschappen transition geldt, geldt het voor álle eigenschappen die bij :hover, :focus, en dergelijke worden veranderd. Als daar 'n eigenschap bij zit die op dit moment niet door transition kan worden vertraagd, verandert die gewoon in één keer. Maar als de specificatie of een van de browsermakers de geest krijgt en plotsklaps die eigenschap ook onder transition laat vallen, kan dat tot heel onverwachte resultaten leiden.

Dit probleem speelt hier niet, omdat ik hieronder bij #handvat:focus #spuitmondje, #handvat:hover #spuitmondje alleen top verander.

position: absolute;

Om de span en dus de afbeelding op een bepaalde plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#handvat.

Een span is van zichzelf een inline-element. Door de span absoluut te positioneren, verandert de span in een soort blok-element. Hierdoor kan ik eigenschappen als breedte en hoogte gebruiken.

top: -560px;

De span wordt een heel eind naar boven gezet. Zoveel, dat hij ver boven het venster van de browser komt te staan. En dat is precies de bedoeling.

Als de letters worden vergroot, schuift de grote afbeelding met de fiets omlaag. En ook de divs die op diverse plaatsen voor het hoveren zorgen. Deze span is gepositioneerd ten opzichte van een van die divs. Als de div bij een erg grote letter ver omlaag wordt geschoven, mag deze span met afbeelding nog steeds binnen het venster van de browser komen en daardoor zichtbaar worden. Vandaar dat hij vrij hoog wordt gezet.

Een bijkomend voordeel is dat het hierdoor de afstand die moet worden afgelegd vrij groot is. Het duurt daardoor even, bij een niet al te extreme lettergrootte, voor de span met de afbeelding en tekst is te zien. Zou dit niet zo zijn, dan zou ik bij transition hierboven een vertraging aan het begin hebben opgegeven. Dat zou dezelfde werking hebben: het zou dan even duren, voor de afbeelding het venster van de browser binnen komt schuiven.

left: 326px;

Op deze positie komt de rechterkant van de span met de afbeelding precies rechts op de grote afbeelding met de fiets te staan.

width: 100px; height: 100px;

Een achtergrond-afbeelding heeft van zichzelf geen afmetingen. Hij vult alleen de achtergrond van het element waar hij in staat. Daarom moet ik aan dat element, hier de span, een breedte en hoogte geven. Met deze breedte en hoogte is de afbeelding precies zichtbaar.

In feite is de afbeelding maar 77 px hoog. De extra 23 px gebruik ik om er wat tekst neer te zetten.

border-radius: 10px 0 10px 10px;

Linksboven een ronde hoek, rechtsboven een gewone rechte hoek, en rechtsonder en linksonder weer ronde hoeken. Rechtsboven heeft een rechte hoek, omdat het niet mooi is als je 'n heel klein fiebeltje van de grote afbeelding met de fiets in het lege stukje van de ronde hoek ziet.

Omdat er maar één waarde voor elke hoek is opgegeven, worden breedte en hoogte van de hoeken even groot. Dit levert een cirkelvormige hoek op, alsof de hoek een kwartcirkel is.

Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is voor alle hoeken hetzelfde.

Internet Explorer 7 en 8 hebben problemen met hoveren in combinatie met ronde hoeken, dus die krijgen gewoon vier rechte hoeken.

padding: 3px;

Kleine afstand tussen buitenkant van de span en tekst erbinnen.

background: url(099-pics/spuitmondje.gif) bottom no-repeat white;

Achtergrond-afbeelding.

De meeste achtergrond-afbeeldingen zijn samengevoegd, zodat er maar twee achtergrond-afbeeldingen aangeroepen hoeven te worden. Maar deze gif is wel een aparte afbeelding.

Deze gif beweegt. Een bewegende gif bestaat uit meerdere lagen: min of meer verschillende afbeeldingen, die beurtelings worden getoond, waardoor de gif lijkt te bewegen. (In werkelijkheid is het ietsje ingewikkelder.)

Als ik deze gif in een grotere afbeelding zou monteren, krijgt die héle grotere afbeelding meerdere lagen. En wordt daardoor 'n aantal keren zo groot. Ik zou weliswaar één aanroep naar de server uitsparen, maar de achtergrond-afbeelding wordt enkele honderden kilobytes groter. In dit geval vind ik het daarom beter deze afbeelding gewoon lekker in z'n eentje te laten zitten.

Normaal genomen wordt een achtergrond-afbeelding linksboven neergezet. In dit geval moet de afbeelding onderaan komen te staan, omdat boven de afbeelding tekst komt te staan. Hier zorgt bottom voor.

Als een achtergrond-afbeelding niet het hele element vult, wordt hij normaal genomen herhaald tot hij wel alles vult. Hier mag dat niet gebeuren, omdat de afbeelding anders ook onder de tekst aan de bovenkant komt te staan, waardoor deze slecht leesbaar zou worden. Daar zorgt no-repeat voor.

white geeft een witte achtergrondkleur. Deze komt ook achter de tekst boven de afbeelding te staan, waardoor deze goed leesbaar is.

line-height: 1em;

Regelhoogte. Normaal genomen is een regelhoogte ongeveer 1,2 em. Hier maak ik hem iets kleiner. Als eenheid neem ik em, zodat ook bij gebruikers van Internet Explorer de regelhoogte wordt aangepast aan een eventuele andere lettergrootte.

font-size: 0.8em;

Iets kleinere letter. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

opacity: 0.85;

Het geheel enigszins doorzichtig maken, zodat de achtergrond nog heel licht door afbeelding en tekst heen komt.

#handvat:focus #spuitmondje, #handvat:hover #spuitmondje

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Doe iets met het element met id="spuitmondje" dat binnen het element met id="handvat" zit, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

Dit is de span waarbinnen het bewegende plaatje met de mond en wat tekst daarbij zitten.

top: -140px;

Bij #spuitmondje is deze span, en dus de inhoud ervan, aan de bovenkant buiten het venster van de browser gezet. Nu wordt hij weer binnen het venster gezet en wordt daardoor zichtbaar. Door het gebruik van transition verloopt deze verplaatsing geleidelijk, zoals hierboven bij #spuitmondje is beschreven.

div#kabels Kabels

De div met id="kabels".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 292px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 292 px vanaf de onderkant daarvan neerzetten.

left: 140px;

En op 140 px vanaf de linkerkant van div#hotspots neerzetten.

#kabels .tekst-r

De elementen met class="tekst-r" binnen het element met id="kabels".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de rechterkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#kabels.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-r opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -189px; right: -578px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#kabels.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de rechterkant.

width: 26em;

Deze span met tekst komt aan de rechterkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de linkerkant van de grote afbeelding.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span mee met de tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#kabels .gif

De elementen met class="gif" binnen het element met id="kabels". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#kabels of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 119px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte en hoogte van deze span worden 238 px. Omdat de breedte en hoogte van de hoeken daar precies de helft van zijn, wordt de uiteindelijke span een cirkel.

background: -494px -335px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#kabels:focus .gif, #kabels:hover .gif {top: -188px; left: -110px; width: 238px; height: 238px; background: url(099-pics/achtergrond.png) -371px -137px;}

Doe iets met de elementen met class="gif" die binnen het element met id="kabels" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#koplamp Koplamp

De div met id="koplamp".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 256px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 256 px vanaf de onderkant daarvan neerzetten.

left: 145px;

En op 145 px vanaf de linkerkant van div#hotspots neerzetten.

#koplamp .tekst-r

De elementen met class="tekst-r" binnen het element met id="koplamp".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de rechterkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#koplamp.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-r opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -225px; right: -573px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#koplamp.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de rechterkant.

width: 26em;

Deze span met tekst komt aan de rechterkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de linkerkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#koplamp .gif

De elementen met class="gif" binnen het element met id="koplamp". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#koplamp, of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 98px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte en hoogte van deze span worden 196 px. Omdat de breedte en hoogte van de hoeken daar precies de helft van is, wordt de uiteindelijke span een cirkel.

background: -94px -502px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#koplamp:focus .gif, #koplamp:hover .gif {top: -84px; left: -83px; width: 196px; height: 196px; background: url(099-pics/achtergrond.png) -0 -407px;}

Doe iets met de elementen met class="gif" die binnen het element met id="koplamp" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#dynamo Dynamo

De div met id="dynamo".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 202px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 202 px vanaf de onderkant daarvan neerzetten.

left: 144px;

En op 144 px vanaf de linkerkant van div#hotspots neerzetten.

width: 34px; height: 34px;

Breedte en hoogte.

#dynamo .tekst-r

De elementen met class="tekst-r" binnen het element met id="dynamo".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de rechterkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#dynamo.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-r opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -275px; right: -570px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#dynamo.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de rechterkant.

width: 31em;

Deze span met tekst komt aan de rechterkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de linkerkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#dynamo .gif

De elementen met class="gif" binnen het element met id="dynamo". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#dynamo of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 75px / 80px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

De eerste waarde is voor de breedte van de hoek, de tweede waarde voor de hoogte. Omdat er maar één hoek is opgegeven, krijgen alle vier de hoeken dezelfde waarde.

De uiteindelijke breedte van de span wordt 150 px. Omdat de hoeken 75 px breed zijn, wordt de bovenkant helemaal rond.

De uiteindelijke hoogte wordt 291 px. Omdat de hoeken maar 80 px hoog zijn, komt er in verticale richting een rechte lijn tussen de hoeken te staan.

background: -492px -516px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#dynamo:focus .gif, #dynamo:hover .gif {top: -130px; left: -83px; width: 150px; height: 291px; background: url(099-pics/achtergrond.png) -397px -375px;}

Doe iets met de elementen met class="gif" die binnen het element met id="dynamo" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#rem Rem

De div met id="rem".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 121px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 121 px vanaf de onderkant daarvan neerzetten.

left: 121px;

En op 121 px vanaf de linkerkant van div#hotspots neerzetten.

width: 42px; height: 42px;

Breedte en hoogte.

border-radius: 21px;

Omdat maar één waarde hoek is opgegeven, worden dit volkomen ronde hoeken, alsof de hoek een kwart van een cirkel is.

Bij #hotspots div heeft deze div ronde hoeken van 20 px gekregen. De breedte en hoogte van deze div zijn echter 42 px. Om een volledige cirkel te krijgen, moeten de hoeken de helft hiervan zijn: 21 px.

Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is voor alle hoeken hetzelfde.

Omdat ik maar één hoek opgeef, geldt deze waarde voor alle hoeken: alle vier de hoeken worden rond.

#rem .tekst-r

De elementen met class="tekst-r" binnen het element met id="rem".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de rechterkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#rem.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-r opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -348px; right: -585px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#rem.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de rechterkant.

width: 26em;

Deze span met tekst komt aan de rechterkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de linkerkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#rem .gif

De elementen met class="gif" binnen het element met id="rem". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#rem of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 25px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte en hoogte van deze span worden 250 px. Omdat de hoeken maar 25 px breed en hoog zijn, komen er rechte lijnen tussen de hoeken. De span wordt dus een vierkant met ronde hoeken.

background: -368px -441px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#rem:focus .gif, #rem:hover .gif {top: -84px; left: -124px; width: 250px; height: 250px; background: url(099-pics/achtergrond-2.png) -233px -346px;}

Doe iets met de elementen met class="gif" die binnen het element met id="rem" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#ventiel Ventiel

De div met id="ventiel".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 74px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 74 px vanaf de onderkant daarvan neerzetten.

left: 38px;

En op 38px vanaf de linkerkant van div#hotspots neerzetten.

width: 20px; height: 20px;

Breedte en hoogte.

#ventiel .tekst-r

De elementen met class="tekst-r" binnen het element met id="ventiel".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de rechterkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#ventiel.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-r opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -417px; right: -690px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#ventiel.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de rechterkant.

width: 37em;

Deze span met tekst komt aan de rechterkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de linkerkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#ventiel .gif

De elementen met class="gif" binnen het element met id="ventiel". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#ventiel of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

top: -60px; left: -10px;

Bij .gif hebben deze spans een top en een left van 11 px gekregen. Voor de meeste van deze spans is dat prima, maar voor deze niet. Dus geven we hier aparte waarden voor deze span op.

border-radius: 25px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte van deze span wordt 95 px, de hoogte 191 px. Omdat de hoeken maar 25 px breed en hoog zijn, komen er rechte lijnen tussen de hoeken. De span wordt dus een rechthoek met ronde hoeken.

background: -30px -500px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#ventiel:focus .gif, #ventiel:hover .gif {top: -95px; left: -40px; width: 95px; height: 191px; background: url(099-pics/achtergrond-2.png) 0 -465px;}

Doe iets met de elementen met class="gif" die binnen het element met id="ventiel" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

#kuil Band met kuil

Het element met id="kuil".

Bij de meeste onderdelen opent maar één afbeelding als over de ouder-div wordt gehoverd, of als deze div focus heeft. Bij het ventiel opent een tweede afbeelding. Deze zit in de span met id="kuil".

-moz-transition: opacity 2s; -o-transition: opacity 2s; -webkit-transition: opacity 2s; transition: opacity 2s;

Hier staat in feite vier keer hetzelfde: transition: opacity 2s;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

Hieronder geef ik voor opacity de waarde 0 op: volledig doorzichtig. Oftewel: onzichtbaar. Als ik nu bij :hover, :focus, en dergelijke een andere waarde opgeef, zorgt transition ervoor dat die waarde niet in één keer wordt verandert bij hoveren en dergelijke, maar langzaamaan. Als de waarde van opacity wordt veranderd van 0 naar 1, wordt de span en dus de erin zittende achtergrond-afbeelding geleidelijk aan zichtbaar. Zonder transition zou de verandering van onzichtbaar naar zichtbaar in één keer gebeuren.

Bij transition staat maar één waarde: 2s. Als er maar één waarde wordt opgegeven, bepaalt die over hoeveel tijd de verandering wordt uitgesmeerd. Dat is hier twee seconden. Een eventuele tweede waarde, die hier ontbreekt, geeft een eventueel uitstel aan het begin aan.

Bij #ventiel:focus #kuil, #ventiel:hover #kuil hieronder wordt niet alleen opacity, maar ook left veranderd. Hieronder geef ik left: -1000px; op, bij hoveren of focus wordt dit veranderd in -38 px. Ook dit zou onder invloed van transition geleidelijk aan gebeuren, en dat is niet de bedoeling. Door achter transition de eigenschap(pen) op te geven, waar transition voor geldt, sluit ik andere eigenschappen uit.

Achter transition is opacity opgegeven, dus in dit geval verandert alleen de doorzichtigheid geleidelijk.

position: absolute;

Om de span en dus de achtergrond-afbeelding daarin op de juiste plaats te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een fixed, absolute of relatieve positie heeft. Dat is hier div#ventiel.

Van zichzelf is een span een inline-element. Door de span absoluut te positioneren, verandert deze in een soort blok-element en kan ik eigenschappen als breedte en hoogte gebruiken.

top: -416px;

Op deze hoogte komt de bovenkant van de achtergrond-afbeelding precies gelijk met de bovenkant van de grote afbeelding met de fiets.

left: -1000px;

Links buiten het venster van de browser parkeren.

Hoewel de span volledig doorzichtig is en je hem dus niet ziet, bestaat hij wel. De span is een onderdeel van div#ventiel en reageert daarom net als deze div als erover wordt gehoverd: de span wordt zichtbaar. Evenals de ook in div#ventiel zittende afbeelding van het ventiel en de bijbehorende tekst.

Om dit te voorkomen, parkeer ik de hele span gewoon buiten het venster van de browser. Pas bij hoveren over div#ventiel, of als deze div focus heeft, wordt de span binnen het venster van de browser gezet.

width: 124px; height: 267px;

Een achtergrond-afbeelding heeft van zichzelf geen grootte, hij vult alleen het element waar hij in staat. Daarom moet ik een breedte en hoogte aan de span opgeven. Deze maten zijn precies groot genoeg om de hele achtergrond-afbeelding te laten zien.

background: url(099-pics/achtergrond-2.png) -103px -456px;

Achtergrond-afbeelding.

Eh, even voor de goede orde, en omdat ook ik toch nog enige trots heb: ik ben geen groot graficus, maar zelfs ik kan iets beters afleveren dan dit schots en scheve wanproduct. Het is opzettelijk zo slecht uitgelijnd en zo.

De kleine achtergrond-afbeeldingen zijn gecombineerd tot twee grote, zodat minder aanroepen naar de server nodig zijn. Om het juiste deel van de gecombineerde afbeelding te laten zien, is een achtergrond-positie nodig: -103px -456px;. Zonder deze correctie zou het deel worden getoond, dat toevallig links bovenaan op de gecombineerde afbeelding staat.

opacity: 0;

Volledig doorzichtig maken.

#ventiel:focus #kuil, #ventiel:hover #kuil

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Doe iets met het element met id="kuil" dat binnen het element met id="ventiel" zit, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

Dit is de span waarbinnen de tekening met de wielen zit.

left: -40px;

Bij #kuil is deze span links buiten het venster van de browser geparkeerd. Nu wordt hij weer binnen het venster gezet.

opacity: 1;

Bij #kuil is deze span doorzichtig gemaakt. Nu wordt hij weer zichtbaar.

div#band Band

De div met id="band".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 40px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 40 px vanaf de onderkant daarvan neerzetten.

left: 45px;

En op 45 px vanaf de linkerkant van div#hotspots neerzetten.

#band .tekst

De elementen met class="tekst" binnen het element met id="band".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de bovenkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#band.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -441px; right: -673px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#band.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de rechterkant. En omdat de span even breed is als de grote afbeelding met de fiets, staat ook de linkerkant van de tekst gelijk met de linkerkant van de grote afbeelding met de fiets.

#band .gif

De elementen met class="gif" binnen het element met id="band". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#band of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 25px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte van deze span wordt 300 px, de hoogte 114 px. Omdat de hoeken maar 25 px breed en hoog zijn, komen er rechte lijnen tussen de hoeken. De span wordt dus een rechthoek met ronde hoeken.

background: -265px -280px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#band:focus .gif, #band:hover .gif {top: -42px; left: -47px; width: 300px; height: 114px; background: url(099-pics/achtergrond-2.png) -207px -227px;}

Doe iets met de elementen met class="gif" die binnen het element met id="band" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#kleur Kleuren van frame

De div met id="kleur".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 207px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 207 px vanaf de onderkant daarvan neerzetten.

left: 266px;

En op 266 px vanaf de linkerkant van div#hotspots neerzetten.

#kleur .tekst

De elementen met class="tekst" binnen het element met id="kleur".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de bovenkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#kleur.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -274px; right: -452px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#kleur.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de rechterkant. En omdat de span even breed is als de grote afbeelding met de fiets, staat ook de linkerkant van de tekst gelijk met de linkerkant van de grote afbeelding met de fiets.

#kleur .gif

De elementen met class="gif" binnen het element met id="kleur". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#kleur of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

top: -2px;

Bij .gif hebben deze spans een top van 11 px gekregen. Voor de meeste van deze spans is dat prima, maar voor deze niet. Dus geven we hier een aparte waarde voor deze span op.

border-radius: 15px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte van deze span wordt 200 px, de hoogte 126 px. Omdat de hoeken maar 15 px breed en hoog zijn, komen er rechte lijnen tussen de hoeken. De span wordt dus een rechthoek met ronde hoeken.

background: -402px -673px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#kleur:focus .gif, #kleur:hover .gif {top: -3px; left: -86px; width: 200px; height: 126px; background: url(099-pics/achtergrond.png) -305px -673px;}

Doe iets met de elementen met class="gif" die binnen het element met id="kleur" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#frame Frame

De div met id="frame".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 250px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 250 px vanaf de onderkant daarvan neerzetten.

left: 320px;

En op 320 px vanaf de linkerkant van div#hotspots neerzetten.

#frame .tekst

De elementen met class="tekst" binnen het element met id="frame".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de bovenkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#frame.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

Omdat div#frame precies in het midden staat, verschijnen hier twee teksten: eentje boven- en eentje onderaan. De css voor de tekst die onderaan verschijnt, staat hier gelijk onder bij #frame .tekst-o.

top: -231px; right: -398px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#frame.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de rechterkant. En omdat de span even breed is als de grote afbeelding met de fiets, staat ook de linkerkant van de tekst gelijk met de linkerkant van de grote afbeelding met de fiets.

max-height: 236px;

De teksten die bij div#frame horen, verschillen iets van de meeste andere teksten. Omdat de cirkel die bij deze div hoort in het midden staat, is er aan de boven- en onderkant te weinig ruimte om daar de hele tekst neer te zetten. Daarom is hier de tekst gedeeltelijk boven en gedeeltelijk onder de gele cirkel neergezet.

Dit levert een apart probleem op. Bij .tekst, .tekst-o, .tekst-r, .tekst-l is een maximum­hoogte van 503 px opgegeven, even hoog als de grote afbeelding met de fiets. Door overflow op auto te zetten, verschijnt een scrollbalk als de letters zover worden vergroot dat de tekst niet meer binnen deze hoogte past.

Als ik dat hier niet corrigeer, gebeurt er wat op de bovenste afbeelding is te zien. De onderste tekst is aan de onderkant gepositioneerd, de bovenste tekst aan de bovenkant. Als de letters worden vergroot, groeit de onderste tekst naar boven toe en de bovenste naar onder. In het midden komen ze over elkaar te staan, want ze mogen beide even hoog worden als de grote afbeelding met de fiets.

Daarom geef ik aan deze twee teksten een kleinere maximumhoogte. Op de onderste afbeelding zijn de letters ook vergroot, maar nu staan de teksten tegen elkaar aan, en niet over elkaar heen. De maximumhoogte is zover verkleind bij beide teksten, dat ze nier meer over elkaar heen komen te staan. Rechts staat nu bij beide teksten een scrollbalk, waardoor de teksten toch nog volledig zijn te lezen.

#frame .tekst-o

De elementen met class="tekst-o" binnen het element met id="frame".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de onderkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#frame.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-o opgegeven eigenschappen, voor zover die hier niet worden veranderd.

Omdat div#frame precies in het midden staat, verschijnen hier twee teksten: eentje boven- en eentje onderaan. De css voor de tekst die bovenaan verschijnt, staat hier gelijk boven bij #frame .tekst.

bottom: -252px; left: -322px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#frame.

Door bij bottom een negatieve waarde van 252 px op te geven, komt de onderkant van de span met de tekst precies gelijk te staan met de onderkant van de grote afbeelding met de fiets. Omdat aan de onderkant wordt gepositioneerd, zal bij een grotere letter de hoogte naar boven toe toenemen, dus de onderkant van de tekst blijft altijd op dezelfde hoogte als de onderkant van de grote afbeelding met de fiets.

De negatieve waarde bij left plaatst de span met tekst naar links, waardoor de linkerkant van de tekst precies gelijk komt te staan met de linkerkant van de grote afbeelding met de fiets. En omdat de span met tekst even breed is als de grote afbeelding met de fiets, komt ook de rechterkant van de tekst gelijk te staan met de rechterkant van de grote afbeelding met de fiets.

max-height: 256px;

De reden van deze aangepaste maximumhoogte staat hierboven bij max-height: 236px;.

div#fietsfles Fietsfles

De div met id="fietsfles".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 172px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 172 px vanaf de onderkant daarvan neerzetten.

left: 372px;

En op 372 px vanaf de linkerkant van div#hotspots neerzetten.

width: 42px; height: 54px;

Breedte en hoogte.

#fietsfles .tekst-l

De elementen met class="tekst-l" binnen het element met id="fietsfles".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de linkerkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#fietsfles.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

Omdat div#fietsfles ongeveer in het midden staat, verschijnen hier twee teksten: eentje links en eentje rechts. De css voor de tekst die rechts verschijnt, staat hier gelijk onder bij #fietsfles .tekst-r.

top: -285px; left: -374px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#fietsfles.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de linkerkant.

width: 17em;

Deze span met tekst komt aan de linkerkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat ongeveer in het midden van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

max-width: 380px;

De breedte van de span met tekst verandert mee met de lettergrootte, omdat deze in em is opgegeven. Ze mogen maximaal even breed worden als de grote afbeelding met de fiets. Bij div#fietsfles staan echter twee teksten, eentje links en eentje rechts. Als die beide even breed zouden worden als de grote afbeelding met de fiets, zouden ze over elkaar heen komen te staan. Daarom geef ik hier een maximumbreedte op. Met deze maximumbreedte, komen ze nooit over elkaar heen te staan, hoogstens tegen elkaar aan.

min-height: 330px;

Bij div#fietsfles staan twee teksten: eentje links en eentje rechts. Bij de linkertekst staat boven de tekst een kopje, waardoor de regels links en rechts niet altijd even hoog zijn. Het is vrij lastig om de spans met de teksten even hoog te krijgen, mede door kleine verschillen in lettergrootte tussen diverse browsers en besturingssystemen.

Deze minimumhoogte zorgt ervoor dat de spans met teksten links en rechts in ieder geval bij openen van de pagina even hoog zijn.

#fietsfles .kopje

De elementen met class="kopje" binnen het element met id="fietsfles". Dit is hier slechts één span, waarbinnen het kopje voor de fietsfles staat: Aardstraalneutralisator.

Voor deze span gelden ook de bij .kopje opgegeven instellingen.

margin: 4px 0 8px;

Omdat voor links geen waarde is opgegeven, krijgt links automatisch dezelfde waarde als rechts. Hier staat dus eigenlijk 4px 0 8px 0 in de volgorde boven - rechts - onder - links.

Bij div#fietsfles staat links én rechts een tekst. Daarom moet voor het kopje boven deze tekst de marge iets worden aangepast.

#fietsfles .tekst-r

De elementen met class="tekst-r" binnen het element met id="fietsfles".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de rechterkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#fietsfles.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-r opgegeven eigenschappen, voor zover die hier niet worden veranderd.

Omdat div#fietsfles ongeveer in het midden staat, verschijnen hier twee teksten: eentje links en eentje rechts. De css voor de tekst die links verschijnt, staat hier gelijk boven bij #fietsfles .tekst-l.

top: -285px; right: -334px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#fietsfles.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de rechterkant.

width: 15em;

Deze span met tekst komt aan de rechterkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de linkerkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

max-width: 350px;

De breedte van de span met tekst verandert mee met de lettergrootte, omdat deze in em is opgegeven. Ze mogen maximaal even breed worden als de grote afbeelding met de fiets. Bij div#fietsfles staan echter twee teksten, eentje links en eentje rechts. Als die beide even breed zouden worden als de grote afbeelding met de fiets, zouden ze over elkaar heen komen te staan. Daarom geef ik hier een maximumbreedte op. Met deze maximumbreedte, komen ze nooit over elkaar heen te staan, hoogstens tegen elkaar aan.

min-height: 330px;

De breedte van de span met tekst verandert mee met de lettergrootte, omdat deze in em is opgegeven. Ze mogen maximaal even breed worden als de grote afbeelding met de fiets. Bij div#fietsfles staan echter twee teksten, eentje links en eentje rechts. Als die beide even breed zouden worden als de grote afbeelding met de fiets, zouden ze over elkaar heen komen te staan. Daarom geef ik hier een maximumbreedte op. Met deze maximumbreedte, komen ze nooit over elkaar heen te staan, hoogstens tegen elkaar aan.

#fietsfles .gif

De elementen met class="gif" binnen het element met id="fietsfles". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#fietsfles of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

top: 100px;

Bij .gif hebben deze spans een top van 11 px gekregen. Voor de meeste van deze spans is dat prima, maar voor deze niet. Dus geven we hier een aparte waarde voor deze span op.

border-radius: 99px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. En omdat de grootte van de hoeken precies de helft is van de breedte en hoogte die de span uiteindelijk krijgt, is het eindresultaat een cirkel.

(Ja, de uiteindelijke hoogte van de span is inderdaad 1 px meer dan 2 x 99: 199 px. Er is kennelijk iets misgegaan bij het maken van de afbeelding of zo. Maar dit minieme verschil zie je niet, dus ik ga het niet corrigeren.)

background: -94px -328px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#fietsfles:focus .gif, #fietsfles:hover .gif {top: 29px; left: -82px; width: 198px; height: 199px; background: url(099-pics/achtergrond-2.png) 0 -257px;}

Doe iets met de elementen met class="gif" die binnen het element met id="fietsfles" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#trapas Trapas

De div met id="trapas".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 117px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 117 px vanaf de onderkant daarvan neerzetten.

left:363px;

En op 363 px vanaf de linkerkant van div#hotspots neerzetten.

#trapas .tekst

De elementen met class="tekst" binnen het element met id="trapas".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de bovenkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#trapas.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -364px; left: -365px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#trapas.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de linkerkant. En omdat de span even breed is als de grote afbeelding met de fiets, staat ook de rechterkant van de tekst gelijk met de rechterkant van de grote afbeelding met de fiets.

#trapas .gif

De elementen met class="gif" binnen het element met id="trapas". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#trapas of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 100px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. En omdat de grootte van de hoeken precies de helft is van de breedte en hoogte die de span uiteindelijk krijgt, is het eindresultaat een cirkel.

background: -260px -98px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#trapas:focus .gif, #trapas:hover .gif {top: -87px; left: -87px; width: 200px; height: 200px; background: url(099-pics/achtergrond.png) -161px 0;}

Doe iets met de elementen met class="gif" die binnen het element met id="trapas" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#trapper Trapper

De div met id="trapper".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 51px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 51 px vanaf de onderkant daarvan neerzetten.

left: 399px;

En op 399 px vanaf de linkerkant van div#hotspots neerzetten.

width: 40px; height: 40px;

Breedte en hoogte.

#trapper .tekst

De elementen met class="tekst" binnen het element met id="trapper".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de bovenkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#trapper.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -420px; left: -401px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#trapper.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de linkerkant. En omdat de span even breed is als de grote afbeelding met de fiets, staat ook de rechterkant van de tekst gelijk met de rechterkant van de grote afbeelding met de fiets.

#trapper .gif

De elementen met class="gif" binnen het element met id="trapper". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#trapper of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

top: 13px; left: 16px;

Bij .gif hebben deze spans een top en een left van 11 px gekregen. Voor de meeste van deze spans is dat prima, maar voor deze niet. Dus geven we hier aparte waarden voor deze span op.

border-radius: 80px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. En omdat de grootte van de hoeken precies de helft is van de breedte en hoogte die de span uiteindelijk krijgt, is het eindresultaat een cirkel.

background: -74px -80px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#trapper:focus .gif, #trapper:hover .gif {top: -66px; left: -58px; width: 160px; height: 160px; background: url(099-pics/achtergrond.png);}

Doe iets met de elementen met class="gif" die binnen het element met id="trapper" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

(Omdat dit toevallig de afbeelding is die in de gecombineerde achtergrond-afbeelding 'achtergrond.png' linksboven staat, is hier geen achtergrondpositie nodig. Zonder achtergrondpositie wordt immers gewoon getoond, wat linksboven in de gecombineerde achtergrond-afbeelding staat.)

div#zadel

De div met id="zadel".

Zadel

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 340px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 340 px vanaf de onderkant daarvan neerzetten.

left: 426px;

En op 426 px vanaf de linkerkant van div#hotspots neerzetten.

width: 113px; height: 72px;

Breedte en hoogte.

border-radius: 50px / 25px;

Bij #hotspots div hebben deze divs een ronde hoek van 20 px gekregen. Dat is veel te klein om het zadel te omsluiten. Bovendien is het zadel niet rond. Daarom pas ik hier de maten van de ronde hoeken aan. Omdat maar één hoek is opgegeven, krijgen alle hoeken dezelfde ronding. De eerste waarde is voor de horizontale lengte van de hoek, de tweede voor de verticale.

#zadel .tekst-l

De elementen met class="tekst-l" binnen het element met id="zadel".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de linkerkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#zadel.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -99px; left: -428px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#zadel.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de linkerkant.

width: 24em;

Deze span met tekst komt aan de linkerkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de rechterkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#zadel .gif

De elementen met class="gif" binnen het element met id="zadel". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#zadel of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 80px /50px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, alleen de maten zijn anders.

background: -260px -110px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#zadel:focus .gif, #zadel:hover .gif {top: -98px; left: -10px; width: 299px; height: 219px; background: url(099-pics/achtergrond-2.png) -238px 0;}

Doe iets met de elementen met class="gif" die binnen het element met id="zadel" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

#zadelveer Zadelveren

Het element met id="zadelveer". Bij de meeste onderdelen verschijnt maar één afbeelding als de erbij horende div focus heeft of als daarover wordt gehoverd. div#zadel is een van de divs, waar twee afbeeldingen verschijnen. #zadelveer is de span waarbinnen die tweede achtergrond-afbeelding zit.

-moz-transition: 2s; -o-transition: 2s; -webkit-transition: 2s; transition: 2s;

Hier staat in feite vier keer hetzelfde: transition: 2s;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

Hieronder geef ik voor left de waarde -300 px op. Als ik nu bij :hover, :focus, en dergelijke een andere waarde opgeef, zorgt transition ervoor dat die waarde niet in één keer wordt verandert bij hoveren en dergelijke, maar langzaamaan. Als de waarde van left wordt veranderd van -300 px naar 12 px, schuift span#zadelveer geleidelijk van -300 px naar 12 px. Hij beweegt dus over het scherm, terwijl hij zonder transition in één keer van plaats zou veranderen.

En als span#zadelveer van plaats verandert, geldt dat natuurlijk ook voor de daarin zittende achtergrond-afbeelding. En daar is het om te doen.

Hieronder geef ik voor opacity een waarde van 0 op: volledig doorzichtig, dus onzichtbaar. Bij :hover en :focus geef ik een waarde van 1 op: volledig zichtbaar. Ook de verandering van doorzichtig naar ondoorzichtig gaat geleidelijk aan, waardoor de afbeelding geleidelijk aan zichtbaar wordt.

Bij transition staat maar één waarde: 2s. Als er maar één waarde wordt opgegeven, bepaalt die over hoeveel tijd de verandering wordt uitgesmeerd. Dat is hier twee seconden. Een eventuele tweede waarde, die hier ontbreekt, geeft een eventueel uitstel aan het begin aan.

transition brengt nog een geheel eigen risico met zich mee. In de specificatie staat, welke eigenschappen met behulp van transition kunnen veranderen. Je kunt eventueel bij transition opgeven, voor welke eigenschappen het geldt. Als ik bijvoorbeeld top en left beide wil veranderen bij :hover, kan ik bijvoorbeeld aangeven dat de geleidelijke verandering met behulp van transition alleen voor top geldt. left verandert dan gewoon in één keer.

Als ik niet opgeef voor welke eigenschappen transition geldt, geldt het voor álle eigenschappen die bij :hover, :focus, en dergelijke worden veranderd. Als daar 'n eigenschap bij zit die op dit moment niet door transition kan worden vertraagd, verandert die gewoon in één keer. Maar als de specificatie of een van de browsermakers de geest krijgt en plotsklaps die eigenschap ook onder transition laat vallen, kan dat tot heel onverwachte resultaten leiden.

Dit probleem speelt hier niet, omdat ik hieronder bij #zadel:focus #zadelveer, #zadel:hover #zadelveer alleen left en opacity verander.

position: absolute;

Om de span op de juiste plaats te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#zadel.

Een span is van zichzelf een inline-element. Door hem absoluut te positioneren, verandert hij in een soort blok-element. Hierdoor kan ik eigenschappen als breedte en hoogte gebruiken.

top: 196px;

Op deze hoogte komt de onderkant van de tekst onder de afbeelding precies gelijk te staan met de onderkant van de grote afbeelding met de fiets.

left: -300px;

Eind naar links neerzetten. De uiteindelijke plaats van de span en dus van de daarin zittende achtergrond-afbeelding wordt left: 12px;. De verandering van -300 px naar 12 px verloopt geleidelijk door het gebruik van transition, zoals even hierboven wordt beschreven.

z-index: -1; Zonder negatieve z-index zijn er problemen met hoveren

Deze span is een kind van div#zadel. Bij hoveren over deze div moeten twee afbeeldingen en tekst verschijnen. Omdat deze span een kind is van div#zadel, werkt hoveren ook op deze span. De span wordt hieronder weliswaar onzichtbaar gemaakt met opacity: 0;, maar dat maakt voor hoveren geen verschil: de span staat er gewoon, alleen zie je hem niet.

Op de afbeelding hiernaast is de span even half zichtbaar gemaakt, binnen de rode lijn. Als ik per ongeluk met de cursor boven deze span kom, gebeurt er hetzelfde als wanneer ik over div#zadel hover: afbeeldingen en tekst worden geopend. Terwijl dat alleen maar moet gebeuren, als ik met de cursor binnen de gele cirkel rondom het zadel kom. Die gele cirkel is op de afbeelding even met groen omcirkeld.

Dit moet uiteraard worden voorkomen.

Een z-index werkt normaal genomen binnen de eerste ouder, die zelf een z-index heeft. Die ouder met z-index ontbreekt hier. In dat geval geldt de z-index ten opzichte van de body. Een negatieve z-index zet een element gelijk boven de achtergrond van z'n ouder, ónder alle andere elementen. In dit geval wordt deze span boven de gele achtergrond van de body gezet, ónder alle andere elementen. Hij komt dus ook onder bijvoorbeeld de grote afbeelding met de fiets te staan. En is dus niet meer gevoelig voor hoveren.

Deze span is een kind van div#zadel. Bij #hotspots div:focus en #hotspots div:hover zorg ik ervoor, dat onder andere deze div een z-index krijgt als er over de div wordt gehoverd of als de div focus heeft. Daardoor gaat de negatieve z-index van deze span gelden binnen div#zadel, want dat is nu de eerste ouder met een z-index. En omdat div#zadel wel gewoon boven de grote afbeelding met de fiets staat, staat deze span en dus de daarin zittende achtergrond-afbeelding nu ook boven de grote afbeelding met de fiets. En is dus zichtbaar.

Een z-index kan alleen worden gebruikt bij een element dat relatief, absoluut of fixed is gepositioneerd. Dat is 'n paar regels hoger bij deze span gedaan.

width: 252px; height: 218px;

Een achtergrond-afbeelding heeft van zichzelf geen grootte, hij vult alleen maar het element waar hij in zit. Daarom moet ik aan dat element, hier de span, een breedte en hoogte geven. De hoogte is meer dan de hoogte van de achtergrond-afbeelding, zodat er onder de afbeelding ruimte vrijkomt voor tekst.

background: url(099-pics/achtergrond-2.png) -543px 0 no-repeat;

Achtergrond-afbeelding.

-543px 0 geeft een achtergrondpositie aan: laat de afbeelding op 543 px vanaf de linkerkant zien, en gewoon vanaf de bovenkant. Het hoe en waarom hiervan staat bij background: -485px -38px;, alleen de id van de span en de waarden zijn anders.

Een achtergrond-afbeelding wordt normaal genomen herhaald, tot de hele achtergrond van het element waar hij in staat is gevuld. De hoogte van de span is hier hoger dan de achtergrond-afbeelding, omdat er tekst onder de afbeelding moet komen te staan. Normaal genomen zou de achtergrond-afbeelding daar worden herhaald, wat de tekst vrijwel onleesbaar zou maken. no-repeat voorkomt dat.

opacity: 0;

Volledig doorzichtig, oftewel: onzichtbaar, maken. Als over de div waar deze span in zit wordt gehoverd, of als deze div focus heeft, moet de span en dus de daarin zittende achtergrond-afbeelding ondoorzichtig en dus zichtbaar worden. De verandering van doorzichtig naar ondoorzichtig verloopt geleidelijk door het gebruik van transition, zoals even hierboven wordt beschreven.

#zadelveer span

De spans binnen het element met id="zadelveer". Dat is er hier maar eentje. De tekst onder de afbeelding van de zadelveren staat erin.

position: absolute;

Om de span op de juist plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier span#zadelveer.

Van zichzelf is een span een inline-element. Door het absoluut te positioneren, verandert het in 'n soort blok-element. Daardoor kan ik eigenschappen als breedte gebruiken.

bottom: 0;

Helemaal onderaan in span#zadelveer zetten. Hierdoor komt de onderkant van deze span met tekst precies gelijk met de onderkant van de grote afbeelding met de fiets.

left: 8px;

8 px naar links zetten. Omdat de ouder van deze span, span#zadelveer, een achtergrond-afbeelding heeft, komt deze span daardoor ook 8 px naar links ten opzichte van die afbeelding te staan. Dat vind ik er beter uitzien, dan wanneer ik de tekst even breed als de afbeelding erboven zou maken.

width: 230px;

Breedte.

De ouder van deze span, span#zadelveer, is 252 px breed, en dus de erin zittende achtergrond-afbeelding ook.

Deze span met tekst moet midden onder de achtergrond-afbeelding komen te staan, dus zou ook 252 px breed moeten worden. Ik heb hem echter hierboven 8 px naar rechts verplaatst, zodat link een ruimte van 8 px ontstaat. Om hem in het midden te houden, moet ik er dan rechts ook 8 px afhalen. Dan zou de span 252 - 8 - 8 = 236 px breed moeten worden. En dat wordt hij ook, want bij deze breedte komt links en rechts nog 3 px padding.

border-radius: 8px;

Omdat ik maar één maat per hoek opgeef, wordt de hoek zowel verticaal als horizontaal 8 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is. Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is hetzelfde.

En omdat ik maar één hoek opgeef, geldt deze waarde voor alle hoeken: alle vier de hoeken worden rond.

padding: 3px;

Aan alle kanten een kleine ruimte tussen buitenkant van de span en tekst in de span.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background-color: white; background-color: rgba(255, 255, 255, 0.85);

De eerste eigenschap zorgt voor een witte achtergrondkleur, de tweede voor een enigszins doorzichtige witte achtergrondkleur. Waarom hier twee keer een kleur wordt opgegeven en hoe rgba() precies werkt, staat bij background-color white;.

line-height: 1em;

Normaal genomen is een regelhoogte ongeveer 1.2 em. Dit zet de regels iets dichter op elkaar. Als eenheid gebruik ik em, zodat ook in Internet Explorer de regelhoogte zich aanpast aan de lettergrootte.

font-size: 0.8em;

Iets kleinere letter. Als eenheid neem ik em, zodat ook in Internet Explorer de lettergrootte kan worden veranderd.

#zadel:focus #zadelveer, #zadel:hover #zadelveer

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Doe iets met het element met id="zadelveer" dat binnen het element met id="zadel" zit, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

Dit is de span waarbinnen de achtergrond-afbeelding met de zadelveren en wat bijbehorende tekst zit.

left: 12px;

Bij #zadelveer is deze span, en dus de inhoud ervan, 300 px naar links gezet. Nu wordt hij 12 px naar rechts gezet. Door het gebruik van transition verloopt deze verplaatsing geleidelijk, zoals hierboven bij #zadelveer is beschreven.

opacity: 1;

Bij #zadelveer is deze span, en dus de inhoud ervan, volledig doorzichtig en daarmee onzichtbaar gemaakt. Nu wordt hij weer ondoorzichtig en daarmee zichtbaar gemaakt. Door het gebruik van transition verloopt deze verandering geleidelijk, zoals hierboven bij #zadelveer is beschreven.

div#slot Slot

De div met id="slot".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 230px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 230 px vanaf de onderkant daarvan neerzetten.

left: 456px;

En op 456 px vanaf de linkerkant van div#hotspots neerzetten.

height: 56px;

Hoogte.

#slot .tekst-l

De elementen met class="tekst-l" binnen het element met id="slot".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de linkerkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#slot.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -225px; left: -458px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#slot.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de linkerkant.

width: 25em;

Deze span met tekst komt aan de linkerkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de rechterkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#slot .gif

De elementen met class="gif" binnen het element met id="slot". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#slot of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

top: -28px; left: 40px;

Bij .gif hebben deze spans een top en een left van 11 px gekregen. Voor de meeste van deze spans is dat prima, maar voor deze niet. Dus geven we hier aparte waarden voor deze span op.

border-radius: 100px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. En omdat de grootte van de hoeken precies de helft is van de breedte en hoogte die de span uiteindelijk krijgt, is het eindresultaat een cirkel.

background: -247px -448px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#slot:focus .gif, #slot:hover .gif {top: -70px; left: -10px; width: 200px; height: 200px; background: url(099-pics/achtergrond.png) -197px -406px;}

Doe iets met de elementen met class="gif" die binnen het element met id="slot" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#fietstas Fietstas

De div met id="fietstas".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 202px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 202 px vanaf de onderkant daarvan neerzetten.

left: 550px;

En op 550 px vanaf de linkerkant van div#hotspots neerzetten.

width: 70px; height: 70px;

Breedte en hoogte.

border-radius: 35px;

Ronde hoeken. Omdat maar één waarde per hoek is opgegeven, worden dit volkomen ronde hoeken, alsof de hoek een kwart van een cirkel is.

Bij #hotspots div heeft ook deze div ronde hoeken van 20 px gekregen. De breedte en hoogte van deze div is echter 70 px. Om een volledige cirkel te krijgen, moeten de hoeken de helft hiervan zijn: 35 px.

Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is voor alle hoeken hetzelfde.

En omdat ik maar één hoek opgeef, geldt deze waarde voor alle hoeken: alle vier de hoeken worden rond.

#fietstas .tekst-l

De elementen met class="tekst-l" binnen het element met id="fietstas".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de linkerkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#fietstas.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -239px; left: -552px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#fietstas.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de linkerkant.

width: 25em;

Deze span met tekst komt aan de linkerkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de rechterkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#fietstas .gif

De elementen met class="gif" binnen het element met id="fietstas". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#fietstas of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

top: 30px; left: 30px;

Bij .gif hebben deze spans een top en een left van 11 px gekregen. Voor de meeste van deze spans is dat prima, maar voor deze niet. Dus geven we hier aparte waarden voor deze span op.

border-radius: 25px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte van deze span wordt 200 px, de hoogte 275 px. Omdat de hoeken maar 25 px breed en hoog zijn, komen er rechte lijnen tussen de hoeken. De span wordt dus een rechthoek met ronde hoeken.

background: -130px -740px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#fietstas:focus .gif, #fietstas:hover .gif {top: -102px; left: -101px; width: 299px; height: 275px; background: url(099-pics/achtergrond.png) 0 -609px;}

Doe iets met de elementen met class="gif" die binnen het element met id="fietstas" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#spaken Spaken

De div met id="spaken".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 92px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 92 px vanaf de onderkant daarvan neerzetten.

left: 520px;

En op 520 px vanaf de linkerkant van div#hotspots neerzetten.

width: 60px; height: 18px;

Breedte en hoogte.

#spaken .tekst-l

De elementen met class="tekst-l" binnen het element met id="spaken".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de linkerkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#spaken.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -401px; left: -522px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#spaken.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de linkerkant.

width: 24em;

Deze span met tekst komt aan de linkerkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de rechterkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#spaken .gif

De elementen met class="gif" binnen het element met id="spaken". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#spaken of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

left: 40px; top: -28px;

Bij .gif hebben deze spans een top en een left van 11 px gekregen. Voor de meeste van deze spans is dat prima, maar voor deze niet. Dus geven we hier aparte waarden voor deze span op.

border-radius: 10px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte van deze span wordt 250 px, de hoogte 244 px. Omdat de hoeken maar 10 px breed en hoog zijn, komen er rechte lijnen tussen de hoeken. De span wordt dus een rechthoek met ronde hoeken.

background: -612px -346px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders.

#spaken:focus .gif, #spaken:hover .gif {top: -132px; left: -58px; width: 250px; height: 244px; background: url(099-pics/achtergrond-2.png) -514px -243px;}

Doe iets met de elementen met class="gif" die binnen het element met id="spaken" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders.

div#achterlicht Achterlicht

De div met id="achterlicht".

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

bottom: 214px;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#hotspots. 214 px vanaf de onderkant daarvan neerzetten.

left: 680px;

En op 680 px vanaf de linkerkant van div#hotspots neerzetten.

width: 20px; height: 48px;

Breedte en hoogte.

#achterlicht .tekst-l

De elementen met class="tekst-l" binnen het element met id="achterlicht".

Dit is hier maar één element: de span waarbinnen de tekst staat die aan de linkerkant van de grote afbeelding met de fiets verschijnt bij hoveren over div#achterlicht.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-l opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: -249px; left: -682px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft deze span een absolute positie gekregen. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#achterlicht.

Met deze waarden komt de bovenkant, en dus de erin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets. Hetzelfde geldt voor de linkerkant.

width: 30em;

Deze span met tekst komt aan de linkerkant van de grote afbeelding met de fiets te staan. De div waarbinnen hij staat, staat redelijk aan de rechterkant van de grote afbeelding met de fiets.

Als ik de tekst ga vergroten, verschijnt op een gegeven moment een scrollbalk, omdat de span nooit hoger wordt dan de grote afbeelding met de fiets. Dit komt door de bij .tekst, .tekst-o, .tekst-r, .tekst-l opgegeven maximumhoogte in combinatie met overflow: auto;. Op een gegeven moet ik daardoor mogelijk over de tekst kunnen scrollen om alle tekst te kunnen lezen.

Maar als ik de cursor naar de tekst breng, hover ik niet meer over de div. En sluit de tekst. Door voor de breedte de eenheid em te nemen, groeit de breedte van de span met tekst, als de letters worden vergroot. Een iets uitgebreidere uitleg hierover staat bij Dan zijn er nog...

#achterlicht .gif

De elementen met class="gif" binnen het element met id="achterlicht". Dat is hier maar één element: de span waarbinnen de achtergrond-afbeelding staat, die verschijnt bij hoveren over div#achterlicht of als deze div focus heeft.

Voor deze span gelden ook de bij .gif opgegeven instellingen, voor zover die hier niet worden veranderd.

border-radius: 20px;

Ronde hoeken. Bij border-radius: 125px / 67px; staat hier een uitgebreid verhaal over, hier alleen de verschillen daarmee.

Omdat hier maar één waarde is opgegeven, worden dit volkomen ronde hoeken, alsof ze 'n kwart van 'n cirkel zijn. De uiteindelijke breedte van deze span wordt 129 px, de hoogte 253 px. Omdat de hoeken maar 20 px breed en hoog zijn, komen er rechte lijnen tussen de hoeken. De span wordt dus een rechthoek met ronde hoeken.

background: center 70px, -72px -30px;

Achtergrondpositie. Het hoe en waarom daarvan staat bij background: -485px -38px;, alleen de naam van de id en de waarden zijn anders. Daarnaast is er nog een belangrijk verschil: het gaat hier niet om één, maar om twee achtergrond-afbeeldingen. Hieronder staan alleen de verschillen met de standaard-uitleg bij background: -485px -38px;.

css3 geeft de mogelijkheid meer dan één achtergrond-afbeelding te gebruiken in een element. En je kunt ook meer dan één achtergrondpositie en dergelijke opgeven, gescheiden door een komma. Er zijn er hier twee opgegeven. Die horen bij de hieronder bij #achterlicht:focus .gif, #achterlicht:hover .gif opgegeven twee achtergrond-afbeeldingen. De positie voor de komma hoort bij de hieronder staande url voor de komma, de positie erachter bij de url achter de komma.

Afgezien van het gegeven dat het om twee afbeeldingen gaat met twee posities, blijft de uitleg verder hetzelfde.

#achterlicht:focus .gif, #achterlicht:hover .gif {top: -20px; left: -61px; width: 129px; height: 253px; background: url(099-pics/sterren.gif) center 100px no-repeat, url(099-pics/achtergrond-2.png);}

Doe iets met de elementen met class="gif" die binnen het element met id="achterlicht" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

De uitleg hiervan is precies hetzelfde als die bij #versnelling:focus .gif, #versnelling:hover .gif, alleen zijn de naam van de id en de waarden anders. En het gaat hier niet om één, maar om twee achtergrond-afbeeldingen. Hieronder staan alleen de verschillen met de standaard-uitleg bij #versnelling:focus .gif, #versnelling:hover .gif.

Bij background staan twee url's. css3 biedt de mogelijkheid meer dan één achtergrond-afbeelding te gebruiken in een element. De url's en eventuele andere waarden worden gescheiden door een komma. Verder is alles hetzelfde, het is alsof je twee keer background gebruikt, maar één keer de naam background weglaat.

De afbeelding die als eerste wordt genoemd, komt bovenaan te staan. Dat is hier een gif met flonkerende sterren. De tweede afbeelding, het achterlichtje, komt onderaan te staan. Omdat die tweede afbeelding toevallig de afbeelding is die in de gecombineerde achtergrond-afbeelding linksboven staat, is bij die tweede afbeelding geen achtergrondpositie nodig.

De meeste achtergrond-afbeeldingen zijn samengevoegd, zodat er maar twee achtergrond-afbeeldingen aangeroepen hoeven te worden. Dat geldt ook voor het achterlichtje. Maar de gif met de fonkelende sterren is wel een aparte afbeelding. Deze gif beweegt. Een bewegende gif bestaat uit meerdere lagen: min of meer verschillende afbeeldingen, die beurtelings worden getoond, waardoor de gif lijkt te bewegen. (In werkelijkheid is het ietsje ingewikkelder.)

Als ik deze gif in een grotere afbeelding zou monteren, krijgt die héle grotere afbeelding meerdere lagen. En wordt daardoor 'n aantal keren zo groot. Ik zou weliswaar één aanroep naar de server uitsparen, maar de achtergrond-afbeelding wordt enkele honderden kilobytes groter. In dit geval vind ik het daarom beter deze afbeelding gewoon lekker in z'n eentje te laten zitten.

#middelvinger

Het element met id="middelvinger". Dit is de span waarbinnen de opgestoken middelvinger, sorry, het Universele symbool voor onthaasting, zit.

-moz-transition: 3s; -o-transition: 3s; -webkit-transition: 3s; transition: 3s;

Hier staat in feite vier keer hetzelfde: transition: 3s;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

Hieronder geef ik voor top de waarde -730 px op. Als ik nu bij :hover, :focus, en dergelijke een andere waarde opgeef, zorgt transition ervoor dat die waarde niet in één keer wordt verandert bij hoveren en dergelijke, maar langzaamaan. Als de waarde van top wordt veranderd van -730 px naar -248 px, schuift span#middelvinger geleidelijk van -730 px naar -248 px. De span beweegt dus over het scherm, terwijl hij zonder transition in één keer van plaats zou veranderen.

En als span#middelvinger van plaats verandert, geldt dat natuurlijk ook voor de daarin zittende achtergrond-afbeelding. En daar is het om te doen.

In dit geval worden hieronder drie eigenschappen opgegeven, die bij #achterlicht:focus #middelvinger, #achterlicht:hover #middelvinger worden veranderd:

top: -730px; wordt top: -248px;

left: -138px; wordt top: -38px;

opacity: 0; wordt opacity: 1;

De gezamenlijke verandering van deze drie eigenschappen zorgt ervoor dat de span, en dus de daarin zittende achtergrond-afbeelding, van boven het venster van de browser binnenkomt, een eind naar rechtsonder beweegt, en tijdens die beweging geleidelijk aan zichtbaar wordt.

Bij transition staat maar één waarde: 3s. Als er maar één waarde wordt opgegeven, bepaalt die over hoeveel tijd de beweging wordt uitgesmeerd. Dat is hier drie seconden. Een eventuele tweede waarde, die hier ontbreekt, geeft een eventueel uitstel aan het begin aan.

transition brengt nog een geheel eigen risico met zich mee. In de specificatie staat, welke eigenschappen met behulp van transition kunnen veranderen. Je kunt eventueel bij transition opgeven, voor welke eigenschappen het geldt. Als ik bijvoorbeeld top en left beide wil veranderen bij :hover, kan ik bijvoorbeeld aangeven dat de geleidelijke verandering met behulp van transition alleen voor top geldt. left verandert dan gewoon in één keer.

Als ik niet opgeef voor welke eigenschappen transition geldt, geldt het voor álle eigenschappen die bij :hover, :focus, en dergelijke worden veranderd. Als daar 'n eigenschap bij zit die op dit moment niet door transition kan worden vertraagd, verandert die gewoon in één keer. Maar als de specificatie of een van de browsermakers de geest krijgt en plotsklaps die eigenschap ook onder transition laat vallen, kan dat tot heel onverwachte resultaten leiden.

Dit probleem speelt hier niet, omdat ik hieronder bij #achterlicht:focus #middelvinger, #achterlicht:hover #middelvinger alleen top, left en opacity verander, en die moeten alle drie geleidelijk aan veranderen.

position: absolute;

Om de span op de juiste plaats te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#achterlicht.

Een span is van zichzelf een inline-element. Door de span absoluut te positioneren, verandert hij in een soort blok-element, waardoor ik eigenschappen als breedte en hoogte kan gebruiken.

top: -730px;

Op deze hoogte komt de span een eind boven het venster van de browser te staan. Ook bij een lettergrootte van 200% staat de span nog boven het venster. Dat is belangrijk omdat er anders dingen kunnen gebeuren, die normaal genomen alleen in Engelse spookhuizen plaatsvinden: ogenschijnlijk uit het niets opduikende teksten en zo.

Deze span staat binnen div#achterlicht. Als over die div wordt gehoverd, moeten twee afbeeldingen en bijbehorende tekst zichtbaar worden. Omdat deze span binnen die div staat, is ook deze span gevoelig voor hoveren, ook al is hij onzichtbaar. Als de cursor per ongeluk boven deze onzichtbare span wordt gebracht, zouden de twee afbeeldingen en de tekst zichtbaar worden. Terwijl dat alleen moet gebeuren als binnen de gele cirkel boven het achterlicht wordt gehoverd.

Door de span gewoon boven het venster van de browser te parkeren, is de span niet meer gevoelig voor hoveren.

Bij #achterlicht:focus #middelvinger, #achterlicht:hover #middelvinger wordt dit veranderd in top: -248px;. Omdat transition wordt gebruikt, vindt deze verplaatsing niet in één keer, maar geleidelijk plaats. Hierdoor komt de span, en dus de daarin zittende achtergrond-afbeelding, van bovenaf het venster van de browser binnen schuiven.

left: -138px;

Eindje naar links zetten. De enige reden hiervoor is om een beweging naar rechts te krijgen. Bij #achterlicht:focus #middelvinger, #achterlicht:hover #middelvinger wordt dit veranderd in left: -38px;. Omdat transition wordt gebruikt, vindt deze verplaatsing niet in één keer, maar geleidelijk plaats.

width: 100px; height: 170px;

Een achtergrond-afbeelding heeft van zichzelf geen grootte, hij vult alleen maar het element waar hij in zit. Daarom moet ik een breedte en hoogte aan dat element geven. Met deze breedte wordt de hele achtergrond-afbeelding getoond. De hoogte is iets te groot, wat ruimte oplevert om boven de achtergrond-afbeelding tekst neer te kunnen zetten.

border-radius: 10px;

Omdat ik maar één waarde opgeef, wordt de ronde hoek zowel horizontaal als verticaal 10 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is. Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is voor alle hoeken hetzelfde.

En omdat ik maar één hoek opgeef, geldt deze waarde voor alle hoeken: alle vier de hoeken worden rond.

padding: 3px;

Kleine ruimte tussen de buitenkant van de span en de tekst erin.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: url(099-pics/achtergrond-2.png) -130px 45px white no-repeat; Middelvinger

Achtergrond-afbeelding.

Op de afbeelding hiernaast is de achtergrond-afbeelding met daarboven de tekst te zien. Voor de duidelijkheid is er even een zwart randje rondom de afbeelding gezet.

Meerdere achtergrond-afbeeldingen zijn gecombineerd in één grotere, waardoor er minder aanroepen naar de server nodig zijn. Deze afbeelding staat een eind naar rechts in de gecombineerde afbeelding, daarom moet hij 130 px naar links worden verplaatst om hem op de goede plaats te krijgen.

Een uitgebreider verhaal over zo'n gecombineerde afbeelding, een 'sprite', staat bij De achtergrond-afbeeldingen...

Daarnaast moet de afbeelding 45 px omlaag worden neergezet, zodat er boven de afbeelding ruimte komt voor tekst.

Omdat er tekst boven de afbeelding staat, is een witte achtergrondkleur gegeven. Hierdoor is de tekst goed leesbaar.

Als een achtergrond-afbeelding niet de hele achtergrond vult, wordt de afbeelding normaal genomen herhaald tot wel de hele achtergrond wordt gevuld. Hier is dat geen goed idee, omdat de afbeelding dan ook achter de tekst zou komen te staan, waardoor deze slecht leesbaar wordt. no-repeat voorkomt dat.

line-height: 1em;

De standaard-regelhoogte is ongeveer 1.2 em. Die verklein ik hier dus 'n beetje. Als eenheid neem ik em, zodat ook in Internet Explorer de regelhoogte mee verandert met de lettergrootte.

font-size: 0.8em;

Iets kleinere letter. Als eenheid neem ik em, zodat ook in Internet Explorer de lettergrootte kan worden veranderd.

opacity: 0;

Volledig doorzichtig maken, waardoor afbeelding en tekst onzichtbaar worden. Bij #achterlicht:focus #middelvinger, #achterlicht:hover #middelvinger wordt dit veranderd in opacity: 1;: volledig ondoorzichtig. Omdat transition wordt gebruikt, vindt deze verandering niet in één keer, maar geleidelijk plaats.

#achterlicht:focus #middelvinger, #achterlicht:hover #middelvinger

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Doe iets met het element met id="middelvinger" dat binnen het element met id="achterlicht" zit, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

Dit is de span waarbinnen de middelvinger en wat bijbehorende tekst zitten.

top: -248px; left: -38px;

Bij #middelvinger is deze span, en dus de inhoud ervan, aan de bovenkant buiten het venster van de browser gezet. Nu wordt hij weer binnen het venster gezet en dus zichtbaar. Ook is de span wat naar links gezet. Omdat zowel top als left worden veranderd, schuift de span schuin het venster binnen. Door het gebruik van transition verloopt deze verplaatsing geleidelijk, zoals hierboven bij #middelvinger is beschreven.

opacity: 1;

Bij #middelvinger is deze span, en dus de inhoud ervan, volledig doorzichtig gemaakt. Nu wordt hij weer ondoorzichtig gemaakt en dus zichtbaar. Door het gebruik van transition verloopt deze verandering geleidelijk, zoals hierboven bij #middelvinger is beschreven.

De meeste achtergronden zijn enigszins doorzichtig, zodat de grote afbeelding met de fiets er enigszins doorheen komt. Dat is hier geen goed idee, omdat de tekst precies boven de tekst in de knop 'Toebehoren' komt te staan, waardoor de tekst slecht leesbaar zou worden op een enigszins doorzichtige ondergrond.

sup

De elementen <sup>. Binnen dit element staan de nummers van de noten. Tekst binnen deze elementen wordt iets kleiner en iets hoger weergegeven. Maar de standaard-veranderingen bevallen me niet goed, dus pas ik die hier enigszins aan.

line-height: 0;

De regelhoogte wordt normaal genomen bij <sup> verhoogd, waardoor je 'n lelijke kier krijgt boven een regel waarin <sup> is gebruikt. Door hier een regelhoogte van 0 op te geven, blijft de gewone regelhoogte bewaard.

font-size: 0.6em;

Iets kleinere letter dan <sup> standaard al heeft. Hierboven heb voorkomen dat de regelhoogte groter wordt. Maar dan moeten de cijfers íéts kleiner worden dan standaard het geval is bij <sup>.

Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

.noot sup

De elementen <sup> binnen de elementen met class="noot".

Bij sommige teksten staan noten. Die staan binnen spans met class="noot". De nummers van die noten staan weer binnen een <sup>.

Voor deze elementen gelden ook de bij sup opgegeven instellingen, voor zover ze hier niet worden veranderd.

font-size: 0.75em;

Bij .noot hebben de spans waar de kleine tekstjes in staan, een lettergrootte van 0.8 em gekregen. Deze lettergrootte wordt in principe geërfd door de kinderen van .noot, dus ook door de <sup>'s binnen .noot. Hiermee maak ik de nummers iets kleiner dan de tekstjes.

Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

vertical-align: 0.4em;

Hiermee komen de nummers iets lager op de regel te staan, wat beter uitkomt.

.lijn

De elementen met class="lijn". Sommige noten worden van de tekst erboven gescheiden door een lijn. Voor die lijnen zorgen spans met deze class.

display: block;

Van zichzelf is een span een inline-element. Door er een blok-element van te maken kan ik eigenschappen als breedte gebruiken. Bovendien staat elke lijn nu gelijk op een aparte regel.

width: 250px;

Breedte van de lijn.

margin: 3px 0;

Omdat voor onder en links geen waarden zijn ingevuld, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 3px 0 3px 0 in de volgorde boven - rechts - onder - links.

Boven en onder een kleine marge, links en rechts niet.

border-top: #777 solid 1px;

Aan de bovenkant een donkergrijze border.

De span is hierboven in een blok-element veranderd. Dit blok-element is leeg, er staat niets in. Daarom is de hoogte 0. Als ik border zou gebruiken in plaats van border-top, zou er boven en onder een border komen te staan. Die zouden tegen elkaar aan komen te staan, waardoor de lijn 2 px breed zou worden. Nu komt er maar één border en wordt de lijn dus maar 1 px breed.

div#toebehoren

De div met id="toebehoren". Binnen deze div staat de knop 'Toebehoren', alsmede het rijtje knoppen dat verschijnt als je over 'Toebehoren' hovert of als 'Toebehoren' focus heeft.

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

top: 0; right: 0;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf absoluut, relatief of fixed is gepositioneerd. Dat is hier div#hotspots. Deze div komt dus helemaal rechtsboven in div#hotspots te staan. Omdat ook de grote afbeelding met de fiets hier staat, komen boven- en rechterkant van de knop gelijk te staan met de boven- en rechterkant van de grote afbeelding met de fiets.

width: 130px; height: 22px;

Breedte en hoogte van de div.

Normaal genomen zou ik de hoogte niet hoeven op te geven, omdat bij een blok-element normaal genomen de hoogte automatisch precies hoog genoeg wordt om de inhoud weer te geven. Die inhoud wordt hier bepaald door de regelhoogte van 22 px, die even hieronder wordt opgegeven. Maar bij #hotspots div heeft ook deze div een hoogte van 30 px gekregen, dus dat moet ik hier corrigeren.

Normaal genomen zou ik hier als eenheid em gebruiken, zodat breedte en hoogte mee veranderen met de lettergrootte. Dat lukt hier echter niet, of zou op z'n minst vreselijk ingewikkeld worden, omdat allerlei elementen binnen deze div gepositioneerd moeten worden. En dat ook nog op twee verschillende manieren, afhankelijk van of er wordt gehoverd over 'n element of dat 'n element focus heeft.

Nadeel is dat de letters bij vergroten buiten de knoppen komen te staan, en bij vergrotingen van meer dan 170% moeilijk leesbaar worden (bij zoomen speelt dit niet, alleen bij een grotere lettergrootte.)

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background-color: white; background-color: rgba(255, 255, 255, 0.85);

De eerste eigenschap zorgt voor een witte achtergrondkleur, de tweede voor een enigszins doorzichtige witte achtergrondkleur. Waarom hier twee keer een kleur wordt opgegeven en hoe rgba() precies werkt, staat bij background-color white;.

line-height: 22px;

Tekst wordt normaal genomen in het midden van de regelhoogte gezet. Deze div is 22 px hoog. Als ik de regelhoogte even hoog maak, staat de tekst in de div dus automatisch verticaal gecentreerd.

Normaal genomen zou ik hier als eenheid em gebruiken, zodat de regelhoogte mee verandert met de lettergrootte. Ik heb hierboven echter ook de hoogte in px opgegeven en niet in em, daarom gebruik ik hier ook px als eenheid. (De reden hiervan staat hierboven bij hoogte.)

#rij

Het element met id="rij". Dit is een span. Binnen deze span staan weer vijf andere spans, waarbinnen de vijf knoppen staan die verschijnen bij hoveren over div#toebehoren, of als deze div focus heeft.

position: absolute;

Om deze span, en dus alles wat erin zit, op de juiste plaats neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een relatieve, absolute of fixed positie heeft. Dat is hier div#toebehoren.

Van zichzelf is een span een inline-element. Door het absoluut te positioneren, wordt het een soort blok-element en kan ik eigenschappen als hoogte gebruiken.

top: -1000px;

Normaal genomen zou ik deze span en de erin zittende knoppen hebben verborgen met display: none;, maar dat kan hier niet.

Alle divs waarin extra info staat, hebben een tabindex gekregen. Hierdoor kan ik met de Tab-toets alle divs één voor één focus geven, waardoor de afbeeldingen en tekst zichtbaar worden.

Ik kan echter maar één element gelijktijdig focus geven. Ik kan wel span#rij laten verschijnen met behulp van iets als display: block; als de ouder daarvan, div#toebehoren, focus heeft. Maar zodra ik nogmaals op de Tab-toets zou drukken, zou een van de knoppen uit span#rij focus krijgen en zou div#toebehoren dus geen focus meer hebben. En als div#toebehoren geen focus meer heeft, werkt ook display: block; niet meer.

Waardoor display: none; weer zou werken voor span#rij en de daarin zittende spans met knoppen. En een element dat is verborgen met behulp van display: none; kan nooit focus krijgen.

Oftewel: de spans die binnen span#rij zitten, kunnen nooit focus krijgen als ik display: none; gebruik om ze te verbergen. En dus is de daarin zittende info ook nooit te zien als ik de Tab-toets gebruik.

Daarom parkeer ik span#rij met alles erin gewoon boven het venster van de browser. Op deze manier kunnen de spans erin gewoon focus krijgen, maar zie ik ze niet voordat dat nodig is.

right: 0;

Helemaal rechts in div#toebehoren zetten. De knoppen binnen deze span worden meer naar links gezet. Waarom het toch handig is deze span helemaal rechts te zetten, staat hieronder bij #toebehoren:hover #rij.

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

Deze afbeelding is een volmaakt doorzichtige gif van 1 x 1 px.

span#rij ligt binnen div#toebehoren. Daarom moet ook deze span op hoveren reageren, als ik over div#toebehoren hover. In Internet Explorer 7, 8 en vreemd genoeg ook 9, reageert de span echter alleen maar op hoveren als ik een achtergrondkleur of een achtergrond-afbeelding eraan geef. Omdat deze span onzichtbaar moet zijn, gebruik ik een doorzichtige gif als achtergrond-afbeelding.

De uitleg hieronder bij #toebehoren:hover #rij maakt dit mogelijk iets duidelijker.

#toebehoren:hover #rij

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Voor hoveren gevoelige gebied van knop Toebehoren

Als ik over het element met id="toebehoren" hover, doe dan iets met het element met id="rij" daarbinnen. De div is de knop met 'Toebehoren'. #rij is een span waarbinnen vijf andere knoppen zitten.

Normaal genomen is span#rij onzichtbaar. Op de afbeelding hiernaast is hij doorzichtig rood gemaakt, zodat je hem kunt zien.

top: 5px;

Bij #rij is deze span aan de bovenkant buiten het venster van de browser gezet, zodat alles wat erin zit onzichtbaar is. Bij hoveren over div#toebehoren wordt hij binnen het venster gezet. Nu zijn de vijf erin zittende knoppen zichtbaar.

width: 260px;

Bij #rij is deze span rechts in div#toebehoren gezet, zoals op de afbeelding hierboven is te zien, omdat #rij even doorzichtig rood is gemaakt. Bij hoveren over div#toebehoren wordt de span 260 px breed gemaakt. Die breedte is veel meer dan wat nodig is voor de erin zittende vijf knoppen.

Als ik de span precies even breed zou maken als de vijf knoppen, wordt het onmogelijk om met hoveren op 'n enigszins normale manier de tweede en daaronder zittende knoppen te bereiken. Zodra de cursor 'Toebehoren' verlaat, sluit span#rij met de vijf erin zittende knoppen. Als ik de cursor eerst naar links zou bewegen en dan van boven naar beneden over de vijf knoppen beweeg, kan ik de onderste knop bereiken. Maar de vier knoppen erboven openen en sluiten elk steeds even, op het moment dat de cursor 'n knop passeert. Wat wel 'n leuke lichtshow oplevert, maar toch niet helemaal de bedoeling is.

Door span#rij breder te maken, kan de cursor gewoon van 'Toebehoren' schuin naar beneden rechtstreeks naar de juiste knop worden bewogen. Een beweging schuin naar beneden is ook veel natuurlijker dan eerst helemaal naar links en dan met een vrijwel rechte hoek naar beneden.

Dit is ook de reden dat bij #rij een achtergrond-afbeelding aan deze span is gegeven: anders werkt in Internet Explorer 7, 8 en vreemd genoeg ook nog 9 hoveren over deze span niet. Je zou dan inderdaad de hierboven beschreven onnatuurlijke beweging moeten maken.

#toebehoren:hover .extra, #toebehoren:hover .extra-pic

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Te veel teksten zichtbaar bij hoveren

.extra zijn de spans waarin de tekst zit die verschijnt bij hoveren over een van de vijf knoppen in span#rij;. .extra-pic zijn de spans waarbinnen de bijbehorende afbeeldingen zitten. Doe iets met deze spans wanneer over div#toebehoren wordt gehoverd.

Er zijn twee redenen waarom deze spans hier verborgen moeten worden. Als je ze niet zou verbergen, krijg je de hiernaast afgebeelde puinhoop.

Normaal genomen staat span#rij met alles erin onzichtbaar boven het venster van de browser geparkeerd. Bij #toebehoren:hover #rij wordt span#rij binnen het venster gezet en zichtbaar, als je over div#toebehoren hovert. De inhoud van span#rij wordt ook zichtbaar.

Elk van de in span#rij zittende vijf knoppen heeft een tekst, en die wordt ook zichtbaar. Dat is rechtsboven op de afbeelding te zien. Het linkervenstertje met tekst is goed, omdat er over de bovenste van de vijf knoppen wordt gehoverd. De drie teksten daaronder hoor je niet te zien.

(Je ziet rechtsboven maar één afbeelding en geen vier, omdat het achtergrond-afbeeldingen zijn die je pas ziet als je over de betreffende knop hovert. Hier wordt over 'Filterus Nasus' gehoverd, dus je ziet de neusfilters.)

Bij hoveren over div#toebehoren verberg ik daarom gewoon alle spans met teksten en afbeeldingen. Later maak ik ze dan één voor één op het juiste moment zichtbaar.

De tekst en de afbeelding onderaan hebben een iets andere oorzaak, maar zijn bepaald niet minder storend. Deze horen bij de knop 'Zwatelpasta'. Deze knop heeft focus, waardoor de bijbehorende tekst en afbeelding zichtbaar worden. Dit wordt verderop allemaal geregeld, vanaf #rij neusfilter:focus .extra, met aparte css voor elk van de vijf knoppen. Hoveren staat los van focus, je kunt prima over de bovenste van de vijf knoppen hoveren, terwijl de onderste focus heeft.

De knop waarbinnen deze tekst en afbeelding staan, wordt gepositioneerd ten opzichte van span#rij. Die normaal genomen boven het venster van de browser staat geparkeerd. Als ik echter over div#toebehoren hover, wordt span#rij binnen het venster van de browser gezet. Dat is nodig om goed te kunnen positioneren bij hoveren. Maar voor focus staat span#rij dan veel te laag, waardoor de knop met daarin de tekst en afbeelding ook veel te laag komen te staan. Dat zijn de tekst en afbeelding die op de afbeelding hierboven helemaal onderaan staan. Ze stonden goed, totdat er over 'n knop werd gehoverd en span#rij een eind omlaag werd gezet.

Daarom verberg ik bij hoveren de hele handel, ook als 'n knop focus heeft. Nu zie je alleen de tekst en afbeelding die horen bij de knop, waarover wordt gehoverd.

display: none;

Verberg alle tekst en afbeeldingen die bij de vijf knoppen in span#rij horen. De uitgebreide uitleg staat gelijk hierboven.

#rij span

De spans binnen het element met class="rij". Dit is een hele serie spans.

Elk van de vijf knoppen binnen span#rij heeft een eigen span. Elke eigen span bevat weer drie aparte spans:

span.extra: de span waarbinnen de tekst staat;

span.kopje: de span waarbinnen het kopje boven de tekst staat;

span.extra-pic: de span waarbinnen de afbeelding staat.

De hier opgegeven css geldt voor ál deze spans, omdat ze allemaal binnen span#rij staan.

Veel css is voor al deze spans hetzelfde. Die geef ik hier in één keer op, dat scheelt nogal wat css. Als 'n span afwijkende css nodig heeft, wordt dat later voor die span apart opgegeven.

display: block;

Van zichzelf is een span een inline-element. Door er een blok-element van te maken, kan ik eigenschappen als breedte en hoogte gebruiken.

position: relative;

Nu kan ik de spans verplaatsen ten opzichte van de normale plaats waar ze zouden komen te staan.

Als een element relatief is gepositioneerd, kun je kinderen absoluut positioneren ten opzichte van dat element. Daarvan maak ik verderop gebruik bij span.extra en span.extra-pic, die nu beide gepositioneerd kunnen worden ten opzichte van hun ouder-span.

right: -20px;

De spans met de vijf knoppen staan binnen span#rij, dat op de afbeelding hiernaast doorzichtig rood gemaakt. Normaal genomen zie je span#rij niet, maar hij is er wel. De spans met knoppen komen onder elkaar te staan, omdat de spans in een blok-element zijn veranderd.

De vijf spans met knoppen komen gewoon helemaal links in span#rij te staan, zoals op de afbeelding is te zien. Dat is de normale plaats voor deze spans.

Ik wil ze echter gedeeltelijk over 'Toebehoren' neerzetten, daarom schuif ik ze 20 px naar rechts. Hierdoor is het duidelijker dat het om een soort 'subknoppen' van 'Toebehoren' gaat.

width: 130px;

De spans zijn hierboven veranderd in een blok-element. Normaal genomen wordt een blok-element automatisch even breed als zijn ouder. Dat zou hier betekenen dat de knoppen even breed zouden worden als span#rij, op de afbeelding hierboven doorzichtig rood. Dat is veel te breed.

Normaal genomen zou ik hier als eenheid em gebruiken. Waarom ik dat hier niet heb gedaan, staat hieronder bij hoogte.

height: 22px;

Normaal genomen zou ik hier als eenheid em gebruiken, zodat breedte en hoogte mee veranderen met de lettergrootte. Dat lukt hier echter niet, of zou op z'n minst vreselijk ingewikkeld worden, omdat allerlei elementen binnen deze div gepositioneerd moeten worden. En dat ook nog op twee verschillende manieren, afhankelijk van of er wordt gehoverd over 'n element of dat 'n element focus heeft.

Nadeel is dat de letters bij vergroten buiten de knoppen komen te staan, en bij vergrotingen van meer dan 170% moeilijk leesbaar worden (bij zoomen speelt dit niet, alleen bij een grotere lettergrootte.)

border: yellow solid 2px;

Gele rand.

border-radius: 20px;

Omdat ik maar één maat opgeef, wordt de hoek zowel verticaal als horizontaal 10 px lang. Dit levert volledig ronde hoeken op, alsof het een kwart van een cirkel is.

Een afbeelding van een cirkelvormige hoek staat bij border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven, maar het principe is hetzelfde.

De hoeken zijn 20 px breed en hoog. Omdat de knoppen maar 22 px hoog zijn, is dat in de hoogte genoeg (dat twee hoeken samen 40 px zijn maakt niet uit, ze mogen gewoon te groot zijn).

Maar de knoppen zijn 130 px breed, dat is te veel voor hoeken van 20 px. De ruimte tussen de hoeken wordt opgevuld met een rechte lijn.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background-color: white; background-color: rgba(255, 255, 255, 0.85);

De eerste eigenschap zorgt voor een witte achtergrondkleur, de tweede voor een enigszins doorzichtige witte achtergrondkleur. Waarom hier twee keer een kleur wordt opgegeven en hoe rgba() precies werkt, staat bij background-color white;.

#rij .extra

De elementen met class="extra" binnen het element met id="rij". Dit zijn de spans waarbinnen de teksten bij de knoppen staan.

Hiervoor gelden ook de bij #rij span opgegeven eigenschappen, voor zover die hier niet worden veranderd.

position: absolute;

Om de spans op de juiste plek neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van het eerste element dat zelf een relatieve, absolute of fixed positie heeft. Dat is hier de span waarbinnen de betreffende knop staat.

Een span is van zichzelf een inline-element. Door het absoluut te positioneren, verandert de span in een soort blok-element, waardoor ik eigenschappen als breedte en hoogte kan gebruiken.

z-index: 10; Knoppen staan boven de tekst

Een z-index kan alleen worden gebruikt bij een element dat absoluut, relatief of fixed is gepositioneerd, zoals bij deze spans het geval is.

De spans, en dus de erin zittende tekst, worden zichtbaar als over 'n knop wordt gehoverd. De tekst staat gedeeltelijk op dezelfde plaats als het rijtje knoppen. Op de afbeelding hiernaast zijn de randen van de knoppen even rood gemaakt, zodat dit duidelijker is te zien.

De tekst die op de afbeelding is te zien, hoort bij de bovenste knop. De vier knoppen eronder staan dus later in de html. Daarom komen deze knoppen boven de span met tekst te staan. Door de span met tekst een hogere z-index te geven, komen de spans en dus de tekst daarin boven de knoppen te staan.

Ik gebruik wat grotere getallen als waarde bij de z-index. Hierdoor kan ik later, als dat ooit nodig zou zijn, andere z-indexen tussenvoegen, zonder dat ik de waarde van al bestaande z-indexen moet veranderen.

width: 510px;

Breedte van het venstertje met tekst.

Verderop zet ik elke span met tekst met behulp van right zo, dat de tekst net onder de knoppen komt te staan. Met deze breedte komt de linkerkant van de tekst dan precies gelijk te staan met de linkerkant van de grote afbeelding met de fiets.

height: auto;

Bij #rij span hebben ook deze spans een hoogte van 22 px gekregen. Dat is veel te weinig voor deze spans met tekst. auto is de standaardwaarde, deze zorgt ervoor dat de spans automatisch precies de hoogte krijgen die nodig is om de tekst weer te geven.

max-height: 503px;

De spans met tekst mogen niet hoger worden dan de grote afbeelding met de fiets. Als de letters worden vergroot, komt de onderkant van de spans nooit onder de onderkant van de grote afbeelding met de fiets uit.

overflow: auto;

Als de tekst wordt vergroot, zou de tekst op 'n gegeven moment niet meer in het venstertje passen en daardoor niet gelezen kunnen worden. Deze instelling zorgt ervoor dat er een verticale scrollbalk verschijnt, als de tekst niet meer in het venstertje past.

border: black solid 1px;

Zwart randje.

border-radius: 0 12px 12px 12px;

Linksboven een gewone rechte hoek, rechtsboven en links- en rechtsonder ronde hoeken.

Omdat maar één maat per hoek is opgegeven, wordt de hoek zowel verticaal als horizontaal 12 px lang. Op deze manier krijg ik cirkelvormige hoeken, alsof het 'n kwart van 'n cirkel is.

Een afbeelding van een cirkelvormige hoek staat border-radius 10px 10px 0 0;. Dat is een hoek rechtsboven van 10 px, maar het principe is voor alle hoeken hetzelfde.

padding: 4px;

Kleine afstand tussen buitenkant van de span en tekst erin.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background-color: white; background-color: rgba(255, 255, 255, 0.85);

De eerste eigenschap zorgt voor een witte achtergrondkleur, de tweede voor een enigszins doorzichtige witte achtergrondkleur. Waarom hier twee keer een kleur wordt opgegeven en hoe rgba() precies werkt, staat bij background-color white;.

text-align: left;

Bij #content is de tekst gecentreerd. Omdat deze eigenschap wordt geërfd, geldt hij voor alles binnen div#content, tenzij ik dat corrigeer. Wat ik hier dus doe voor deze span met tekst.

#rij .kopje

De elementen met class="kopje" binnen het element met id="rij". Dit zijn de spans waarbinnen het kopje boven de tekst staat.

Hiervoor gelden ook de bij #rij span opgegeven eigenschappen, voor zover die hier niet worden veranderd.

right: auto;

Bij #rij span worden ook deze spans 20 px naar rechts verschoven. Dat is voor de kopjes echter niet nodig. auto is de standaard-instelling, daarmee maak je dit ongedaan.

width: auto;

Bij #rij span krijgen ook deze spans een breedte van 130 px. Maar de spans met de kopjes mogen even breed worden als hun ouder span.extra. De standaard-instelling is auto, hierdoor gedraagt deze span zich weer als een blok-element en wordt even breed als z'n ouder.

height: 1.2em;

Hoogte. Als eenheid neem ik em, zodat de hoogte mee verandert met de lettergrootte.

border: 0;

Bij #rij span hebben ook deze spans een gele rand gekregen. Weg ermee.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background: lightgreen;

Lichtgroene achtergrond.

font-size: 1.2em;

Iets grotere letter. Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

#rij .extra-pic

De elementen met class="extra-pic" binnen het element met id="rij". Dit zijn de spans waarbinnen de afbeeldingen bij de knoppen staan.

Hiervoor gelden ook de bij #rij span opgegeven eigenschappen, voor zover die hier niet worden veranderd.

position: absolute;

Om de spans op de juiste plek neer te kunnen zetten. Er wordt gepositioneerd ten opzichte van het eerste element dat zelf een relatieve, absolute of fixed positie heeft. Dat is hier de span waarbinnen de betreffende knop staat.

Een span is van zichzelf een inline-element. Door de span absoluut te positioneren, verandert hij in een soort blok-element, waardoor ik eigenschappen als breedte en hoogte kan gebruiken.

border: 0;

Bij #rij span hebben ook deze spans een gele rand gekregen. Weg ermee.

#toebehoren #rij #neusfilter:hover .extra

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Doe iets met de elementen met class="extra" die binnen het element met id="neusfilter" zitten, dat weer binnen het element met id="rij" zit, dat weer binnen het element met id="toebehoren" zit. Maar alleen als ik over het element met id="neusfilter" hover.

.extra zijn de spans waar de teksten bij de vijf knoppen in zitten. En in dit geval gaat het om de span met de tekst voor span#neusfilter.

Voor span.extra gelden ook de bij #rij span en #rij .extra opgegeven eigenschappen, voor zover die hier niet worden veranderd.

Deze selector is nogal lang. Verderop bij #rij #neusfilter:focus .extra wordt span.extra met top en right op een bepaalde plaats gezet. Normaal genomen wordt css uitgevoerd in de volgorde waarin het in de code staat. Omdat #rij #neusfilter:focus .extra na deze regel komt, zou die in principe altijd worden uitgevoerd als span#neusfilter focus heeft. En dus zouden de daar opgegeven top en right altijd de hier opgegeven top en right overrulen, als span#neusfilter focus heeft.

Dat kan ik voorkomen door meer specificiteit, meer gewicht, aan deze selector te geven. Ook al komt die andere selector later, toch wordt dan de regel bij deze selector uitgevoerd.

#rij #neusfilter:focus .extra heeft evenveel gewicht als #rij #neusfilter:hover .extra: het aantal id's, classes en pseudo-classes is precies hetzelfde. Door aan de selector hier #toebehoren toe te voegen, krijgt deze selector 1 id meer en 'wint' van de verderop staande selector.

display: block;

Bij #toebehoren:hover .extra, #toebehoren:hover .extra-pic wordt deze span verborgen als je over div#toebehoren hovert. Bij hoveren over span#neusfilter, de knop 'Filterus Nasus', moet de span en dus de daarin zittende tekst zichtbaar worden.

top: -10px;

Bij #rij .extra is deze span absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf relatief, absoluut of fixed is gepositioneerd. Dat is hier span#neusfilter. Op deze hoogte komt de bovenkant van de span, en dus de daarin zittende tekst, precies gelijk met de bovenkant van de grote afbeelding met de fiets.

right: 120px;

120 px naar links verplaatsen. Nu komt de span, en dus de daarin zittende tekst, net iets over het rijtje met vijf knoppen te staan.

Dit is belangrijk bij hoveren. Als de letters worden vergroot, verschijnt op 'n gegeven moment een scrollbalk in het venstertje met tekst. Je moet dan met de cursor van de knop naar de tekst kunnen gaan, zonder dat de tekst sluit. Als er een kier tussen knop en venstertje zou zitten, sluit het venstertje met tekst op het moment dat de cursor boven die kier hangt.

#toebehoren #rij #neusfilter:hover .extra-pic

(Om op de iPad een aanraking met de vinger ongeveer hetzelfde te laten werken als hoveren op een desktopbrowser, moet in de html aan het element dat op hoveren moet reageren onClick="void(0)" worden toegevoegd.)

Doe iets met de elementen met class="extra-pic" die binnen het element met id="neusfilter" zitten, dat weer binnen het element met id="rij" zit, dat weer binnen het element met id="toebehoren" zit. Maar alleen als ik over het element met id="neusfilter" hover.

.extra-pic zijn de spans waar de afbeeldingen bij de vijf knoppen in zitten. En in dit geval gaat het om de span met de afbeelding voor span#neusfilter.

Voor span.extra-pic gelden ook de bij #rij span en #rij .extra-pic opgegeven eigenschappen, voor zover die hier niet worden veranderd.

Deze selector is nogal lang. Verderop bij #rij #neusfilter:focus .extra-pic wordt span.extra-pic met top en right op een bepaalde plaats gezet. Normaal genomen wordt css uitgevoerd in de volgorde waarin het in het bestand staat. Omdat #rij #neusfilter:focus .extra-pic na deze regel komt, zou die in principe altijd worden uitgevoerd als span#neusfilter focus heeft. En dus zouden de daar opgegeven top en right altijd de hier opgegeven top en right overrulen, als span#neusfilter focus heeft.

Dat kan ik voorkomen door meer specificiteit, meer gewicht, aan deze selector te geven. Ook al komt die andere selector later, toch wordt dan de regel bij deze selector uitgevoerd.

#rij #neusfilter:focus .extra-pic heeft evenveel gewicht als #rij #neusfilter:hover .extra-pic: het aantal id's, classes en pseudo-classes is precies hetzelfde. Door aan de selector hier #toebehoren toe te voegen, krijgt deze selector 1 id meer en 'wint' van de verderop staande selector.

display: block;

Bij #toebehoren:hover .extra, #toebehoren:hover .extra-pic wordt deze span verborgen als je over div#toebehoren hovert. Bij hoveren over span#neusfilter, de knop 'Filterus Nasus', moet de span en dus de daarin zittende afbeelding zichtbaar worden.

top: 129px;

Bij #rij .extra-pic is deze span absoluut gepositioneerd. Op deze hoogte komt de bovenkant van de span en dus van de daarin zittende achtergrond-afbeelding tegen de onderkant van het rijtje met vijf knoppen te staan.

left: 25px;

Door de span 25 px naar rechts te zetten, komt de erin zittende achtergrond-afbeelding in het midden van de ruimte tussen het venstertje met tekst en de rechterkant van de grote afbeelding met de fiets te staan.

width: 200px; height: 186px;

In de span staat een achtergrond-afbeelding. Een achtergrond-afbeelding heeft van zichzelf geen breedte en hoogte, hij vult alleen maar het element waar hij in staat. Daarom moet ik breedte en hoogte aan de span geven. Met deze breedte en hoogte is de achtergrond-afbeelding precies zichtbaar.

background: url(099-pics/toebehoren.jpg) 213px 0;

Meerdere achtergrond-afbeeldingen zijn gecombineerd in één grotere, waardoor er minder aanroepen naar de server nodig zijn. Deze afbeelding staat een eind naar rechts in de gecombineerde afbeelding, daarom moet hij 213 px naar links worden verplaatst om hem op de goede plaats te krijgen.

Een uitgebreider verhaal over zo'n gecombineerde afbeelding, een 'sprite', staat bij De achtergrond-afbeeldingen...

-moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);

Hier staat in feite vijf keer hetzelfde: transform: rotate(180deg);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

transform geeft de mogelijkheid om elementen te vervormen, te draaien, enz. In dit geval wordt de span, en dus de erin zittende achtergrond-afbeelding, met behulp van rotate 180 graden gedraaid. De afbeelding staat dus ondersteboven.

Niet verder vertellen, maar deze zelfde afbeelding wordt bij Arnicaantjes gebruikt, maar dan niet ondersteboven. Zoals het de Firma Jacobse en Van Es betaamt. Waarom zou je moeite doen voor twee afbeeldingen, als je er ook gewoon eentje kunt omdraaien?

Internet Explorer 7 en 8 kennen transform niet, daarvoor komt later eigen css.

#toebehoren #rij #astraalhelm:hover .extra {display: block; top: -36px; right: 120px;}

Hiervoor geldt precies hetzelfde als voor #toebehoren #rij #neusfilter:hover .extra, alleen gaat het hier om de tekst die bij de knop 'Astraalhelm' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top en right verschillen.

#toebehoren #rij #astraalhelm:hover .extra-pic {display: block; top: 102px; left: 15px; width: 219px; height: 145px; background: url(099-pics/toebehoren.jpg);}

Hiervoor geldt precies hetzelfde als voor #toebehoren #rij #neusfilter:hover .extra-pic, alleen gaat het hier om de afbeelding die bij de knop 'Astraalhelm' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top, left, width en height verschillen. Ook de achtergrondpositie is anders. (In dit geval is er geen achtergrondpositie, omdat deze afbeelding linksboven in de grote gecombineerde afbeelding staat.) En omdat deze afbeelding niet wordt gedraaid, ontbreekt transform.

#toebehoren #rij #aurabril:hover .extra {display: block; top: -62px; right: 120px;}

Hiervoor geldt precies hetzelfde als voor #toebehoren #rij #neusfilter:hover .extra, alleen gaat het hier om de tekst die bij de knop 'Aurabril' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top en right verschillen.

#toebehoren #rij #aurabril:hover .extra-pic {display: block; top: 76px; left: 10px; width: 229px; height: 142px; background: url(099-pics/toebehoren.jpg) 231px 210px;}

Hiervoor geldt precies hetzelfde als voor #toebehoren #rij #neusfilter:hover .extra-pic, alleen gaat het hier om de afbeelding die bij de knop 'Aurabril' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top, left, width en height verschillen. Ook de achtergrondpositie is anders. En omdat deze afbeelding niet wordt gedraaid, ontbreekt transform.

#toebehoren #rij #arnicaantjes:hover .extra {display: block; top: -88px; right: 120px;}

Hiervoor geldt precies hetzelfde als voor #toebehoren #rij #neusfilter:hover .extra, alleen gaat het hier om de tekst die bij de knop 'Arnicaantjes' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top en right verschillen.

#toebehoren #rij #arnicaantjes:hover .extra-pic {display: block; top: 50px; left: 25px; width: 200px; height: 186px; background: url(099-pics/toebehoren.jpg) 213px 0;}

Hiervoor geldt precies hetzelfde als voor #toebehoren #rij #neusfilter:hover .extra-pic, alleen gaat het hier om de afbeelding die bij de knop 'Arnicaantjes' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top, left, width en height verschillen. Ook de achtergrondpositie is anders. En omdat deze afbeelding niet wordt gedraaid, ontbreekt transform.

#toebehoren #rij #zwatelpasta:hover .extra {display: block; top: -114px; right: 120px;}

Hiervoor geldt precies hetzelfde als voor #toebehoren #rij #neusfilter:hover .extra, alleen gaat het hier om de tekst die bij de knop 'Zwatelpasta' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top en right verschillen.

#toebehoren #rij #zwatelpasta:hover .extra-pic {display: block; top: 24px; left: 25px; width: 199px; height: 267px; background: url(099-pics/toebehoren.jpg) 0 -149px;}

Hiervoor geldt precies hetzelfde als voor #toebehoren #rij #neusfilter:hover .extra-pic, alleen gaat het hier om de afbeelding die bij de knop 'Zwatelpasta' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top, left, width en height verschillen. Ook de achtergrondpositie is anders. En omdat deze afbeelding niet wordt gedraaid, ontbreekt transform.

#rij span:focus

Doe iets met de spans binnen het element met id="rij", maar alleen als die span focus heeft.

Binnen span#rij zitten vijf spans. Omdat deze spans in de html een tabindex hebben gekregen, kunnen ze focus krijgen. In elk van deze spans zit een knop.

outline: transparent solid 0;

Alle browsers geven met een kadertje aan dat een element focus heeft. Dat is belangrijk voor bijvoorbeeld mensen die de Tab-toets gebruiken om van link naar link te gaan. Anders zouden ze niet weten waar ze zitten.

Dat standaard-kadertje is hier overbodig, het is alleen maar lelijk. Normaal genomen zou outline: 0; voldoende moeten zijn, maar dat werkt niet voor Opera. Opera heeft een, naar mijn mening, heel dik, foeilelijk, knalblauw kader, dat alleen maar van het scherm is te meppen door deze volledige regel te gebruiken.

#rij #neusfilter:focus .extra

Doe iets met de spans met class="extra" die binnen het element met id="neusfilter" zitten, dat weer binnen het element met id="rij" zit. Maar alleen als het element met id="neusfilter" focus heeft. Dat is hier maar één span, waarin de tekst zit die bij de knop 'Filterus Nasus' hoort.

Voor span.extra gelden ook de bij #rij span en #rij .extra opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: 995px;

Bij #rij is span#rij boven het venster van de browser geparkeerd en daardoor onzichtbaar. Met de daarin zittende knoppen, waaronder span#extra. Je ziet de teksten niet, maar ze zijn er wel. Het enige wat ik hoef te doen om ze zichtbaar te maken, is ze binnen het venster van de browser zetten. Dat doe ik door ze een eind omlaag te plaatsen.

Bij #rij .extra zijn deze spans absoluut gepositioneerd. Ze worden gepositioneerd ten opzichte van de eerste ouder die zelf absoluut, relatief of fixed is gepositioneerd. Dat is hier span#neusfilter. Op deze hoogte komt de bovenkant van de tekst precies gelijk te staan met de bovenkant van de grote afbeelding met de fiets.

right: 246px;

Met deze verplaatsing naar rechts komt de linkerkant van de tekst precies gelijk te staan met de linkerkant van de grote afbeelding met de fiets.

#rij #neusfilter:focus .extra-pic

Doe iets met de elementen met class="extra-pic" die binnen het element met id="neusfilter" zitten, dat weer binnen het element met id="rij" zit. Maar alleen als het element met id="neusfilter" focus heeft.

.extra-pic zijn de spans waar de afbeeldingen bij de vijf knoppen in zitten. En in dit geval gaat het om de span met de afbeelding voor span#neusfilter.

Voor span.extra-pic gelden ook de bij #rij span en #rij .extra-pic opgegeven eigenschappen, voor zover die hier niet worden veranderd.

top: 1022px;

Bij #rij .extra-pic is deze span absoluut gepositioneerd. Op deze hoogte komt de bovenkant van de span en dus van de daarin zittende achtergrond-afbeelding tegen de onderkant van knop 'Toebehoren' te staan.

right: 32px;

Door de span 32 px naar links te zetten, komt de erin zittende achtergrond-afbeelding in het midden van de ruimte tussen het venstertje met tekst en de rechterkant van de grote afbeelding met de fiets te staan.

width: 200px; height: 186px;

In de span staat een achtergrond-afbeelding. Een achtergrond-afbeelding heeft van zichzelf geen breedte en hoogte, hij vult alleen maar het element waar hij in staat. Daarom moet ik breedte en hoogte aan de span geven. Met deze breedte en hoogte is de achtergrond-afbeelding precies zichtbaar.

background: url(099-pics/toebehoren.jpg) 213px 0;

Meerdere achtergrond-afbeeldingen zijn gecombineerd in één grotere, waardoor er minder aanroepen naar de server nodig zijn. Deze afbeelding staat een eind naar rechts in de gecombineerde afbeelding, daarom moet hij 213 px naar links worden verplaatst om hem op de goede plaats te krijgen.

Een uitgebreider verhaal over zo'n gecombineerde afbeelding, een 'sprite', staat bij De achtergrond-afbeeldingen...

-moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg);

Hier staat in feite vijf keer hetzelfde: transform: rotate(180deg);. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

transform geeft de mogelijkheid om elementen te vervormen, te draaien, enz. In dit geval wordt de span, en dus de erin zittende achtergrond-afbeelding, met behulp van rotate 180 graden gedraaid. De afbeelding staat dus ondersteboven. Deze zelfde afbeelding wordt bij Arnicaantjes gebruikt, maar dan niet ondersteboven.

Internet Explorer 7 en 8 kennen transform niet, daarvoor komt later eigen css.

#rij #astraalhelm:focus .extra {top: 969px; right: 246px;}

Hiervoor geldt precies hetzelfde als voor #rij #neusfilter:focus .extra, alleen gaat het hier om de tekst die bij 'Astraalhelm' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top en right verschillen.

#rij #astraalhelm:focus .extra-pic {top: 996px; right: 22px; width: 219px; height: 145px; background: url(099-pics/toebehoren.jpg);}

Hiervoor geldt precies hetzelfde als voor #rij #neusfilter:focus .extra-pic, alleen gaat het hier om de afbeelding die bij de knop 'Astraalhelm' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top, left, width en height verschillen. Ook de achtergrondpositie is anders. (In dit geval is er geen achtergrondpositie, omdat deze afbeelding linksboven in de grote gecombineerde afbeelding staat.) En omdat deze afbeelding niet wordt gedraaid, ontbreekt transform.

#rij #aurabril:focus .extra {top: 943px; right: 246px;}

Hiervoor geldt precies hetzelfde als voor #rij #neusfilter:focus .extra, alleen gaat het hier om de tekst die bij 'Aurabril' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top en right verschillen.

#rij #aurabril:focus .extra-pic {top: 970px; right: 18px; width: 229px; height: 142px; background: url(099-pics/toebehoren.jpg) 231px 210px;}

Hiervoor geldt precies hetzelfde als voor #rij #neusfilter:focus .extra-pic, alleen gaat het hier om de afbeelding die bij de knop 'Aurabril' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top, left, width en height verschillen. Ook de achtergrondpositie is anders. En omdat deze afbeelding niet wordt gedraaid, ontbreekt transform.

#rij #arnicaantjes:focus .extra {top: 917px; right: 246px;}

Hiervoor geldt precies hetzelfde als voor #rij #neusfilter:focus .extra, alleen gaat het hier om de tekst die bij 'Arnicaantjes' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top en right verschillen.

#rij #arnicaantjes:focus .extra-pic {top: 946px; right: 32px; width: 200px; height: 186px; background: url(099-pics/toebehoren.jpg) 213px 0;}

Hiervoor geldt precies hetzelfde als voor #rij #neusfilter:focus .extra-pic, alleen gaat het hier om de afbeelding die bij de knop 'Arnicaantjes' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top, left, width en height verschillen. Ook de achtergrondpositie is anders. En omdat deze afbeelding niet wordt gedraaid, ontbreekt transform.

#rij #zwatelpasta:focus .extra {top: 891px; right: 246px;}

Hiervoor geldt precies hetzelfde als voor #rij #neusfilter:focus .extra, alleen gaat het hier om de tekst die bij 'Zwatelpasta' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top en right verschillen.

#rij #zwatelpasta:focus .extra-pic {top: 918px; right: 32px; width: 199px; height: 267px; background: url(099-pics/toebehoren.jpg) 0 -149px;}

Hiervoor geldt precies hetzelfde als voor #rij #neusfilter:focus .extra-pic, alleen gaat het hier om de afbeelding die bij de knop 'Zwatelpasta' hoort. De uitleg is hetzelfde als bij #neusfilter, maar de id en de waarden bij top, left, width en height verschillen. Ook de achtergrondpositie is anders. En omdat deze afbeelding niet wordt gedraaid, ontbreekt transform.

div#getuigenissen

De div met id="getuigenissen". Dit is de div waarbinnen de knop 'Getuigenissen', en alles wat daar weer bij hoort, staat.

Voor deze div gelden ook de bij #hotspots div opgegeven instellingen, voor zover die hier niet worden veranderd.

top: 0; left: 0;

Bij #hotspots div is deze div absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf relatief, absoluut of fixed is gepositioneerd. Dat is hier div#hotspots. In de linkerbovenhoek zetten. Omdat ook de grote afbeelding met de fiets daar staat, staat deze div en dus de daarin zittende knop in de linkerbovenhoek van de grote afbeelding met de fiets.

width: 130px; height: 22px;

Breedte en hoogte van de div.

Normaal genomen zou ik de hoogte niet hoeven op te geven, omdat bij een blok-element normaal genomen de hoogte automatisch precies hoog genoeg wordt om de inhoud weer te geven. Die inhoud wordt hier bepaald door de regelhoogte van 22 px, die even hieronder wordt opgegeven. Maar bij #hotspots div heeft ook deze div een hoogte van 30 px gekregen, dus dat moet ik hier corrigeren.

Normaal genomen zou ik hier als eenheid em gebruiken, zodat breedte en hoogte mee veranderen met de lettergrootte. Ik heb hiervan afgezien, omdat dat in de knop 'Toebehoren' niet kan. Het lijkt me beter als het in beide knoppen niet kan, dan wanneer het in eentje wel en in eentje niet kan.

color: black;

Voorgrondkleur zwart. Dit is onder andere de kleur van de tekst.

Hoewel dit de standaardkleur is, geef ik de kleur toch op. Hieronder geef ik een achtergrondkleur op. Sommige mensen hebben zelf de voorgrond- en/of achtergrondkleur veranderd, bijvoorbeeld omdat ze slecht kleuren kunnen onderscheiden. Als ik nu de achtergrondkleur verander, maar niet de voorgrondkleur, loop ik het risico dat tekstkleur en achtergrondkleur te veel op elkaar gaan lijken.

Door beide op te geven, weet ik redelijk zeker dat achtergrond- en tekstkleur genoeg van elkaar blijven verschillen. Als de gebruiker !important heeft gebruikt, is er nog niets aan de hand, want dan veranderen achtergrond- en voorgrondkleur geen van beide.

Ik heb dit ook al bij <body> opgegeven, maar sommige mensen hebben bij álle elementen de kleuren veranderd. Het heeft immers weinig zin als ze dat alleen bij de body doen, terwijl de sitebouwer de kleuren ook bij bijvoorbeeld de paragrafen heeft aangepast.

background-color: white; background-color: rgba(255, 255, 255, 0.85);

De eerste eigenschap zorgt voor een witte achtergrondkleur, de tweede voor een enigszins doorzichtige witte achtergrondkleur. Waarom hier twee keer een kleur wordt opgegeven en hoe rgba() precies werkt, staat bij background-color white;.

.no-touch div#getuigenissen

De div met id="getuigenissen" binnen een element met class="no-touch". Dit is de div waarbinnen de knop 'Getuigenissen', en alles wat daar weer bij hoort, staat.

Als je in de broncode kijkt, zul je de class "no-touch" niet vinden. Deze class wordt door het JavaScript modernizr toegevoegd aan <html> bij browsers, die touch events niet herkennen. In principe werkt deze regel daardoor alleen in browsers, die touch events niet herkennen. Dat zijn (meestal) desktopbrowsers.

Hoe dit verder precies werkt, staat bij Touchscreens herkennen met behulp van modernizr.

Om <html class="no-touch"> te kunnen zien in de broncode, moet je de gegenereerde code bekijken. In Firefox kan dat met behulp van bijvoorbeeld Firebug of Web Developer onder View Source → View Generated Source. Of met het in Firefox ingebouwde 'Element inspecteren'. Andere browsers hebben andere manieren om gegenereerde code te bekijken.

line-height: 22px;

Tamelijk grote regelhoogte.

Voor het grootste deel van de tekst binnen 'Getuigenissen' wordt de regelhoogte verderop weer veranderd. Daardoor beïnvloedt deze regelhoogte alleen het stukje tekst onder 'Intern'.

Omdat op touchscreens scrollen binnen een div problemen kan opleveren, moet de tekst op touchscreens zonder scrollen volledig zichtbaar zijn. Daarom mogen touchscreens deze grotere regelhoogte niet krijgen.

#getuigenissen .tekst-o

De elementen met class="tekst-o" binnen het element met id="getuigenissen". Dat is hier maar één span, waarbinnen de tekst staat die bij de knop 'Getuigenissen' hoort.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l en tekst-o opgegeven eigenschappen, voor zover die hier niet worden veranderd.

bottom: -488px;

Bij .tekst, .tekst-o, .tekst-r, .tekst-l is deze span absoluut gepositioneerd. Er wordt gepositioneerd ten opzichte van de eerste ouder die zelf een absolute, relatieve of fixed positie heeft. Dat is hier div#getuigenissen.

Op deze hoogte komt de bovenkant van de tekst precies gelijk te staan met de bovenkant van de grote afbeelding met de fiets.

(Tja, ik had ook van bovenaf kunnen positioneren. Dat zou hier ook gevoelsmatig iets meer voor de hand liggen. Maar alle andere spans met deze class worden van onderaf gepositioneerd. Dus min of meer automatisch is dat bij deze ook gebeurd. En het staat prima en ik ben liever lui dan moe, dus laat ik het lekker zo.)

left: -2px;

Pietseltje naar links zodat de linkerkant van de tekst precies gelijk staat met de linkerkant van de grote afbeelding met de fiets.

width: 700px;

Breedte. Deze breedte geeft voldoende ruimte om op touchscreens de tekst in twee kolommen naast elkaar te laten zien. Voor desktopbrowsers wordt de breedte hieronder aangepast.

padding: 4px 0;

Omdat voor onder en links geen waarde is opgegeven, krijgen deze automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 4px 0 4px 0 in de volgorde boven - rechts - onder - links. Boven en onder kleine afstand tussen buitenkant van de span en de erin staande tekst.

De ruimte rechts en links houdt ik hier even op 0, omdat die voor verschillende onderdelen van de tekst gaat variëren.

font-size: 0.9em;

Tamelijk kleine letter. Dit is één van de dingen die ervoor zorgen dat op touchscreens de tekst onder 'Getuigenissen' niet gescrold hoeft te worden, wat problemen op kan leveren in oudere mobiele browsers. Voor desktopbrowsers wordt de tekst hieronder weer vergroot.

-moz-column-count: 2; -webkit-column-count: 2; column-count: 2;

Hier staat in feite drie keer hetzelfde: column-count: 2;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

De tekst onder 'Getuigenissen' is te lang om in het venster te passen. Op desktopbrowsers kan de tekst gescrold worden, maar scrollen binnen een div kan problemen geven in oudere mobiele browsers. Daarom wordt in mobiele browsers de tekst in twee kolommen weergegeven, zodat niet gescrold hoeft te worden. Voor desktopbrowsers wordt dat hieronder weer aangepast naar één kolom.

-moz-column-rule: black solid 1px; -webkit-column-rule: black solid 1px; column-rule: black solid 1px;

Hier staat in feite drie keer hetzelfde: column-rule: black solid 1px;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

Tussen de kolommen zwart lijntje neerzetten.

.no-touch #getuigenissen .tekst-o

De elementen met class="tekst-o" binnen het element met id="getuigenissen" binnen een element met class="no-touch". Dat is hier maar één span, waarbinnen de tekst staat die bij de knop 'Getuigenissen' hoort.

Hiervoor gelden ook de bij .tekst, .tekst-o, .tekst-r, .tekst-l, tekst-o en #getuigenissen tekst-o opgegeven eigenschappen, voor zover die hier niet worden veranderd.

Als je in de broncode kijkt, zul je de class "no-touch" niet vinden. Deze class wordt door het JavaScript modernizr toegevoegd aan <html> bij browsers, die touch events niet herkennen. In principe werkt deze regel daardoor alleen in browsers, die touch events niet herkennen. Dat zijn (meestal) desktopbrowsers.

Hoe dit verder precies werkt, staat bij Touchscreens herkennen met behulp van modernizr.

Om <html class="no-touch"> te kunnen zien in de broncode, moet je de gegenereerde code bekijken. In Firefox kan dat met behulp van bijvoorbeeld Firebug of Web Developer onder View Source → View Generated Source. Of met het in Firefox ingebouwde 'Element inspecteren'. Andere browsers hebben andere manieren om gegenereerde code te bekijken.

width: 400px;

Bij #getuigenissen tekst-o is aan deze span een breedte van 700 px gegeven. Hierdoor is er op touchscreens voldoende ruimte is om de tekst in twee kolommen weer te kunnen geven, zodat scrollen binnen een div niet nodig is. In desktopbrowsers werkt scrollen binnen een div prima, dus hoeft hier maar één kolom weer te worden gegeven, waarvoor 400 px voldoende is.

font-size: 1em;

Bij #getuigenissen tekst-o is aan deze span een lettergrootte van 0.9em gegeven, zodat op touchscreens de tekst te lezen is, zonder dat scrollen binnen een div nodig is. In desktopbrowsers werkt scrollen binnen 'n div prima, dus de letters mogen weer iets groter.

Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

-moz-column-count: auto; -webkit-column-count: auto; column-count: auto;

Hier staat in feite drie keer hetzelfde: column-count: auto;. Waarom dat zo is, staat bij De voorvoegsels -moz-, -ms-, -o- en -webkit-.

Bij #getuigenissen tekst-o is de tekst in twee kolommen gesplitst, zodat op touchscreens niet binnen een div gescrold hoeft te worden. Op desktopbrowsers werkt scrollen binnen een div prima, dus kan de tekst weer gewoon in één kolom worden weergegeven.

auto is de standaardinstelling en zal normaal genomen één kolom opleveren. Volgens de specificatie kun je ook het getal 1 opgeven. Dat had ik in eerste instantie ook gedaan, maar Opera slaat dan volledig op hol. auto werkt in alle browsers. Het is iets minder duidelijk dan het getal 1, maar werkt goed in alle browsers.

#getuigenissen span.tekst-o span.kopje

De spans met class="kopje" binnen de spans met class="tekst-o", die weer binnen het element met id="getuigenissen" staan. Dat is hier maar één span, waarbinnen het kopje boven de tekst staat.

Voor deze span gelden ook de bij .kopje opgegeven eigenschappen, voor zover die hier niet worden veranderd.

margin: 0 4px;

Omdat voor onder en links geen waarde is opgegeven, krijgen die automatisch dezelfde waarde als boven en rechts. Hier staat dus eigenlijk 0 4px 0 4px in de volgorde boven - rechts - onder - links.

Deze span met kopje staat binnen span#tekst-o. Bij .tekst, .tekst-o, .tekst-r, .tekst-l heeft #tekst-o met padding: 4px; een padding van 4 px gekregen.

Maar bij #getuigenissen .tekst-o wordt die voor deze specifieke span.tekst-o veranderd in padding: 4px 0;, omdat verschillende stukken tekst links en rechts een verschillende lege ruimte moeten krijgen. Als gevolg hiervan staat dit kopje nu tegen de zijkanten van tekst-o aan. Terwijl de kopjes bij alle andere tekst links en rechts wat ruimte hebben.

Door aan dit kopje een marge links en rechts te geven, krijg ik wat ruimte links en rechts, zonder dat dat andere delen van de tekst beïnvloedt.

.naam

De elementen met class="naam". Boven elke getuigenis staat de naam van een persoon. Die naam staat in een span met class="naam". (Terzijde: elke gelijkenis tussen voorletters en woonplaatsen van politici of advocaten en de hier gebruikte namen is puur toeval.)

display: block;

Van zichzelf is een span een inline-element. Door er een blok-element van te maken, kan ik padding net zo laten werken als bij een blok-element. Bovendien wordt een blok-element normaal genomen even breed als zijn ouder, dat is hier tekst-o. Hierdoor wordt ook de achtergrondkleur, die ik verderop aan deze spans geef, even breed als tekst-o.

padding: 2px 0 0 4px;

Boven en links een kleine padding, rechts en onder geen.

De padding links is gewoon voor wat afstand tussen tekst en buitenkant van de span. De padding aan de bovenkant is bedoeld om de achtergrondkleur iets boven de naam uit te laten komen.

font-style: italic;

Cursief.

font-size: 0.7em;

Tamelijk kleine letter. Dit is een van de dingen die ervoor zorgt dat de tekst uit 'Getuigenissen' op touchscreens volledig zichtbaar is. Dit voorkomt problemen met scrollen binnen een div. Op desktopbrowsers werkt dat scrollen prima, voor die browsers wordt gelijk hieronder de lettergrootte weer iets vergroot.

Een lettergrootte in em wordt altijd genomen ten opzichte van de ouder. Dat is hier tekst-o. Bij .naam + span gelijk hieronder wordt een lettergrootte van 0.8 em opgegeven. Die is ook ten opzichte van tekst-o. De tekst in de naam is dus iets kleiner dan de rest van de tekst.

line-height: 1.2em;

Bij div#getuigenissen is een tamelijk grote regelhoogte van 22 px opgegeven. Een regelhoogte wordt normaal genomen geërfd. Dat zou hier een veel te grote regelhoogte opleveren. 1,2 em is ongeveer de standaard-regelhoogte. Als eenheid gebruik ik em, zodat ook in Internet Explorer de regelhoogte mee verandert met de lettergrootte.

Als er een letterhoogte is opgegeven en ik geef een regelhoogte in em op, wordt de regelhoogte genomen ten opzichte van de lettergrootte. Hierboven is een lettergrootte van 0,8 em opgegeven. De regelhoogte van 1,2 em is dus automatisch ongeveer de standaard-regelhoogte die bij een lettergrootte van 0,8 em past.

.no-touch .naam

De elementen met class="naam" binnen een element met class="no-touch". Boven elke getuigenis staat de naam van een persoon. Die naam staat in een span met class="naam".

Als je in de broncode kijkt, zul je de class "no-touch" niet vinden. Deze class wordt door het JavaScript modernizr toegevoegd aan <html> bij browsers, die touch events niet herkennen. In principe werkt deze regel daardoor alleen in browsers, die touch events niet herkennen. Dat zijn (meestal) desktopbrowsers.

Hoe dit verder precies werkt, staat bij Touchscreens herkennen met behulp van modernizr.

Om <html class="no-touch"> te kunnen zien in de broncode, moet je de gegenereerde code bekijken. In Firefox kan dat met behulp van bijvoorbeeld Firebug of Web Developer onder View Source → View Generated Source. Of met het in Firefox ingebouwde 'Element inspecteren'. Andere browsers hebben andere manieren om gegenereerde code te bekijken.

font-size: 0.8em;

Hier gelijk boven is een lettergrootte van 0,7 em opgegeven, zodat de tekst in 'Getuigenissen' in z'n geheel is te zien. Dat is nodig, omdat scrollen binnen een div in oudere mobiele browsers problemen op kan leveren. In desktopbrowsers werkt scrollen prima, dus daar kan de letter iets groter zijn.

Als eenheid neem ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

.naam + span

De spans die gelijk volgen op de elementen met class="naam". In de spans met class="naam" staat de persoonsnaam. In de spans die daarop volgen, staat de bijbehorende tekst. Omdat per definitie (want dat heb ik zelf zo gedaan) de span met tekst volgt op de span met de naam, kan ik deze simpele selector gebruiken.

display: block;

Van zichzelf is een span een inline-element. Door er een blok-element van te maken, kan ik padding net zo laten werken als bij een blok-element. Bovendien wordt een blok-element normaal genomen even breed als zijn ouder, dat is hier tekst-o. Hierdoor wordt ook de achtergrondkleur, die ik verderop aan een aantal van deze spans geef, even breed als tekst-o.

padding: 0 4px 4px 20px;

Boven geen ruimte, rechts en onder 4 px ruimte, en links 20 px. Hierdoor springt de tekst aan de linkerkant iets in, terwijl eronder toch de achtergrondkleur staat die ik iets verderop aan een aantal van deze spans geef.

font-size: 0.8em;

Tamelijk kleine letter. Dit is een van de dingen die ervoor zorgt dat de tekst uit 'Getuigenissen' op touchscreens volledig zichtbaar is. Dit voorkomt mogelijke problemen in oudere mobiele browsers met scrollen binnen een div. Op desktopbrowsers werkt dat scrollen prima, voor die browsers wordt gelijk hieronder de lettergrootte weer iets vergroot.

Een lettergrootte in em wordt altijd genomen ten opzichte van de ouder. Dat is hier tekst-o. Bij .naam gelijk hierboven wordt een lettergrootte van 0,7 em opgegeven. Die lettergrootte is ook ten opzichte van tekst-o. De tekst hier is dus iets groter dan de tekst die wordt gebruikt voor de namen.

line-height: 1em;

Bij div#getuigenissen is een regelhoogte opgegeven van 22 px. Een regelhoogte wordt normaal genomen geërfd. Dat levert hier een regelhoogte op die te hoog is.

De standaard-regelhoogte is ongeveer 1,2 em. Hier wordt dus een tamelijk kleine regelhoogte opgegeven. Dit is een van de dingen die ervoor zorgt dat de tekst uit 'Getuigenissen' op touchscreens volledig zichtbaar is. Dit voorkomt mogelijke problemen in oudere mobiele browsers met scrollen binnen een div. Op desktopbrowsers werkt dat scrollen prima, voor die browsers wordt gelijk hieronder de regelhoogte weer iets vergroot.

Als er een letterhoogte is opgegeven en ik geef een regelhoogte in em op, wordt de regelhoogte genomen ten opzichte van de lettergrootte. Hierboven is een lettergrootte van 0,8 em opgegeven. De regelhoogte van 1 em is dus automatisch iets minder dan de standaard-regelhoogte die bij een lettergrootte van 0,8 em past.

.no-touch .naam + span

De spans die gelijk volgen op de elementen met class="naam" binnen een element met class="no-touch". In de spans met class="naam" staat de persoonsnaam. In de spans die daarop volgen, staat de bijbehorende tekst. Omdat per definitie (want dat heb ik zelf zo gedaan) de span met tekst volgt op de span met de naam, kan ik deze simpele selector gebruiken.

Als je in de broncode kijkt, zul je de class "no-touch" niet vinden. Deze class wordt door het JavaScript modernizr toegevoegd aan <html> bij browsers, die touch events niet herkennen. In principe werkt deze regel daardoor alleen in browsers, die touch events niet herkennen. Dat zijn (meestal) desktopbrowsers.

Hoe dit verder precies werkt, staat bij Touchscreens herkennen met behulp van modernizr.

Om <html class="no-touch"> te kunnen zien in de broncode, moet je de gegenereerde code bekijken. In Firefox kan dat met behulp van bijvoorbeeld Firebug of Web Developer onder View Source → View Generated Source. Of met het in Firefox ingebouwde 'Element inspecteren'. Andere browsers hebben andere manieren om gegenereerde code te bekijken.

font-size: 0.9em;

Hier gelijk boven is een lettergrootte van 0,8 em opgegeven, zodat de tekst in 'Getuigenissen' in z'n geheel is te zien. Dat is nodig, omdat scrollen binnen een div in oudere mobiele browsers problemen op kan leveren. In desktopbrowsers werkt scrollen prima, dus daar kan de letter iets groter zijn.

Als eenheid gebruik ik em, zodat ook gebruikers van Internet Explorer de lettergrootte kunnen veranderen.

line-height: 1.1em;

Hier gelijk boven is een regelhoogte van 1 em opgegeven, zodat de tekst in 'Getuigenissen' in z'n geheel is te zien. Dat is nodig, omdat scrollen binnen een div in oudere mobiele browsers problemen op kan leveren. In desktopbrowsers werkt scrollen prima, dus daar kan de regelhoogte iets groter zijn.

De standaardregelhoogte is ongeveer 1,2 em. Als er een letterhoogte is opgegeven en ik geef een regelhoogte in em op, wordt de regelhoogte genomen ten opzichte van de lettergrootte. Hierboven is een lettergrootte van 0,8 em opgegeven. De regelhoogte van 1,1 em is dus automatisch iets minder dan de standaard-regelhoogte die bij een lettergrootte van 0,9 em past, zodat er iets minder gescrold hoeft te worden.

Als eenheid gebruik ik em, zodat ook in Internet Explorer de regelhoogte mee verandert met de lettergrootte.

#getuigenissen .tekst-o > span:nth-child(4n), #getuigenissen .tekst-o > span:nth-child(4n+5)

Dit ziet er erger uit, dan het is. Stukje voor stukje is deze selector makkelijker te begrijpen, dan je op het eerste gezicht misschien zou zeggen.

Internet Explorer 7 en 8 kennen nth-child() niet, dus die negeren deze regel. Dat scheelt al, want deze twee groothandels in ellende kunnen ons feestje nu gelukkig niet verpesten.

We nemen eerst de eerste selector, het deel dat voor de komma staat. Dat maakt het gelijk de helft minder moeilijk. De tweede selector, het deel achter de komma, komt later.

De eerste selector stukje voor stukje:

#getuigenissen: het element met id="getuigenissen". Dat is de div waarbinnen alles staat dat met de knop 'Getuigenissen' te maken heeft.

.tekst-o: de elementen met class="tekst-o". Dat is er hier maar eentje: de span waarbinnen de tekst van de knop staat.

> slaan we even over.

span: alle spans die binnen #getuigenissen .tekst-o staan. De tekst bestaat uit ervaringen van verschillende gebruikers. Boven elke ervaring staat een naam. De namen en de ervaringen staan elk in een span. Er staat in tekst-o dus een serie spans met afwisselend een naam en een ervaring.

Nu wil ik de namen met bijbehorende ervaring afwisselend kleuren, zeg maar als een zebra. Ik kan dat met 'n hele serie classes doen, maar css3 heeft nieuwe selectors, waarmee hetzelfde kan zonder gebruik van classes. En hier komt :nth-child(4n) om de hoek kijken.

:nth-child() wil zeggen: het zoveelste kind. :nth-child() is een pseudo-class, net zoals bijvoorbeeld :link, :visited en :first-child. De werking is ook hetzelfde. Omdat deze pseudo-class op een span volgt, geldt hij voor spans. Net zoals :visited in a:visited voor de ervoor staande a geldt.

span:nth-child(): wil dus zeggen: een span die het zoveelste kind is. Het kind waarvan? Van z'n ouder. Je bent nou eenmaal altijd het kind van je ouder. (We gaan er voor het gemak even van uit dat de hele wereld alleen uit keurige gezinnetjes bestaat die nooit naar de buren en zo kijken.) In dit geval is die ouder span#tekst-o.

Het hoeveelste kind? Dat staat tussen de haakjes: :nth-child(4n).

4n dus. Ook dit lijkt mogelijk wat ingewikkelder dan het is.

De n is gewoon een teller. Hij begint met 0 en gaat steeds 1 omhoog, dus gewoon simpel 0 1 2 3 4 enz., tot er - in dit geval - gewoon geen spans meer zijn om te tellen.

De 4n betekent, net als in de wiskunde: 4 x n. De eerste keer is dat dus 4 x 0, dan 4 x 1, 4 x 2, enz. De uitkomst is gewoon de tafel van 4, maar dan beginnend met 4 x 0: 0 - 4 - 8 - 12 - 16 - 20 - enz., tot de spans op zijn er dus geen spans meer te tellen zijn.

span:nth-child(4n) betekent dus de span die het nulde kind is (en die dus niet bestaat), de span die het vierde kind is, de span die het achtste kind is, enz. En omdat 'n span altijd het kind is van z'n ouder, is dat hier het zoveelste kind van tekst-o:

<span class="tekst-o"> <span></span><span></span><span></span><span></span> <span></span><span></span><span></span><span></span> </span>

Dat zijn hierboven de rode spans. De zwarte spans zijn niet het vierde, achtste, enz. kind. De rode spans hierboven zijn het vierde en achtste kind en voldoen dus aan span:nth-child(4n).

De tekst bestaat uit afwisselend een span met een naam, een span met een ervaring, een span met een naam, een span met een ervaring, enz.:

1 naam
2 ervaring
3 naam
4 ervaring
5 naam
6 ervaring
7 naam
8 ervaring
enz.

De rode ervaringen hierboven voldoen aan span:nth-child(4n).

Deze selector geldt dus voor de tweede ervaring, de vierde ervaring, de zesde ervaring, enz.

Alleen is er een kleine complicatie: helemaal aan het begin van tekst-o staat nog 'n span met het kopje. De volgorde van de spans wordt daardoor:

1 kopje
2 naam
3 ervaring
4 naam
5 ervaring
6 naam
7 ervaring
8 naam
9 ervaring
enz.

De rode namen hierboven voldoen aan span:nth-child(4n). Door de extra span aan het begin, geldt deze selector dus niet voor de ervaringen, maar voor de namen van de personen.

De selector #getuigenissen .tekst-o span:nth-child(4n) wil dus zeggen: elke vierde span binnen .tekst-o, dat weer binnen #getuigenissen ligt.

Dat #getuigenissen is nodig, omdat .tekst-o vaker voorkomt en we niet elke vierde span binnen élke .tekst-o willen hebben, maar alleen die spans binnen #getuigenissen.

Nou doet er zich nog een klein probleem voor, en daar is de > voor. De afwisseling van spans met 'n naam en 'n ervaring is per definitie goed, want die heb ik zelf aangebracht. Er zijn geen namen met twee ervaringen of ervaringen met twee namen of zo.

Maar wat nu als er om een of andere reden spans genest worden? Iets als:

<span><span><span><span lang="en"></span></span></span></span>

Zelfs met vier vingers kun je al uittellen, dat de rode span ook 'n vierde kind is. En dus ook aan span:nth-child(4n) voldoet. Oeps. Dit is vooral geestig als je veel spans hebt en om een of andere reden veel later spans gaat invoegen. Dat levert de virtuele variant van de stoelendans op.

Dit kan worden voorkomen door het gebruik van >:

.tekst-o > span:nth-child(4n)

De > wil zeggen: de span moet een direct kind zijn van .tekst-o. Een span die binnen een andere span is genest, voldoet niet aan die voorwaarde, want die is een (klein)kind van die andere span en niet van .tekst-o.

De volledige selector nog een keer:

#getuigenissen .tekst-o > span:nth-child(4n)

Elke span die het het vierde, of een veelvoud van vier, directe kind is van .tekst-o dat weer binnen #getuigenissen ligt.

Dan is er nog de tweede selector, het deel na de komma:

#getuigenissen .tekst-o > span:nth-child(4n+5)

Deze werkt precies hetzelfde als de eerste, alleen wordt er anders geteld binnen de haakjes van :nth-child(). De berekening gaat weer precies hetzelfde: n is weer gewoon een teller, die van 0 naar omhoog telt:

4 x 0 + 5
4 x 1 + 5
4 x 2 + 5
Enz.

Volgens de regels van de rekenkunde wordt eerst de vermenigvuldiging uitgevoerd, en dat levert in plaats van de bovenstaande drie regels op:

0 + 5
4 + 5
8 + 5

Oftewel: de vijfde span, de negende span, de dertiende span, enz.

De vierde, achtste, twaalfde enz. span bevatten een naam, de vijfde, negende, dertiende enz. span een ervaring. Ik heb nu dus de tweede naam+ervaring, de vierde naam+ ervaring, de zesde naam+ ervaring, en de tussenliggende niet. Oftewel, als ik deze twee selectors (die voor en die na de komma) gebruik voor een achtergrondkleur, zoals ik gelijk hieronder doe, heb ik mijn zebra-effect:

Achtergrond getuigenissen heeft afwisselende kleur

background-color: rgba(200, 200, 200, 0.85);

Grijze enigszins doorzichtige achtergrond-kleur.

Hoe rgba() werkt, staat bij Meestal wordt voor 'n kleur... (Even daarboven staat een waarschuwing voor problemen in oudere browsers bij gebruik van rgba(). Die geldt hier niet, omdat de achtergrond hoe dan ook al is gekleurd, ook als rgba() niet zou worden herkend.)

@media screen and (min-width: 760px)

De css die hier tot nu toe staat, geldt voor alle browservensters, ook voor vensters smaller dan 760 px. De css die hieronder staat, geldt alleen voor browservensters breder dan 760 px.

@media: geeft aan dat het om css gaat, die alleen van toepassing is, als aan bepaalde voorwaarden wordt voldaan. Al langer bestond de mogelijkheid om met behulp van zo'n regel css voor bijvoorbeeld printers op te geven. css3 heeft dat uitgebreid tot bepaalde fysieke eigenschappen, zoals de breedte en hoogte van het venster van de browser.

screen: deze regel geldt alleen voor schermweergave. Het printen van deze pagina lijkt niet echt heel zinvol.

and: er komt nog een voorwaarde, waar aan moet worden voldaan.

(min-width: 760px): het browservenster moet minstens 760 px breed zijn. Is het venster smaller, dan wordt de css die binnen deze media-regel staat genegeerd.

Gelijk na deze regel komt een { te staan, en aan het einde van de css die binnen deze regel valt een bijbehorende afsluitende }. Die zijn in de regel hierboven weggevallen, maar het geheel ziet er zo uit:

@media screen and (min-width: 760px) { smal-venster {display: none;} }

Voor de eerste css binnen deze media-regel staat dus een extra {, en aan het eind staat een extra }.

Internet Explorer 7 en 8 kennen @media niet, daarvoor komt later aparte css. Je kunt eventueel ook JavaScript gebruiken om deze browsers ook @media te laten herkennen, maar in dit geval is dit simpeler op te lossen. Als je JavaScript wilt gebruiken, kun je op de pagina met links scripts vinden onder CSS → Bugs en hacks → Dingen mogelijk maken specifiek voor Internet Explorer.

#smal-venster

Het element met id="smal-venster". Dit is een <p> waarbinnen een waarschuwing staat dat deze pagina niet goed te zien is in vensters smaller dan 760 px.

display: none;

Melding verbergen. In vensters breder dan 760 px werkt de pagina goed en is de melding dus overbodig.

Speciaal voor Internet Explorer 7 en 8

<!--[if lt IE 9]> <style> h1, #content div, #hotspots img, .kopje {behavior: url(099-files/pie.htc);} sup, .noot sup {font-size: 0.8em;} #kuil, #zadelveer, #middelvinger {display: none;} #ventiel:focus #kuil, #ventiel:hover #kuil, #zadel:focus #zadelveer, #zadel:hover #zadelveer, #achterlicht:focus #middelvinger, #achterlicht:hover #middelvinger {display: block;} #achterlicht:focus .gif, #achterlicht:hover .gif {background: url(099-pics/achtergrond-2.png);} #neusfilter .extra-pic {filter: progid:DXImageTransform.Microsoft.Matrix( M11=-1.00000000, M12=-0.00000000, M21=0.00000000, M22=-1.00000000, sizingMethod='auto expand');} </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 die uit de algemene stylesheet dan in principe overrulen.

Dit stukje geldt voor versies ouder dan Internet Explorer 9 (lt IE 9 betekent less than, kleiner dan, Internet Explorer 9), maar je kunt het ook voor andere versies aangeven. Het kopje 'Speciaal voor Internet Explorer 7 en 8' is dus eigenlijk niet juist, want dit geldt ook voor Internet Explorer 6 en eerder. Maar op die browser test ik niet meer, vandaar dat ik alleen Internet Explorer 7 en 8 noem.

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

<!--[if lt IE ]> <link rel="stylesheet" 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 versies van Internet Explorer ouder dan versie 9 in. De css voor Internet Explorer komt dan apart in die stylesheet te staan, zodat het de andere browsers niet stoort.

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

In html5 is type="text/css" niet meer nodig bij een stylesheet, omdat dit de standaardinstelling is.

.no-touch #smal-venster

Het element met id="smal-venster" binnen een element met class="no-touch".

Als je in de broncode kijkt, zul je de class "no-touch" niet vinden. Deze class wordt door het JavaScript modernizr toegevoegd aan <html> bij browsers, die touch events niet herkennen. In principe werkt deze regel daardoor alleen in browsers, die touch events niet herkennen. Dat zijn (meestal) mobiele browsers.

Hoe dit verder precies werkt, staat bij Touchscreens herkennen met behulp van modernizr.

Om <html class="no-touch"> te kunnen zien in de broncode, moet je de gegenereerde code bekijken. In Firefox kan dat met behulp van bijvoorbeeld Firebug of Web Developer onder View Source → View Generated Source. Of met het in Firefox ingebouwde 'Element inspecteren'. Andere browsers hebben andere manieren om gegenereerde code te bekijken.

display: none;

Binnen #smal-venster staat een waarschuwing dat deze pagina niet goed werkt in smalle vensters. In vensters breder dan 760 px moet deze worden verborgen. In elke échte browser gebeurt dit bij @media screen and (min-width: 760px), maar deze fröbelbrowsers kunnen niet met @media uit de voeten.

Daarom wordt deze waarschuwing in deze browsers gewoon altijd verborgen, maar alleen bij browsers die touch events niet herkennen. Dat zullen normaal genomen desktopbrowsers zijn.

Als een mobiele versie van Internet Explorer 7 of 8 wel met @media uit de voeten kan, wordt de waarschuwing bij @media screen and (min-width: 760px) verborgen. Als dat niet zo is, wordt in de mobiele versie de waarschuwing gewoon niet verborgen, onafhankelijk van de breedte van het venster. Ook geen probleem: oude mobiele versies van Internet Explorer 7 en 8 op een breedbeeldscherm zullen heel, heel, heel erg zeldzaam zijn.

h1, #content div, #hotspots img, .kopje

De <h1>'s, de divs binnen het element met id="content", de afbeeldingen binnen het element met id="hotspots" en de elementen met class="kopje".

Dit is een aantal van de elementen die in alle fatsoenlijke browsers ronde hoeken krijgen. Omdat Microsoft dit pas in Internet Explorer 9 voor elkaar wist te krijgen, moeten oudere versies hulpmiddelen gebruiken die vriendelijke zielen gratis ter beschikking stellen. Iets wat voor Microsoft kennelijk te moeilijk was.

Ook met deze hulpmiddelen lukt het niet overal ronde hoeken te geven, waar andere browsers die wel hebben, omdat regelmatig hoveren niet blijkt te werken in combinatie met ronde hoeken. Waar de ronde hoeken missen, staat aangegeven bij Bekende problemen.

behavior: url(099-files/pie.htc);

Internet Explorer 7 en 8 kennen border-radius niet. Door gebruik te maken van een zogenaamde behavior, kunnen we deze fossielen zover krijgen dat ze het wel herkennen. Een behavior kan worden gebruikt om bepaalde code als het ware te importeren binnen een pagina. Dat is hier het bestand met de naam pie.htc.

Hoewel het bestand wordt aangeroepen vanuit de css, moet een pad worden opgegeven ten opzichte van het html-bestand, waarin het wordt gebruikt. Dit is dus anders dan bij bijvoorbeeld een achtergrond-afbeelding, waar het pad moet worden opgegeven ten opzichte van het css-bestand. Waarom Microsoft dit zo afwijkend en verwarrend heeft geïmplementeerd, weet ik ook niet.

In pie.htc staat JavaScript. Deze JavaScript stuurt weer VML (Vector Markup Language) aan, een taal die alleen werkt in Internet Explorer. Alle andere browsers gebruiken voor soortgelijke doeleinden de standaardtaal SVG (Scalable Vector Graphics). (Internet Explorer 9 maakt eindelijk ook een eerste begin met de ondersteuning van SVG).

Met behulp van VML worden de ronde hoeken weergegeven. Een uiterst omslachtige methode. En dat zie je ook: in eerste instantie worden de ronde hoeken gewoon rechthoekig op het scherm gezet. Pas na het laden en verwerken van pie.htc worden de hoeken alsnog afgerond.

pie.htc is te downloaden vanaf css3pie.com.

sup, .noot sup

De elementen <sup>. Na de komma staat in feite nog 'ns dezelfde selector, maar nu voor de <sup>'s die binnen een element met class="noot" zitten.

Bij sup en .noot sup geef ik een kleinere letter op, maar die is voor Internet Explorer 7 en 8 om een of andere reden té klein. Dat corrigeer ik hier.

De eerste selector sup 'wint' van de eerder bij sup opgegeven lettergrootte, omdat hij later in de css staat.

Maar ik geef ook nog een lettergrootte op bij .noot sup, en daarvan kan sup nooit 'winnen'. .noot sup heeft meer specificiteit, meer gewicht, dan alleen sup, omdat het 'n class meer heeft. Ook al staat deze regel later in de css, .noot sup 'wint' toch. Daarom gebruik ik ook hier nog 'ns de selector .noot sup. En omdat die evenveel specificiteit heeft als de eerdere .noot sup, maar wel later in de css staat, 'wint' deze selector wel van de eerdere.

font-size: 0.8em;

Iets kleinere letter. Als eenheid neem ik em, zodat de gebruikers van Internet Explorer 7 en 8 de lettergrootte kunnen veranderen.

#zadelveer

Het element met id="zadelveer". In deze span staat de tweede afbeelding die opent als over het zadel wordt gehoverd. Deze is met opacity volledig doorzichtig en dus onzichtbaar gemaakt in de algemene css, tot hij moet verschijnen. Maar Internet Explorer 7 en 8 kennen dit niet. Ze hebben wel een eigen manier om iets doorzichtig te maken, maar dat levert problemen op in combinatie met hoveren. Daarom geef ik deze twee ellende-pukkels wat eigen css, die zelfs de broddelwerkjes van Microsoft kunnen begrijpen.

display: none;

Verberg de spans en dus de erin zittende achtergrond-afbeelding.

#zadel:focus #zadelveer, #zadel:hover #zadelveer

Als het element met id="zadel" focus heeft, of als ik daarover hover, doe dan iets met het daarin zittende element met id="zadelveer". #zadel is de div die bij het zadel hoort, #zadelveer is de span waarin de tweede afbeelding staat die wordt geopend, als over het zadel wordt gehoverd.

display: block;

Hier gelijk boven is span#zadelveer met display: none; onzichtbaar gemaakt. Hier maak ik hem weer zichtbaar, en dus de erin zittende achtergrond-afbeelding.

Hoewel :focus niet werkt in Internet Explorer 7, kan het geen kwaad dit te combineren voor Internet Explorer 7 en 8. Internet Explorer 7 negeert de selector met :focus gewoon.

#achterlicht:focus .gif, #achterlicht:hover .gif

Doe iets met de elementen met class="gif" die binnen het element met id="achterlicht" zitten, maar alleen als dat element focus heeft, of als erover wordt gehoverd.

#achterlicht is de div die bij het achterlicht hoort, .gif is de span waarin de achtergrond-afbeelding zit die bij hoveren over div#achterlicht, of als deze div focus heeft, wordt getoond.

background: url(099-pics/achtergrond-2.png);

In de algemene css krijgt deze span twee achtergrond-afbeeldingen. css3 biedt daar de mogelijkheid voor. Dat heeft op Internet Explorer 7 en 8 ongeveer hetzelfde effect als wanneer een kleuter gelijktijdig Sinterklaas en de Kerstman ziet: ze verstarren en doen helemaal niets meer. Ze tonen gewoon helemaal geen achtergrond-afbeelding. Noppes. Nada.

Daarom vervang ik de algemene css met twee achtergrond-afbeeldingen hier door één achtergrond-afbeelding. Dat kunnen deze technische hoogstandjes nog net behappen.

In Internet Explorer 7 en 8 wordt daarom wel het achterlichtje getoond, maar de tweede afbeelding met de flonkerende sterren ontbreekt.

Hoewel :focus niet werkt in Internet Explorer 7, kan het geen kwaad dit te combineren voor Internet Explorer 7 en 8. Internet Explorer 7 negeert de selector met :focus gewoon.

#neusfilter .extra-pic

De elementen met class="extra-pic" binnen het element met id="neusfilter". Dit is de span waarbinnen de achtergrond-afbeelding zit, die moet worden getoond bij hoveren over de knop 'Filterus Nasus'.

filter:progid:DXImageTransform.Microsoft.Matrix(M11=-1.00000000, M12=-0.00000000, M21=0.00000000, M22=-1.00000000, sizingMethod='auto expand');

Deze afbeelding moet ondersteboven worden neergezet. Alle andere browsers doen dat met het uiterst leesbare transform: rotate(180deg);, maar de bouwers van Internet Explorer wilden graag laten zien dat ze Grieks met een Russisch accent kenden en bedachten bovenstaande formule.

Gelukkig kan transform: rotate(180deg) automatisch worden vertaald naar de gruwelijkheid hierboven op www.boogdesign.com/examples/transforms/matrix-calculator. Je voert daar gewoon het aantal graden en zo in, en de formule komt er kant-en-klaar uitrollen.

Special voor Internet Explorer 7

<!--[if IE 7]> <style> #content p {border-width: 1px 1px;} #content p span {line-height: 1.5em;} .tekst, .tekst-o, .tekst-r, .tekst-l, #zadelveer span, div#toebehoren, div#getuigenissen, #rij span, .extra {background-color: white;} .noot {line-height: 1.2em;} .lijn {margin-bottom: -3px;} sup {vertical-align: top;} #rij span {right: 40px;} #rij .extra {width: 513px;} </style> <![endif]-->

Deze code geldt alleen voor Internet Explorer 7. Uitleg zie bij Speciaal voor Internet Explorer 7 en 8.

#content p span

Spans die binnen een paragraaf staan, die weer binnen het element met id="content" staan. Dat is hier alleen de span waarin de kleine tekst boven de afbeelding staat.

line-height: 1.5em;

Om een of andere reden wordt de regelhoogte te laag, daarom wordt die hier iets grote gemaakt dan de standaard-regelhoogte van ongeveer 1.2 em. Als eenheid neem ik em, zodat ook bij deze prehistorische browser de regelhoogte zich aanpast aan een eventuele andere lettergrootte.

.tekst, .tekst-o, .tekst-r, .tekst-l, #zadelveer span, div#toebehoren, div#getuigenissen, #rij span, .extra

Dit zijn alle elementen die in de algemene css een doorzichtige achtergrondkleur krijgen. In al die gevallen is eerst een normale achtergrondkleur opgegeven. Die bestemd is voor Internet Explorer 7 en 8, omdat die de doorzichtige achtergrondkleur niet kennen. Dit is uitgebreider beschreven bij background-color white;.

Internet Explorer 7 zou de doorzichtige kleur moeten negeren en gewoon de normale gebruiken, maar dat lukt 't kreng niet. Hij laat gewoon vrolijk de hele achtergrondkleur weg. Daarom wordt hier voor al die elementen nogmaals een achtergrondkleur opgegeven, zonder die doorzichtige zelfs maar te noemen, want daar raakt dit overgevoelige zieltje kennelijk van over z'n toeren.

background-color: white;

Witte achtergrondkleur.

.lijn

De elementen met class="lijn". Sommige noten worden van de tekst erboven gescheiden door een lijn. Voor die lijnen zorgen spans met deze class.

margin-bottom: -3px;

In de algemene css is aan de onderkant een marge van 3 px gegeven. Bij Internet Explorer 7 moet onderaan juist een negatieve marge van 3 px worden gegeven. Dit trekt de noten onder de lijn 3 px naar boven. Zonder deze negatieve marge ontstaat een kier tussen de lijn en de eronder staande noten.

#rij span

De spans binnen het element met id="rij".

right: 40px;

De bij #rij span in de algemene css opgegeven right: -20px; levert hier een verkeerde positie op. Met 40 px staan de knoppen wel goed.

#rij .extra

De elementen met class="extra" binnen het element met id="rij". Dit zijn de spans, waarin de teksten staan die bij de knoppen onder 'Toebehoren' horen.

width: 513px;

Bij #rij .extra hebben deze spans een breedte van 510 px gekregen. Daarmee staat in deze browser de tekst links niet helemaal gelijk met de linkerkant van de grote afbeelding met de fiets. Met deze breedte wel.

Touchscreens herkennen met behulp van modernizr

Op touchscreens wordt bovenin een extra knopje met 'Sluit pop-up' getoond, zodat duidelijk is hoe de pop-ups gesloten kunnen worden.

Omdat oudere mobiele browsers moeite hebben met het scrollen binnen een div, zoals gebeurt bij de tekst onder 'Getuigenissen', moet die tekst in mobiele browsers breder worden weergegeven, zodat scrollen niet nodig is.

Het zou handig zijn, als je vast zou kunnen stellen of de pagina met een touchscreen of met een desktopbrowser wordt bekeken.

Hier ontstaat echter een probleem. Er is geen betrouwbare methode om te testen welke browser je site bezoekt. Vroeger moest dat noodgedwongen vanwege alle fouten en afwijkingen in browsers voor de desktop, en zelfs met 'n heel beperkt aantal browsers ging dat heel vaak mis. (Als je zoekt op 'browser sniffing' kun je, als je van griezelverhalen houdt, je hart ophalen.)

Voor mobiel bestaan veel meer browsers dan voor de desktop. Bovendien is het aantal resoluties vrijwel onbeperkt. En dan hebben de diverse apparaten ook nog 'ns hun specifieke eigenaardigheden en bugs. Op de desktop is een monitor gewoon een monitor, op mobiele apparaten ligt dat anders. Kortom: het is onbegonnen werk om op een betrouwbare manier te kijken, welk apparaat, welke versie van een besturingssysteem en welke browser iemand gebruikt. Je gaat gegarandeerd goed werkende browsers behandelen alsof ze problemen geven, en - erger - browsers met problemen alsof ze goed werken.

Dat was 'n inleiding om vrolijk van te worden: grote problemen en geen oplossing, want browser sniffing werkt niet betrouwbaar.

Er zijn mogelijkheden om op de server te kijken, of de site wordt bezocht door een mobiele browser of door een desktopbrowser, en afhankelijk daarvan een pagina voor mobiel of voor de desktop te sturen. Maar dan zit je in feite met twee (of nog meer) verschillende pagina's. Op de pagina met links vind je onder Mobiele apparatuur → Validators, snelheid testen, browser sniffing, e.d. links naar sites die hier bij kunnen helpen.

In dit voorbeeld wordt van één pagina uitgegaan. Om toch verschil te kunnen maken tussen mobiele browsers en browsers voor de desktop, wordt gekeken of de browser 'touch events' herkent. (Hartelijke verontschuldigingen en zo, maar er bestaan gewoon geen gangbare Nederlandse woorden voor dit soort Engelse termen. Bij 'aanrakings-evenement' denk ik persoonlijk niet direct aan een browser, en bij 'aanrakings-belevenis' ga ik echt aan héle andere dingen denken, die ik liever privé houd.)

Een browser die touch events herkent, zal in de regel een mobiele browser zijn. Een browser die touch events niet herkent, zal in de regel een desktopbrowser zijn. Als een desktopbrowser ten onrechte voor een mobiele browser wordt aangezien, is dat niet zo'n ramp. Alles werkt en ziet er goed uit en zo, alleen zit er 'n extra knopje.

Als een mobiele browser voor een desktopbrowser wordt aangezien, is dat ook geen ramp: alleen het extra knopje mist.

Een echt waterdichte oplossing is er niet voor deze herkenning. Browser sniffing is onbetrouwbaar, en bij detectie op de server zit je met meerdere pagina's. Er wordt wel gewerkt aan dit probleem, en in css4 is het mogelijk opgelost, maar dat is voorlopig nog (verre) toekomstmuziek.

Het testen op het al dan niet herkennen van touch events gebeurt met behulp van een JavaScript: modernizr . Dit is een hele kleine JavaScript-bibliotheek die kan testen of een browser bepaalde mogelijkheden wel of niet heeft. Het gaat dan vooral om css3- en html5-mogelijkheden, maar ook testen op touch events kan.

Op de site van modernizr kun je aangeven, waarop je wilt testen. Er wordt dan een script op maat gemaakt, zodat het zo klein mogelijk is. Dit script test vervolgens of een browser iets wel of niet kan. Afhankelijk daarvan wordt aan de tag <html> een bepaalde class toegevoegd. In het geval van touch events is die class 'touch' of 'no-touch'. Dit geeft de mogelijkheid om, zonder verder JavaScript of zo nodig te hebben, aparte css te schrijven voor touchscreens en voor andere schermen.

css voor touchscreens laat je gewoon voorafgaan door .touch, en css voor andere schermen door .no-touch. Omdat in <html> één van deze twee aanwezig is, hoef je de selectors voor touchscreens alleen maar met .touch te beginnen, en die voor andere schermen met .no-touch. css die voor alle schermen hetzelfde is, laat je gewoon niet beginnen met .touch of .no-touch, zodat het op alle schermen werkt.

In de download zit het gebruikte JavaScript bijgesloten als touch.js. Het is belangrijk zelf een nieuw script aan te maken op de site van modernizr, want dit soort scripts wordt voortdurend bijgewerkt. Het script dat is bijgesloten in de download kan inmiddels zijn verouderd.

Het JavaScript kun je aanmaken op modernizr.com/download. Om touch events te kunnen detecteren, heb ik daar onder Misc. 'Touch Events' aangevinkt. Verder moet je, om classes bij <html> aan te laten maken, onder 'Extra' nog aanvinken 'Add CSS Classes'.

Na het aanvinken van wat je in het JavaScript wilt hebben, klik je op de knop 'GENERATE!' Gelijk onder die knop staat nu het JavaScript. Dat is heel compact, tenzij je gelijk eronder een vinkje zet bij 'Don't Minify Source'. Ik heb daar geen vinkje gezet, want ik ga niets aan dit JavaScript veranderen, dus ik vind het prima als het script zo klein mogelijk is, ook al wordt het daar volstrekt onleesbaar door.

Het gegenereerde JavaScript kopieer je en plak je op de plaats waar het script moet komen te staan. Op mijn site bijvoorbeeld is dat in de folder 'js'.

Dit JavaScript wordt gelijk onder de link naar de style in de <head> gezet:

<script src="pad-en-naam.js"></script>

(In html5 is het type niet meer nodig bij een script, omdat standaard van JavaScript wordt uitgegaan.)

Aan de tag <html> voeg je de classnaam 'no-js' toe:

<html lang="nl" class="no-js">

Aan no-js worden door modernizr één of meer andere andere classes toegevoegd, afhankelijk van waarop wordt getest. In het geval van testen op touch events wordt er touch (aanwezig) of no-touch (niet aanwezig) toegevoegd. En no-js wordt altijd vervangen door js.

Altijd? Nee. Niet als JavaScript uitstaat, want dan werkt modernizr niet. Dat is een zwak punt van modernizr: het werkt niet als JavaScript ontbreekt of uitstaat. Maar in de praktijk vallen de beperkingen hiervan erg mee. Bovendien heb je ook nog de mogelijkheid om no‑js in de selector te verwerken. no-js wordt immers alleen door js vervangen als JavaScript aanstaat. Dit geeft de mogelijkheid afwijkende css te geven als JavaScript uitstaat.

Op deze pagina wordt JavaScript op geen enkele manier voor essentiële dingen gebruikt. Als JavaScript uitstaat, is het enige gevolg dat je in desktopbrowsers een extra sluitknop ziet, en dat de tekst met getuigenissen in twee kolommen wordt weergegeven.

Als modernizr goed is geïnstalleerd, zou je in de broncode bij <html> het volgende moeten zien:

<html lang="nl" class=" js no-touch">

of

<html lang="nl" class=" js touch">

Maar als je nu spoorslags in de broncode gaat controleren of dit klopt, zul je zien dat dit niet zo is. Als je gewoon de broncode bekijkt, zie je precies wat daar staat: de broncode. En daarin staat <html lang="nl" class="no-js">, dus dat zie je.

Wat je wilt zien, is de door JavaScript gegenereerde code. Die kun je in Firefox zien met behulp van bijvoorbeeld de extensie Firebug. Of met de extensie Web Developer onder View source → View Generated Source. Of met het in Firefox ingebouwde 'Element inspecteren'. Andere browsers hebben soortgelijke mogelijkheden om gegenereerde code te bekijken.

De code aanpassen aan je eigen ontwerp

Toegankelijkheid en zoekmachines

Eventuele opmerkingen specifiek voor dit voorbeeld staan bij Opmerkingen.

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:

Specifiek voor dit voorbeeld

Afhankelijk van de instellingen en het gebruikte programma, zal een screenreader en dergelijke alle tekst uit de pop-ups achter elkaar oplezen, of juist (vrijwel) geen tekst voorlezen, omdat vaak wordt gewerkt met display: none;. De hier gebruikte technieken zijn dan ook absoluut ongeschikt voor screenreaders en dergelijke.

Zonder css is alleen de holistobiel zelf te zien. Alle andere afbeeldingen blijven weg, omdat dat achtergrond-afbeeldingen zijn. De teksten worden als één lange tekst achter elkaar gezet. Op z'n zachtst gezegd is dat niet echt ideaal. Zonder css werkt dit dus feitelijk niet.

Zonder afbeeldingen werkt alles in principe wel, maar je ziet de gele cirkels vrijwel niet. En als je ze wel zou zien, zijn ze zonder de bijbehorende afbeelding vrijwel nutteloos. Maar goed, de pop-up-venstertjes met de teksten verschijnen keurig. En met een andere achtergrondkleur voor de pagina zouden de gele cirkels zichtbaar zijn te krijgen.

Getest in

Laatst gecontroleerd op 1 februari 2012.

Onder dit kopje staat alleen maar, hoe en waarin is getest. Eventuele problemen, ook die met betrekking tot zoomen en lettergroottes, staan hieronder bij Bekende problemen. Het is belangrijk dat te lezen, want uit een test kan ook prima blijken dat iets totaal niet werkt!

Eventuele opmerkingen over de toegankelijkheid specifiek voor dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Dit voorbeeld is getest op de volgende systemen:

Er is steeds getest met de laatste versie van de browsers op de hierboven genoemde controledatum, 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 resoluties groter dan 800x600 is ook in- en uitzoomen en - voor zover de browser dat kan - een kleinere en grotere letter getest. Er is ingezoomd en vergroot tot zover de browser kan, maar niet verder dan tot 200%.

Er is getest met behulp van muis en toetsenbord, behalve op de iPad en Android, waar een touchscreen is gebruikt.

Naast deze 'gewone' browsers is ook getest in Lynx, WebbIE, NVDA 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. NVDA 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 specifiek voor dit voorbeeld staan onderaan Toegankelijkheid en zoekmachines onder het kopje Specifiek voor dit voorbeeld.

Alleen op de hierboven genoemde systemen en browsers is getest. Er is dus niet getest op bijvoorbeeld 'n Blackberry. De kans is (heel erg) groot dat dit voorbeeld niet (volledig) werkt op niet-geteste systemen en apparaten. Om het wel (volledig) werkend te krijgen, zul je vaak (kleine) wijzigingen en/of (kleine) aanvullingen moeten aanbrengen, bijvoorbeeld met JavaScript.

Er is ook geen enkele garantie dat iets werkt in een andere tablet of smartphone dan hierboven genoemd, omdat fabrikanten in principe de software kunnen veranderen. Dit is anders dan op de desktop, waar browsers altijd (vrijwel) hetzelfde werken, zelfs op verschillende besturingssystemen. Iets wat in Android browser werkt, zal in de regel overal werken in die browser, maar een garantie is er niet. De enige garantie is het daadwerkelijk testen op een fysiek apparaat. En aangezien er duizenden mobiele apparaten zijn, is daar eigenlijk geen beginnen aan.

De html is gevalideerd met de validator van w3c, de css ook. Als om een of andere reden niet volledig gevalideerd kon worden, wordt dat bij Bekende problemen vermeld.

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!)

Bekende problemen

Waarop en hoe is getest, kun je gelijk hierboven vinden bij Getest in.

Internet Explorer 7, 8 en 9

Internet Explorer 7 en 8

Mogelijk zouden meer dingen werken of beter werken in deze browsers, als je gebruik maakt van allerlei JavaScript-oplossingen. Dat heb ik verder niet geprobeerd. Op de pagina met links staan onder CSS → Bugs en hacks links naar allerlei bibliotheken en dergelijke op dit gebied.

Internet Explorer 9

De cursor verandert niet in een yinyang-teken. Dit komt door het aangeven van hotspots, daardoor wordt de aangepaste cursor volledig genegeerd. Zie verder bij cursor.

Internet Explorer 8

Als de div die bij het zadel heeft focus heeft, blijven tekst en afbeelding geopend. Als je, terwijl dat zo is, over 'Toebehoren' hovert, zou de knop boven de afbeelding moeten komen te staan. Dat is niet zo. Ik heb 'n tijdje geprobeerd dat in orde te krijgen, maar dat lukte niet op enigszins simpele wijze. Omdat het verder niet zo belangrijk is en zich alleen voordoet als het zadel focus heeft én je gelijktijdig over 'Toebehoren' hovert, laat ik het gewoon zo.

Internet Explorer 7

Opera op Windows, OSX en Linux en Opera Mobile op de iPad

Opera Mini op de iPad en in Android 2.3.6

Vensters smaller dan 760 px

Deze pagina is niet geschikt voor smalle vensters, omdat je dan niet meer alles kunt zien. Als je de pagina gaat verkleinen, wat zou kunnen, kun je niet meer goed kiezen wat je wilt zien. Door de grootte van de afbeelding werkt dit gewoon niet in smallere vensters.

Valideren

Zoomen

Inzoomen (vergroten) is mogelijk tot 200%. Zowel bij gebruik van de Tab-toets als bij hoveren zijn de delen die niet meer in het venster van de browser passen, te bereiken met behulp van de pijltjestoetsen. Ik zal niet zeggen dat het echt lekker werkt, maar het kan. En ik neem aan dat mensen die zo veel vergroten de werking van deze toetsen wel kennen, want dit zal niet de enige afbeelding zijn die dan niet meer volledig in het venster past.

En bij veel inzoomen past op kleinere schermen de afbeelding natuurlijk op 'n gegeven moment gewoon niet meer op het scherm, waardoor sommige teksten gedeeltelijk buiten het venster van de browser kunnen komen te vallen.

Firefox, Opera en Internet Explorer 9 laten bij sterk inzoomen de waarschuwing voor smalle schermen zien met de tekst, dat de pagina niet goed is te zien. Omdat dit alleen gebeurt als de pagina inderdaad niet meer goed te zien is, omdat door het zoomen delen buiten het venster zijn komen te staan, is dit geen probleem.

Firefox en Safari:

Als de tekst wordt vergroot, komt de tekst buiten de knoppen te staan. Bij meer dan 170% vergroten worden de woorden moeilijk leesbaar. Bij zoomen speelt dit niet.

Wijzigingen

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

:

Nieuw opgenomen.

19 augustus 2012: