Spesso capita, entrando in un sito, di vedere un’immagine di apertura (di solito una pubblicità) su sfondo opaco.
L’effetto è ottenuto tramite uno script JavaScript chiamato Lightbox che permette proprio di sovrapporre un’immagine alla pagina.
Lo stesso effetto viene usato anche per la visualizzazione di una galleria di foto.
Di seguito è riportato il codice html per ottenere un’immagine sovrapposta alla pagina, visibile all’apertura della pagina.
L’effetto sarà simile a questo.
Ecco la pagina di prova index.html:
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”<html><head><title>Titolo</title><meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″><link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen”></head><body><div><a id=”first” href=”images/prova.gif” rel=”lightbox[roadtrip]” ><img src=”images/prova.gif” alt=”” width=”1″ height=”1″ title=”prova”></a></div></body></html>
L’immagine sovrapposta è prova.gif che deve essere presente nella pagina, ma non visibile. Per questo le dimensioni sono impostate ad 1 pixel x 1 pixel.
Nell’ ARCHIVIO ZIP sono presenti tutti i file necessari al funzionamento.
FONTE: http://home.comcast.net/~jscheuer1/side/lightbox2.04a/
Adriana Napolitano 