Thumbnail collage

Kies 5 afbeeldingen uit, en maak 5 thumbnails van deze afbeeldingen.

Groepeer de afbeeldingen met de volgende HTML-code:

<img src="thumb1.jpg" width="80" height="56">
<img src="thumb2.jpg" width="80" height="56">
<img src="thumb3.jpg" width="80" height="56">
<BR> 
<img src="thumb4.jpg" width="80" height="56">
<img src="thumb5.jpg" width="80" height="56">
<img src="thumb1.jpg" width="80" height="56">

 

* * *

Als je geen ruimte tussen de fotootjes wilt hebben, maak er dan een tabel van. Hieronder de code voor de tabel:

<table align="center" cellpadding="0" cellspacing="0"> <tr> <td><img src="thumb1.jpg" width="80" height="56" border="0"></td> <td><img src="thumb2.jpg" width="80" height="56" border="0"></td> <td><img src="thumb3.jpg" width="80" height="56" border="0"></td> </tr> <tr> <td><img src="thumb4.jpg" width="80" height="56" border="0"></td> <td><img src="thumb5.jpg" width="80" height="56" border="0"></td> <td><img src="thumb1.jpg" width="80" height="56" border="0"></td> </tr> </table>

* * *

Om de thumbnails aanklikbaar maken, kun je de volgende code (= 1 lange regel) voor elke image tag plakken:

<A HREF="#" onClick="docWindow=window.open('image1.jpg','myWindow1','toolbar=no,width=325,height=250, left=10,top=10 directories=no,status=yes,scrollbars=no,resizable=no,menubar=no');docWindow.focus();return false"> </a>

Hieronder de volledige code voor de tabel met aanklikbare thumbnails:

<table border="0" align="center" cellpadding="0" cellspacing="0"> <!-- 1 --> <tr> <td><A HREF="#" onClick="docWindow=window.open('image1.jpg','myWindow1','toolbar=no,width=325,height=250, left=30,top=30 directories=no,status=yes,scrollbars=no,resizable=no,menubar=no');docWindow.focus();return false"> <img src="thumb1.jpg" width="80" height="56" border="0" target="_top"></a></td> <!-- 2 --> <td><A HREF="#" onClick="docWindow=window.open('image2.jpg','myWindow2','toolbar=no,width=325,height=250,directories=no,status=yes,scrollbars=no,resizable=no,menubar=no');docWindow.focus();return false"> <img src="thumb2.jpg" width="80" height="56" border="0" target="_top"></a></td> <!-- 3 --> <td><A HREF="#" onClick="docWindow=window.open('image3.jpg','myWindow3','toolbar=no,width=325,height=250,directories=no,status=yes,scrollbars=no,resizable=no,menubar=no');docWindow.focus();return false"> <img src="thumb3.jpg" width="80" height="56" border="0" target="_top"></a></td> </tr> <tr> <!-- 4 --> <td><A HREF="#" onClick="docWindow=window.open('image4.jpg','myWindow4','toolbar=no,width=325,height=250,directories=no,status=yes,scrollbars=no,resizable=no,menubar=no');docWindow.focus();return false"> <img src="thumb4.jpg" width="80" height="56" border="0" target="_top"></a></td> <!-- 5 --> <td><A HREF="#" onClick="docWindow=window.open('image5.jpg','myWindow5','toolbar=no,width=325,height=250,directories=no,status=yes,scrollbars=no,resizable=no,menubar=no');docWindow.focus();return false"> <img src="thumb5.jpg" width="80" height="56" border="0" target="_top"></a></td> <!-- 6 --> <td><A HREF="#" onClick="docWindow=window.open('image1.jpg','myWindow1','toolbar=no,width=325,height=250,directories=no,status=yes,scrollbars=no,resizable=no,menubar=no');docWindow.focus();return false"> <img src="thumb1.jpg" width="80" height="56" border="0" target="_top"></a></td> </tr> </table>

De codes zijn van Mandarin Design

 

---

Zie ook mijn andere tutorial over thumbnails.

Met Easy Thumbnails van Fookes Software kun je op een makkelijke manier thumbnails maken. Je kunt het gratis programmaatje hier downloaden.

 

Start | Tutorials | Korte Lesjes | CSS | Fonts | Filters | Links | Allerlei | Zoeken | PSP-varia | P-Filiaal