</body>
Pop-up met commentaar

Voorbeeld #1 :

pop-up met commentaar door gebruik van javascript


Werkende demo

Klik op ��n van de foto's

 



Werkwijze

Stap 1: Download onderstaand javascript bestand.

 popup.js


Stap 2: Plaats onderstaande code tussen <head> en </head>

<script type="text/javascript" src="popup.js"></script>


Stap 3: Plaats onderstaande code tussen <body> en </body> op de plaats waar je de thumbnail (verkleinde foto) wil tonen.

<a href="javascript:Foto('benaming_foto.jpg','<div align=left><font face=arial color=#FFFFFF>schrijf hier je commentaar over de foto</font></div>')" />
<img src="benaming_foto.jpg" width="100" height="66" border="0"></a>

De rode tekst moet je zelf nog aanpassen.
De groene tekst kan je eventueel nog aanpassen.

Herhaal stap 3 voor elke nieuwe foto.


Stap 4: Upload alle bestanden naar je webserver.
Foto's, html bestand en het javascript popup.js


Configuratie van het javascript popup.js:

Je kan eventueel aanpassingen aanbrengen aan het javascript popup.js.

Opgelet:
Wijzig ENKEL de groene tekst en laat de rest zoals het is of je javascript werkt niet meer.
Heb je wijzigingen aangebracht, bewaar het bestand dan terug als popup.js

Open het bestand popup.js in bv. kladblok.

Je krijgt nu de volgende code te zien:

<!--
function Foto(img,txt){
foto1= new Image();
foto1.src=(img);
CheckFoto(img,txt);
}
function CheckFoto(img,txt){
if((foto1.width!=0)&&(foto1.height!=0)){
viewFoto(img,txt);
}
else{
uitvoering="CheckFoto('"+img+"','"+txt+"')";
interval=setTimeout(uitvoering,20);
}
}
function viewFoto(img,txt){
imgbreedte=(foto1.width+20);
imghoogte=(foto1.height+100); //hier vul je de hoogte in van je tekstbalkje. LET OP is wel voor alle foto's even groot dan.
if (!txt) (txt=img)
vars="width="+imgbreedte+",height="+imghoogte+",left=" +((screen.width-imgbreedte)/2)+",top=" +((screen.height-imghoogte)/2) +"toolbar=no,location=no,directories=no,status=yes,menubar=no, scrollbars=no,copyhistory=0,resizable=0";
newwindow=window.open("","nieuwvenster",vars);
newwindow.document.write("<html>\n<head>\n<title>Fotoboek</title>\n"); //vul hier de titel in voor de browser balk
newwindow.document.write("<meta http-equiv=\"imagetoolbar\" content=\"no\">\n");
newwindow.document.write("</head>\n\n<body bgcolor=\"#666666\" marginwidth=\"0\" marginheight=\"0\">\n"); //vul hier de achtergrondkleur in

newwindow.document.write("<div align=\"center\"><img src=\""+img+"\" border=\"0\" onclick=\"javascript:window.close()\"><div align=\"/center\">\n");
newwindow.document.write(txt+"\n");
newwindow.document.write("</body>\n</html>\n");
newwindow.document.focus();
newwindow.document.close();
}
// einde script -->


OVERWEEG EEN DONATIE
Ben je tevreden over de gegeven informatie dan kan je als blijk van waardering voor de aangeboden hulp steeds een donatie overwegen. Dit om de aangeboden hulp ook in de toekomst te kunnen blijven garanderen.
Alvast bedankt.
Webmaster