CSS_thumbnail

Thumbnail - CSS en javascript
Deze thumbnail-presentatie is een combinatie van CSS en javascript. Als je op de thumbnail (het kleine plaatje links) klikt, krijg je rechts de grote afbeelding te zien.
Ik heb drie grote afbeeldingen gebruikt en drie miniatuur-plaatjes. Je kunt natuurlijk zoveel afbeeldingen gebruiken als je wilt.

De code hieronder kun je in z'n geheel selecteren, kopiëren, in een HTML-pagina plakken en daarna in de browser bekijken.

<html> <head> <style> body { background-color:#000000; color:#E27907; font-family:Verdana,Arial; font-size:10pt; letter-spacing:2; } .thumbNormal { border:4px solid #000000; } .thumbSelected { border:4px solid #ff0000; } </style> <script language=javascript> var lastID = 0; function SelectImg(id) { if (lastID > 0) { document.getElementById(lastID).className = "thumbNormal"; } document.getElementById(id).className = "thumbSelected"; document.getElementById(0).src = document.getElementById(id).src; lastID = id; } function LoadTrigger() { SelectImg(1); } window.onload = LoadTrigger; </script> </head> <body> Click a photo on the left to view full size. <table border=0> <tr> <td valign=top> <img id=1 class="thumbNormal" src="tomatengr.jpg" width=115 onclick="SelectImg(1)"> <br><img id=2 class="thumbNormal" src="sinasgr.jpg" width=115 onclick="SelectImg(2)"> <br><img id=3 class="thumbNormal" src="kiwigr.jpg" width=115 onclick="SelectImg(3)"> </td> <td width=15> </td> <td valign=top> <img id=0 src=""> </td> </tr> </table> </body> </html>

De code is van Troy Wolf

Hou er rekening mee dat webpagina's met CSS-stijlen niet door alle browsers op dezelfde manier worden weergegeven.

Zie ook mijn andere tutorial over aanklikbare thumbnails.

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