thumbnails9

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 9

Wegens de afmetingen staat het voorbeeld op een andere pagina

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

<div id="container">
<div id="header"><br/><h3>Hier plaats je jouw tekst of afbeelding</h3></div>
<div id="links">
<div id="inhoudlinks">
<div id="blok1">
<h3>fotogalerij pagina 1</h3>
<a href="#" onmouseover="toon(1)"><img id="link1" class="thumb" src="foto1.jpg" style="border:2px solid #ff0000" alt="" /></a>
<a href="#" onmouseover="toon(2)"><img id="link2" class="thumb" src="foto2.jpg"  alt="" /></a>
<a href="#" onmouseover="toon(3)"><img id="link3" class="thumb" src="foto3.jpg" alt="" /></a>
<a href="#" onmouseover="toon(4)"><img id="link4" class="thumb" src="foto4.jpg" alt="" /></a>
<a href="#" onmouseover="toon(5)"><img id="link5" class="thumb" src="foto5.jpg" alt="" /></a>
<a href="#" onmouseover="toon(6)"><img id="link6" class="thumb" src="foto1.jpg" alt="" /></a>
<a href="#" onmouseover="toon(7)"><img id="link7" class="thumb" src="foto2.jpg" alt="" /></a>
<a href="#" onmouseover="toon(8)"><img id="link8" class="thumb" src="foto3.jpg" alt="" /></a>
<a href="#" onmouseover="toon(9)"><img id="link9" class="thumb" src="foto4.jpg" alt="" /></a>
<a href="#" onmouseover="toon(10)"><img id="link10" class="thumb" src="foto5.jpg" alt="" /></a>

<a href="#" onclick="volgende(1,2)"><img style="border:0px;" src="pright.gif" alt="volgende" /></a>
</div>
<div id="blok2">
<h3>fotogalerij pagina 2</h3>
<a href="#" onmouseover="toon(11)"><img id="link11" class="thumb" src="foto1.jpg" alt="" /></a>
<a href="#" onmouseover="toon(12)"><img id="link12" class="thumb" src="foto2.jpg"  alt="" /></a>
<a href="#" onmouseover="toon(13)"><img id="link13" class="thumb" src="foto3.jpg" alt="" /></a>
<a href="#" onmouseover="toon(14)"><img id="link14" class="thumb" src="foto4.jpg" alt="" /></a>
<a href="#" onmouseover="toon(15)"><img id="link15" class="thumb" src="foto5.jpg" alt="" /></a>
<a href="#" onmouseover="toon(16)"><img id="link16" class="thumb" src="foto1.jpg" alt="" /></a>
<a href="#" onmouseover="toon(17)"><img id="link17" class="thumb" src="foto2.jpg" alt="" /></a>
<a href="#" onmouseover="toon(18)"><img id="link18" class="thumb" src="foto3.jpg" alt="" /></a>
<a href="#" onmouseover="toon(19)"><img id="link19" class="thumb" src="foto4.jpg" alt="" /></a>
<a href="#" onmouseover="toon(20)"><img id="link20" class="thumb" src="foto5.jpg" alt="" /></a>

<a href="#" onclick="vorige(1,2)"><img style="border:0px;" src="pleft.gif" alt="vorige" /></a>
<a href="#" onclick="volgende(2,3)"><img style="border:0px;" src="pright.gif" alt="volgende" /></a>
</div>
<div id="blok3">
<h3>fotogalerij pagina 3</h3>
<a href="#" onmouseover="toon(21)"><img id="link21" class="thumb" src="foto1.jpg" alt="" /></a>
<a href="#" onmouseover="toon(22)"><img id="link22" class="thumb" src="foto2.jpg"  alt="" /></a>

<div id="rechts">
<div id="fotorechts">
<img id="venster" class="groot" src="foto1.jpg" alt="" /><br/>
<div id="bijschrift">Commentaar bij foto 1</div>
</div></div></div>

3. Download thumbnails9.css en plaats dit bestand in dezelfde map.

4. Download thumbnails9.js en plaats dit bestand in dezelfde map.

Instructies:
Het bestand 'thumbnails9.css' hoeft niet geopend te worden, tenzij je de afmetingen of gebruikte kleuren wenst te wijzigen.
Het bestand 'thumbnails9.js' moet je wel openen want daarin moet je de de verwijzing naar de foto's opnemen (om ze voor te laden) en de commentaren bij de foto's schrijven.
De pijltjes maak je zelf, of je kopieert deze afbeeldingen:

Dit script werd gemaakt door Mongrove

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