... ed esso conteneva la foto grande; e con esso furono rivelati i principi del display: none; e della trasparenza opacity: ; al popolo di Straystudio.

La foto grande è contenuta nel   div id="large01"   che è però accompagnato da   style="display: none;"   per cui al caricamento pagina è come se non esistesse; sia le sue caratteristiche (dimensioni, sfondo nero, ecc.) che il suo contenuto.


Cliccando sulla foto piccola, si invia un' istruzione JavaScript che commuta la proprietà del DIV da   style="display: none;"   a   style="display: block;"   ed esso si manifesta con tutte le sue proprietà.

Innanzi tutto è un DIV   style="position: absolute;"   che quindi si va a posizionare in maniera autonoma in base alle coordinate   top: 0px; left: 0px;   che lo accompagnano; se fosse un DIV comune si posizionerebbe in calce al Documento la' dove è codificato, mostrando la foto grande sotto la piccola.
Si stende quindi sopra l' altro contenuto del BODY. Noterai che con il mouse sul Link pasticcina non si visualizza più la manina: il DIV disabilita Link e quant' altro sottostante.

Si continua però ad intravedere il resto in trasparenza, perché il DIV pur essendo definito per un colore di sfondo completamente nero, lo abbiamo accompagnato con la proprietà di Style OPACITY

  style="background-color: #000000; opacity: 0.8;"  


Abbiamo superato il problema di aprire un' altra finestra o comunque abbandonare la pagina master; e ottenuto quel particolare effetto che ce la lascia intravedere.
Quindi potrebbe già bastare approntare più DIV con ID diversi, osservare gli stessi ID sui diversi comandi onClick ed avremmo già una galleria.

Ma il nuovo problema che incontriamo, è che la semitrasparenza si estende anche al contenuto del DIV, cioè alla foto grande.
codice:
<html>
<head><title>pasticcina - principio funzionamento</title>

</head>
<body bgcolor="#900000" text="#E3E3E3" link="#E3E3E3" alink="#E3E3E3" vlink="#E3E3E3">

<h1>pasticcina</h1>

<div align="center">
     
     

     
 Clavicembalo “tedesco” a due tastiere da M.Mietke – inizi sec. XVIII
</div>



<div id="large01" 
 style="display: none; position: absolute; top: 0px; left: 0px; 
        width: 100%; height: 100%; background-color: #000000; opacity: 0.8; text-align: center;" 
 onClick='document.getElementById("large01").style.display="none";'
>
      
</div>

</body>
</html>