Thumbnails 1

JavaScripts knippen en plakken

Op deze website vind je javascripts die je door eenvoudig knippen en plakken aan jouw site kunt toevoegen.

Home CSS DHTML Forum E-mail Sitezoeker Links

THUMBNAILS 1

Als antwoord op een vaak terugkerende vraag.

Hoe vergroot ik een kleine afbeelding?

De 'grote' afbeelding is het origineel.

De 'thumbnail' is de verkleinde weergave.

De tekst bij de foto's is optioneel.

1. Kopieer deze code en plaats ze in het HEAD-gedeelte van je pagina :

<style type='text/css'>
.plaatje
{
	position:absolute;
	top:200;
	left:328;
	visibility:hidden;
}
</style>
<script type="text/javascript">

var AfbeeldingenArray = new Array()
AfbeeldingenArray[0]='f1'
AfbeeldingenArray[1]='f2'
AfbeeldingenArray[2]='f3'
AfbeeldingenArray[3]='f4'
AfbeeldingenArray[4]='f5'
var AantalAfbeeldingen=AfbeeldingenArray.length

function Toon(dezeAfbeelding){AllesVerbergen();tonen(dezeAfbeelding)}
function Verberg(dezeAfbeelding){AllesVerbergen();}

</script>

2. Kopieer deze code en plaats ze in het BODY-gedeelte van je pagina :

<div id="f1" class="plaatje">
	<img src="../pics/foto1.jpg" onload="Toon('f1')"><br>
	<center>Als antwoord op een vaak terugkerende vraag.</center>
</div>

<div id="f2" class="plaatje">
	<img src="../pics/foto2.jpg"><br>
	<center>Deze tekst hoort bij foto2.</center>
</div>

<div id="f3" class="plaatje">
	<img src="../pics/foto3.jpg"><br>
	<center>Een tekst bij foto 3.</center>
</div>

<div id="f4" class="plaatje">
	<img src="../pics/foto4.jpg"><br>
	<center>Uitleg bij foto 4.</center>
</div>

<div id="f5" class="plaatje">
	<img src="../pics/foto5.jpg"><br>
	<center>Deze tekst en uitleg hoort bij foto 5.</center>
</div>

Aangebrachte verbeteringen:
10.11.2010: Een extra mogelijkheid toegevoegd: onmouseover="Toon('f1') onmouseout="Verberg()"
10.11.2010: In plaats van enkel in IE en NS werkt dit script nu in alle moderne browsers.

Copyright: Het internet is van iedereen, de volledige inhoud van deze site kan door iedereen vrij gebruikt worden.