Voorbeeld #1 :
pop-up met commentaar door gebruik van javascript
Werkwijze
Stap 1: Download onderstaand javascript bestand.
popup.js){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
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 |