Lezione n°5 - foto in miniatura e relativo ingrandimento

Bentornati. In questa lezione tratteremo il tema dell'inserimento di foto all'interno di una pagina HTML, spesso si ha la necessità o semplicemente la voglia di inserire nel proprio sito una galleria di immagini, per far ciò dovremmo caricare nella nostra pagina tutte le nostre foto cosi per come sono, cioè con le dimensioni e il peso proprio. Se facessimo in questo modo rischieremmo di rendere la nostra pagina estremamente pesante e molto lenta nel caricare, andando a compromettere l'accessibilità e l'usabilità del nostro sito. Il modo più usuale di risolvere questo problema è quello di caricare nella pagina della galleria fotografica le "miniature" delle nostre foto, e collegare ad ognuna di esse il relativo "ingrandimento", è anche possibile impostare l'apertura dell'ingrandimento in una nuova finestra esterna alla nostra pagina HTML. Vediamo come procedere:

Innanzi tutto bisogna disporre di una foto di grandi dimensioni, ad es. 800x600 , per creare la miniatura di questa foto possiamo utilizzare un qualsiasi programma che ci consenta di ridimensionare la foto (io ho usato il Microsoft Office Picture Manager - programma inplementato nella suite Office-), basta andare in "modifica immagine" e cliccare su "ridimensiona", fatto ciò clicchiamo su "formato percentuale personalizzato" ed impostiamo la percentuale al 10%.
Così facendo otterremo una foto identica all'originale ma al 10% della dimensione originale, cioè 80x60.

clicca sull'immagine per ingrandire

Disponendo adesso della nostra "Foto Grande" e della relativa "Miniatura" passiamo ad inserire la miniatura nella nostra pagina Html che chiameremo per comodità "pagina_1.html", e la nostra "Foto Grande" nella "pagina_2.html". Per far ciò useremo il comando:

<Img src="Miniatura.jpg"> (per la miniatura)
<Img src="Foto Grande.jpg"> (per l'ingrandimento)

Fatto ciò procediamo a rendere la nostra Miniatura un link, cioè la rendiamo cliccabile. Per far ciò useremo il comando:

<a href="pagina_2.html"><Img src="Miniatura.jpg"></a>

clicca sull'immagine per ingrandire

così facendo abbiamo ottenuto, nella "pagina_1" la presenza della miniatura (80x60) il cui bordino sarà di colore blu ad indicare che la foto è un link e quindi cliccabile, mentre nella "pagina_2" avremo la nostra foto in formato originale(800x600).
Ultimo passo da fare per completare l'operazione è quello di inserire il comando per far sì che la "Foto Grande" si possa aprire in una finestra diversa da quella delle miniature, il comando o meglio l'attributo da utilizzare è il "target" che serve proprio a definire la destinazione dell'apertura dei link. per far aprire il link in una nuova finestra il comando è:

target="new"

avremo anche potuto usare (target="_blank") con la differenza che utilizzando il "new" tutte le miniature si apriranno nella stessa finestra esterna alla nostra pagina, mentre con "_blank" ogni miniatura si aprirà in una finestra esterna sempre diversa, con l'inconveniente di ritrovarci con tante finestre aperte contemporaneamente.

avremo quindi in definitiva:

<a href="pagina_2.html" target="new"><Img src="Miniatura.jpg"></a>

vi mostro il codice html delle due pagine in questione:

clicca sull'immagine per ingrandirla

Ripetete tutti i passaggi per ogni foto che volete inserire nella vostra galleria fotografica.