Er is geen CSS ondersteuning.
Crossbrowser, valide css en html5 zijn de eigenschappen van deze pagina. De javascript-code is overigens ook foutloos. Als je het nog niet gedaan had: klik even op een van de thumbnails en houd de linker-muisknop ingedrukt. Zoals je ziet is de thumbnail traploos uitvergroot op het scherm. Als je de muis niet bewogen hebt en je laat de knop weer los dan zal de afbeelding weer traploos verkleinen naar zijn "thumbnail-formaat". Als je de muis beweegt als het grote plaatje op het scherm staat, zal het plaatje net zolang blijven staan tot je er op klikt.
Het is maar een heel klein beetje bron-code, maar je moet wel heel nauwkeurig werken om alles "aan de praat te krijgen". Het stukje javascript dat onderaan de pagina staat, moet je kopieren naar dezelfde plaats (helemaal onderin de body) in jouw pagina. De bron-code van de drie plaatjes (de regels met onclick onmouseup etc. etc.) kopieer je naar een plaats in de body waar je het effect wilt hebben. vergeet niet het plaatje te kopieren; anders werkt het voorbeeld niet.
Het is wel belangrijk om te weten dat de thumbnail niets anders is dan het kleiner geschaalde origineel. Het is natuurlijk ook mogelijk om een kleine afbeelding te vergroten naar een willekeurige grote afmeting (er zijn hier geen limieten voor), maar de kwaliteit zal nou niet om over naar huis te schrijven zijn.
Het stukje javascript kan je naar jouw eigen smaak aanpassen. Op dit moment staat de code afgesteld op 640 x 480. Kijk even in de broncode en merk op dat de getalletjes 640,480,64 en 48 zijn. Het script werkt met een 1:10 verhouding van het plaatje. Als je (b.v.) een plaatje van 1024 x 768 op het scherm wilt zetten, moet je uitgaan van een thumbnail van 102 x 76. Verander de getalletjes in de code, en het nieuwe formaat is van kracht. Dus: alle 640's worden 1024, de 480's worden 768, de 64's verander je in 102 en tot slot de 48's in 76.
Hetzelfde geldt voor de getalletjes van de code die de plaatjes daadwerkelijk op het scherm zet. Verander die op exact dezelfde wijze zoals je dat in het script hebt gedaan.
Zoals gewoonlijk geef ik een hele werkende pagina als voorbeeld. De broncode van de thumbnail zoom vind je achter de link. Let er nog even op dat elk plaatje zijn eigen z-index en id heeft. De z-index bepaalt de prioriteit van het plaatje. Als je dit niet goed doet dan kan de (zichtbare) volgorde in de war raken. Verander de volgorde van z-index:3 :2 :1 maar eens in :1 :2 :3, dan zie je wat ik bedoel. De id's zijn nodig om er voor te zorgen dat het script weet welk plaatje hij moet bewerken. Zorg er voor dat b.v. de letters "aa" van het id (in dit voorbeeld) op de hele regel, consequent, zijn ingevuld. Het volgende nieuwe plaatje zal dus op de hele regel "dd" zijn (onclick="zoom('64','48','dd','out')" etc.etc.).
cache 26-04-2010