Simpele foto gallery
Hier volgt een voorbeeld van een simpele fotogallery. Deze is eenvoudig in te passen in een web pagina. Met de layout van de tabel zijn veel varianten mogelijk.
|
|
||
|
|||
|
|||
|
|
|
|
Hier volgt de code die nodig is om tot deze tabel te komen.
<style type="text/css">
<!--
table.galery { border: none; }
table.galery td { border: 1px solid black; }
table.galery img { width: 100px; height: 75px; vertical-align: middle; padding: 1px; margin: 1px; }
table.galery img.big { width: 320px; height: 240px; }
-->
</style>
<script type="text/javascript">
function ShowImage(Thumb)
{
var BigImage = document.getElementById('gallery_big');
BigImage.src = Thumb.src;
}
</script>
<table class="galery">
<tr>
<td colspan="3" rowspan="3">
<img src="pict1.jpg" class="big" id="gallery_big" />
</td>
<td>
<img src="pict1.jpg" onmouseover="javascript:ShowImage(this);"/>
</td>
</tr><tr>
<td>
<img src="pict2.jpg" onmouseover="javascript:ShowImage(this);"/>
</td>
</tr><tr>
<td>
<img src="pict3.jpg" onmouseover="javascript:ShowImage(this);"/>
</td>
</tr>
<tr>
<td>
<img src="pict4.jpg" onmouseover="javascript:ShowImage(this);"/>
</td>
<td>
<img src="pict5.jpg" onmouseover="javascript:ShowImage(this);"/>
</td>
<td>
<img src="pict6.jpg" onmouseover="javascript:ShowImage(this);"/>
</td>
<td>
<img src="pict7.jpg" onmouseover="javascript:ShowImage(this);"/>
</td>
</tr>
</table>