Wanneer u foto's op het web wilt presenteren zijn daar meerdere oplossingen voor in de vorm van web album generators. Deze genereren alle html bestanden en de foto directories die u dan kunt uploaden naar uw website. Wanneer u zelf een beetje creatief bent kunt u de foto's ook op een wat creatievere wijze op een internet pagina zetten. In dit geval ga ik er even van uit dat de foto's niet te groot worden weergegeven om de pagina wel een beetje snel te maken.

Om de foto's geschikt te maken voor het web dient u ze eerst te verkleinen. Dit kunt u doen met bijvoorbeeld Photoshop maar ook PragtFotoManager (te downloaden op deze site) kan dit snel en gemakkelijk voor u doen. Wanneer u de foto's in een apart mapje verkleint heeft kunt u ze hernoemen zodat ze in de pagina op een vaste plaats staan. Een suggestie voor dit script is pict1.jpg tot en met pict9.jpg. U kunt de plaatjes in dezelfde directory zetten als het album. Download de album html code vanaf deze pagina en zet dit in dezelfde directory. Wanneer u dan deze pagina opent ziet u het album al staan. U kunt dan zelf tekst toevoegen en de kleuren en layout aanpassen aan de rest van uw site en uw album is gereed.

Ik heb twee varianten gemaakt, u kunt met dezelfde code ook nog andere varianten bedenken. Het principe werk zo dat aan elke foto een mousover event gekoppeld is die de foto kopieert in het object van de grote foto. Een klein stukje javascript voert dit uit. Het verkleinen van de foto gebeurd door de stylesheet. Ik ga hier uit van foto's met het formaat 320 x 240 wat voor het web nog een acceptabel resultaat geeft.

De foto's worden bij het laden van de pagina al van de webserver gehaald en door met de muis over een thumbnail te gaan zal de grote foto worden weergegeven in het grote venster. Op deze wijze is het mogelijk snel een set foto's te bekijken zonder teveel klikken en wachten op het laden van de foto.

De hier voorgestelde code werkt zowel in Internet Explorer als in Mozilla browsers.

Voorbeeld 1

Voorbeeld 2

Uitleg

De truc is vrij eenvoudig, door middel van een aantal css2 regels kunt u de vormgeving van het album instellen en tevens de grootte van de thumbnails en de foto.

<style type="text/css">
<!--
table.galery { 
  border: none; 
  background-color: #ffffff; 
}

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 { 
  border-color: #000000; 
  width: 320px; 
  height: 240px; 
}
-->
</style>

<img src="images/pict3.jpg" onmouseover="javascript:ShowImage(this);"/>

<script type="text/javascript">
// --------------------------------------
// Expand and show a image © H.M. Pragt 2006
// --------------------------------------
function ShowImage(Thumb)
{
var BigImage = document.getElementById('gallery_big');
  BigImage.src = Thumb.src;
}
</script>