Voorbeeld #6 :
pop-up die "geprojecteerd" wordt op donkere achtergrond,
door gebruik van javascript
Werkende demo
Klik op ��n van de foto's
Werkwijze
Stap 1: Download onderstaand javascript, CSS en png en gif bestanden.
Opmerking: om de CSS, png en gif bestanden te downloaden, klik met de rechtermuisknop op het bestand en neem "bewaar bestand als".
popupbox.js
popupbox.css
overlay.png
blank.gif
loading.gif
close.gif
Stap 2: Plaats onderstaande code tussen <head> en </head>
<link rel="stylesheet"
href="popupbox.css" type="text/css"
media="screen" />
<script type="text/javascript" src="popupbox.js"></script>
Stap 3: Plaats onderstaande code tussen <body> en </body> op de plaats waar je de thumbnail (verkleinde foto) wil tonen.
<a href="benaming_foto.jpg"
rel="popupbox" title="Foto - commentaar">
<img src="benaming_foto.jpg"
align=0 border="0" width="66"
height="100"></a>
De rode tekst moet je zelf nog aanpassen.
Herhaal stap 3 voor elke nieuwe foto.
Stap 4:
Upload alle bestanden naar je webserver.
Foto's, html bestand, het javascript
popupbox.js, het CSS bestand popupbox.css en
de bestanden overlay.png, blank.gif,
loading.gif en close.gif.
Configuratie van de javascripts.
Je moet GEEN aanpassingen aanbrengen aan het javascripts popupbox.js bestand.
Configuratie van het CSS bestand popupbox.css
Je kan eventueel aanpassingen aanbrengen aan het popupbox.css bestand<./p>
Opgelet:
Wijzig ENKEL de groene tekst en laat de rest zoals het is.
Heb je wijzigingen aangebracht, bewaar het bestand dan terug als popupbox.css
Open het bestand popupbox.css in bv. kladblok.
Je krijgt nu de volgende code te zien:
#popupbox{
background-color:#666666;
padding: 10px;
border-top: 2px solid #d1cfd0;
border-bottom: 2px solid #d1cfd0;
border-left: 2px solid #d1cfd0;
border-right: 2px solid #d1cfd0;
}
#popupboxDetails{
font-family: arial;
font-size: 0.8em;
padding-top: 0.4em;
}
#popupboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }
#popupbox img{ border: none; clear: both;}
#overlay img{ border: none; }
#overlay{ background-image:
url(overlay.png); }
* html #overlay{{
background-color: #333333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png",
sizingMethod="scale");
}}
|
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 |