Afbeelding

Pakistan is getroffen door een immense ramp. Veel mensen, waaronder ikzelf, willen wel de bevolking helpen, maar zijn bang de mega-salarissen van grote organisaties, de taliban of de Pakistaanse regering te steunen. Je zou ervoor kunnen kiezen om wat geld te doneren aan een kleinere organisatie, waarbij bovenstaande gevaren niet spelen, zoals Gender Concerns International.
Giro 15 83 698 t.n.v. Gender Concerns International, Den Haag. Meer info:

Op deze pagina vind je alles waarbij de afbeelding het belangrijkste is. Omdat er te veel over afbeeldingen kwam voor één scherm, heb ik het menu over afbeeldingen gesplitst in verschillende submenu's. Deze pagina is alleen 'n ingang naar die verschillende submenu's.

Afbeeldingen is een breed begrip: er vallen feitelijk ook (verkleurende) knoppen en dergelijke uit een menu onder, maar die staan bij menu. Hier staan alleen dingen die op een of andere manier met grotere afbeeldingen te maken hebben.

Je kunt 'n submenu bezoeken door op een van de kopjes in de tekst hieronder te klikken, of op een van de grote witte knoppen. Als je 'n submenu nog niet hebt bezocht, is het kopje zwart en staat er 'n zwart vraagteken op de witte knop. Na bezoek is de kop paars en staat er 'n groen vinkje op de witte knop.

Afbeelding - Thumbnails

Kleine afbeeldingen die op een of andere manier een bijbehorende grote afbeelding openen.

Afbeelding - Verbergen

Op een of andere manier 'n afbeelding (tijdelijk) (on)zichtbaar maken.

Afbeelding - Imagemap

De afbeelding is op een of andere manier in grotere of kleinere stukken verdeeld. Bij hoveren over een bepaald stukje opent een pop-up met bijvoorbeeld een vergroting of achtergrondtekst, of er gebeurt een soortgelijke actie.

De grens tussen een imagemap en een afbeelding waar 'n menu onder zit is nogal vaag. Dat soort menu's vind je bij Menu - Afbeelding.

Afbeelding - Veranderen

Afbeeldingen die op een of andere manier (tijdelijk) vervangen kunnen worden door een andere afbeelding.

Afbeelding - Slideshow

Een serie foto's die met behulp van hoveren, toetsen, de muis of op 'n andere manier één voor één verschijnt.

Afbeelding - Video

Alles wat op een of andere manier met video te maken heeft.

Afbeelding - Overig

Alles wat niet in een van de andere onderdelen past. Preloaden.

Over de site

Alle voorbeelden zijn te downloaden als zip-bestand. De zip bevat de code van het werkende voorbeeld met alle gebruikte plaatjes en dergelijke, zodat het gedownloade voorbeeld precies hetzelfde is als dat op de site. Verder zit er een uitgebreide uitleg in pdf-formaat bij.

Hoe je het voorbeeld precies kunt aanpassen verschilt van model tot model en zal meestal enig denkwerk vereisen. Als je met dit soort modellen wilt werken en je wilt die aanpassen, is het beslist nodig dat je je 'n beetje verdiept in (x)html en css.

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

Omdat ik wilde dat alles ook te zien is op een 800x600-scherm, staan de pop-ups voor een groter scherm niet optimaal. Als je voor zo'n klein scherm scrollen geen probleem vindt, kan dit dus beter.

Problemen worden steeds bij het voorbeeld zelf vermeld.

De voorbeelden zijn bedoeld om te laten zien wat de mogelijkheden van css zijn. Je kunt ze (volledig) aanpassen aan je eigen smaak en wensen. Laat je dus niet afschrikken door de door mij gebruikte kleuren, maten, en dergelijke.

Bij elk voorbeeld staat onder het kopje Getest in waar het voorbeeld in is getest. In principe is alles op deze site getest in de nieuwste versies van Firefox, Opera, Safari, Google Chrome en Internet Explorer in de resoluties 800x600, 1024x768 en 1280x1024. In de resoluties 1024x768 en 1280x1024 is ook in- en uitzoomen en een kleinere en grotere letter getest. Eventuele problemen staan bij Bekende problemen bij het betreffende voorbeeld.

Er is steeds getest met de laatste versies van de genoemde browsers, omdat ik geen zin heb om rekening te houden met mensen die met zwaar verouderde browsers surfen. Dat is trouwens vragen om ellende, want updates van browsers hebben heel vaak met beveiligingsproblemen te maken. Het gaat dan om de nieuwste versies op de datum van testen. Die datum staat er altijd bij.

Hier is één uitzondering op: door het fantastische beleid van Microsoft zit de wereld nog jaren opgescheept met de zwaar verouderde Internet Explorer 6 en 7. Op Internet Explorer 6 test ik niet meer. Oudere voorbeelden zijn vaak nog wel getest in deze onveilige browser. Op Internet Explorer 7 test ik (voorlopig) nog wel. Onder Getest in staat bij elk voorbeeld, waarin precies is getest.

Naast deze 'gewone' browsers is alles ook getest in Lynx, WebbIE, Fangs Screen Reader Emulator, WebFormator en/of Jaws. 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. Fangs Screen Reader Emulator is een extensie bij Firefox die de pagina laat zien zoals een screenreader hem ziet. WebFormator is een uitbreiding bij Internet Explorer, die hetzelfde doet als Fangs. Jaws is een echte screenreader, zoals blinden die gebruiken.

Om allerlei redenen is het niet goed mogelijk alles in elk van die programma's te testen. Maar in principe zijn dingen goed toegankelijk als ze in een aantal van de genoemde progamma's goed werken. Dan zijn ze dus ook goed toegankelijk voor zoekmachines, want een zoekmachine is redelijk te vergelijken met een blinde. Waar precies in is getest, staat bij de voorbeelden onder Getest in. Eventuele problemen staan weer onder Bekende problemen bij de voorbeelden.

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. De voorbeelden zijn alleen getest in de in het voorbeeld 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!)

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:

Voor screenreaders: hieronder staan alleen nog grafische links. Deze stonden ook al als gewone link in de tekst hierboven. Verder lezen heeft dus geen nut.
Video ? Video
Overig (preloaden) ? Overig
(preloaden)