Per questo esercizio occorre procurarsi 3 immagini della stessa dimensione.
Il layout della pagina web verrà organizzato ipotizzando che, nel contesto del contenuto della pagina, venga riservato un riquadro, centrato orizzontalmente, nel quale verranno mostrate le immagini. A sua volta, il riquadro è diviso in due aree, una riservata a mostrare le immagini in miniatura e, passando con il cursore del mouse su una di esse, nell'altra area viene mostrata l'immagine nelle dimensioni originali.
Un'immagine deve essere accompagnata da una didascalia. Di conseguenza, i marcatori più adatti allo scopo sono quelli relativi alla lista di definizioni. Una lista di definizioni è un elenco di termini, ciascuno seguito dal suo significato. I marcatori sono i seguenti:
dl: Definition List
dt: definition term
dd: definition description
Un elenco di definizioni si presenta, quindi, nella forma:
<dl>
<dt>Termine 1</dt>
<dd>spiegazione del termine 1</dd>
<dt>Termine2</dt>
<dd>spiegazione del termine 2</dd>
. . .
</dl>
La dimensione delle immagini può essere specificata negli attributi del tag img.
Ci sono molte proprietà che consentono di far scomparire un'immagine (display, visibility, oppure si mette all'esterno del margine dello schermo, ecc.). In questo esempio si usa la proprietà opacity:
dl#galleria dd { opacity: 0; }
che nasconde l'immagine grande ma mantiene lo spazio che essa occupa nella pagina. Questo risultato si ottiene dando il posizionamento assoluto agli elementi dd:
dl#galleria dd { opacity: 0; position: absolute; }
Gli elementi che hanno il posizionamento assoluto non mantengono nessuna relazione con gli altri elementi della pagina, si comportano come se si trattasse di un post-it. Gli elementi dd e le immagini che contengono sono ancora presenti, sono solo nascosti mediante la proprietà opacity:0.
la proprietà position:absolute è molto utile ma molto pericolosa. Il suo uso dovrebbe sempre essere evitato. Non basta osservare che si ottiene l'effetto desiderato, si deve essere consapevoli di quello che si fa.
In questo esercizio position:absolute viene usato per il seguente motivo: si desidera far apparire tutte le immagini nella stessa posizione. Inoltre si desidera che la posizione dell'immagine grande sia misurata rispetto alla lista di definizioni. Questa misura relativa avviene in due fasi. Prima viene dichiarata la lista delle definizioni:
dl#galleria { position: relative; }
Si ricordi che vale la seguente regola: gli elementi posizionati in modo assoluto si posizionano rispetto all'origine del body (cioè l'angolo in alto a sinistra della pagina web), a meno che non siano all'interno di un altro elemento posizionato in modo assoluto o posizionato in modo relativo.
In pratica, si sta dicendo agli elementi posizionati in modo assoluto <dd> di misurare la loro posizione rispetto alla lista di definizioni, piuttosto che rispetto al body.
dl#galleria dd { opacity: 0; position: absolute; top: 20px; left: 200px; }
I valori devono essere opportunamente scelti in base alle proprie necessità, quelli mostrati sono solo di esempio.
successivamente gli elementi <dd> devono apparire solo quando ci si trova con il cursore del mouse sopra una miniature. Si noti che ogni elemento <dd> è preceduto da un element <dt>. Siccome :hover non può essere applicato a qualsiasi elemento, si usa il selettore di adiacenza:
dl#galleria dt:hover + dd, dl#galleria dt:focus + dd { opacity: 1; }
<body>
<h1>galleria di foto</h1>
<p>porta il cursore del mouse su una miniatura per vedere la foto ingrandita</p>
<div id="riquadro">
<dl id="galleria">
<dt tabindex="1"><img src="img/img1.png" width="20px" height="20px" />
<!-- primo quadrante della miniatura -->
<dd><img src="img/img1.png" width="100%" height="100%">
prima foto <!-- versione ingrandita primo quadrante e didascalia -->
<dt tabindex="2"><img src="img/img2.png" width="20px" height="20px">
<!-- secondo quadrante miniatura -->
<dd><img src="img/cancellami2.png" width="100%" height="100%">
seconda foto <!-- versione ingrandita secondo quadrante e didascalia -->
<dt tabindex="2"><img src="img/img3.png" width="20px" height="20px">
<!-- terzo quadrante miniatura -->
<dd><img src="img/img3.png" width="100%" height="100%">
terza foto <!-- versione ingrandita terzo quadrante e didascalia -->
</dl>
</div>
<body>
Centrare orizzontalmente le immagini sulla pagina e inserirle in un contenitore rispetto al quale specificare le proprietà di posizione:
#riquadro {
width:500px;
height:500px;
position:absolute;
left:50%;
margin:0 auto 0 auto;
}
Assegnare le proprietà alla lista di definizioni:
dl#galleria {
position: relative;
background: #202020;
font-size: 0;
padding: 3rem;
padding-bottom: 8rem;
}
Assegnare le proprietà agli elementi definition term
dl#galleria dt{
width: 12.5%;
min-width: 50px;
cursor: pointer;
}
dimensionare le immagini
dl#galleria dt img {
width: 100%;
height: auto;
}
proprietà immagini
dl#galleria dd img{
width: 100%;
height: auto;
box-shadow:0 0 8px rgba(0,0,0,0.3);
display:block;
margin-bottom: 1rem;
}
Nascondere le immagini:
dl#galleria dd {
position: absolute;
top: 3rem;
left: 22%;
opacity: 0;
transition: .7s opacity;
text-align: center;
font-size: 1.4rem;
font-style: italic;
color: #fff;
padding-left: 0;
width: 40%;
}
far riapparire le immagini
dl#galleria dt:hover+dd,
dl#galleria dt:focus+dd {
opacity:1;
}
Allineare le miniature delle immagini in orizzontale.
Inserire dei collegamenti ipertestuali alle immagini per aprire una nuova pagina.
Collocare la galleria di immagini all'interno di una pagina completa di intestazione, e altro contenuto.