Erg mooi script waarmee je foto's via een thumbnail kunt selecteren om de originele grootte te laten zien ( met fade-effect ) Als een foto geselecteerd is, kun je op het plaatje klikken om vervolgens een url te openen ( met target bepaling )
<script language="JavaScript" type="text/javascript"> // hieronder de namen en de url van de afbeeldingen wijzigen var afbeeldingen=new Array() afbeeldingen[0]=["1.gif", "http://www.leejoo.nl"] // "naam van de foto", "hyperlink" afbeeldingen[1]=["2.gif", "http://www.leejoo.nl"] afbeeldingen[2]=["3.gif", "http://www.leejoo.nl"] afbeeldingen[3]=["4.gif", "http://www.leejoo.nl"] afbeeldingen[4]=["5.gif", "http://www.leejoo.nl"] var voorladen="ja" // ja of nee var optlinktarget="_blank" // hier kun je de target invullen var beeldrandbreedte=1 // breedte rand voor plaatjes var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)" // hieronder niets meer wijzigen if (voorladen=="ja"){ for (x=0; x<afbeeldingen.length; x++){ var ditbeeldje=new Image() ditbeeldje.src=afbeeldingen[x][0]}} function beeldcode(dezeafbeelding){ var beeldhtml="" if (dezeafbeelding[1]!="") beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">' beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">' if (dezeafbeelding[1]!="") beeldhtml+='</a>' return beeldhtml} function wijzigbeeld(beeldplaatsing, beeldindex){ if (document.getElementById){ var imgobj=document.getElementById(beeldplaatsing) if (imgobj.filters && window.createPopup){ imgobj.style.filter=filterstring imgobj.filters[0].Apply()} imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex]) if (imgobj.filters && window.createPopup) imgobj.filters[0].Play() return false}} </script>
<center> <a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 0)"> <img src="1.gif" width= 40 height=30 border=0></a> <a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)"> <img src="2.gif" width= 40 height=30 border=0></a> <a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)"> <img src="3.gif" width= 40 height=30 border=0></a> <a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)"> <img src="4.gif" width= 40 height=30 border=0></a> <a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)"> <img src="5.gif" width= 40 height=30 border=0></a> </center> <center> <div id="beeldplaatsing" style="width:140px;height:120px"></div> <!-- Hoogte en breedte van deze DIV-tag instellen op de grootste afbeelding --> <!-- Plaatsen waar je wilt dat de foto's verschijnen. --> </center>
© www.leejoo.nl
