__
.
DNS4 
«

CSS
Basic light box

Ga met je muis over het
plaatje van de Hummer

hummer verkleining

De aller simpelste vorm van een lightbox
is het tonen van een plaatje als je een
mouse-over doet. Dit voorbeeld is zo
eenvoudig dat een blik in de bron-code
van deze pagina (rechtermuis: openen
broncode) alle duidelijkheid geeft. Het
kleine beetje css-code om de positie
en decoratie van het grotere plaatje
te regelen staat in deze tekst-file
die de inhoud van lightbox.css weer-
geeft die op deze pagina gebruikt wordt.

Het regeltje met de div: id="light" en
class="box_basic", bevat het grote plaatje.
Doordat in de css -display:none;- als
eigenschap is meegegeven, is het plaatje
onzichtbaar maar wel degelijk al geladen
op de pagina. Een onmouseover op het kleine
plaatje resulteert in een -.style.display='block'-
voor deze div. Resultaat is dat het grote
plaatje er in een flits staat.
onmouseout zet het plaatje weer terug naar:
.style.display='none'. Elegant en heel makkelijk.

hummer

De titel van deze pagina is: 'basic lightbox css en php script'.
De sleutelwoorden zijn : lightbox, css, php en script.
De omschrijving is: 'dit is de absolute basic versie van een css lightbox'.