vergrootglas effect
een javascript loep-effect

home | index | menu | help

Er is geen CSS ondersteuning.



		

opgelet! de laatste versie (update mozilla4 en IE9) van dit script
staat op http://kompoos.nl/javascripts/image-effects/image-magnifier.html

		
		
		
		
		
		
		
		
		
		
		

		
		
		
		

Het vergrootglas-effect (magnifier-effect) hoef je niets aan in te stellen. Download de hele pagina naar jouw webruimte of gebruik het script, de css en de div (class="loep") van het vergrootglas-script op elke pagina die je maar wilt.

Er zitten interessante dingen in de procedure. Eerst even de basis-gegevens. In de div (loep) kan je 2 plaatjes ingeven. Als je (voor alletwee) hetzelfde plaatje gebruikt, zal de loep normaal functioneren. Als je het 2e plaatje een hires-versie van de eerste maakt (net zoals op deze pagina), kan je een ongelooflijk scherpe en nauwkeurige zoom op het scherm toveren. Met als prettige bijkomstigheid dat het "zware" plaatje pas ingeladen wordt als de bezoeker daadwerkelijk zijn muis over het plaatje beweegt (zeer prettig voor de bandbreedte). Een ander voorbeeld is om het eerste plaatje zwart-wit te maken en het andere plaatje in kleur te zetten. Een heel erg gaaf effect. Verzin zelf maar een variant voor de "magnifier".

Als je met de muis op het plaatje staat en je beweegt de muis (met ingedrukte linker-knop) naar links of naar rechts, dan vergroot (of verklein) je het kader van het vergrootglas. Met ingedrukte linker-knop omhoog, of omlaag, vergroot of verminder je de "zoom-factor". De code van het vergrootglas-script is hier te downloaden. Voor het overige heb ik nog te melden dat het javascript (volgens JSLint) foutloos is en de pagina html5 valideert en cross-browser is.

cache 08-05-2011