<script language="JavaScript">
| Indica che si sta per inserire uno script in JavaScript.
| function Apri(URL, width, height) {
| La funzione Apri ha tre parametri: URL, in cui sarà memorizzato l'indirizzo dell'immagine,
width ed height, in cui saranno memorizzate rispettivamente la larghezza e l'altezza della finestra.
| NOTA: se si vogliono le barre laterali la finestra non deve essere di dimensione molto maggiore delle immagini. Le parentesi graffe servono a racchiudere la funzione. (Noterete che prima della chiusura dello script la parentesi viene chiusa) var finestra = window.open("", "ingrandimento", | "width=" + width + ", height=" + height + ", scrollbars=yes");
Dobbiamo caricare la pagina in una variabile JavaScript. | La variabile, che abbiamo chiamato finestra, è il riferimento per le prossime azioni. Nella parentesi vengono poi inseriti ordinatamente gli argomenti separati da virgole: innanzitutto possiamo immettere l'URL della pagina da aprire oppure, come nel nostro caso, inseriamo due virgolette; inseriamo quindi un nome, ad esempio "ingrandimento", che sarà completamente inutile ma che comunque è necessario, infine le altre caratteristiche. Le caratteristiche che deve avere la nuova pagina sono:
if (window.focus) {finestra.focus()}
| Se il browser supporta il metodo focus() la nuova finestra deve
essere posta in primo piano. | Il metodo focus() riporta l'attenzione sull'oggetto specificato. Nel nostro caso la popup viene aperta sopra la pagina corrente. Questa riga di codice non è necessaria se abbiamo una sola miniatura da ingrandire infatti la prima volta che clicchiamo su una miniatura per visualizzare l'ingrandimento la popup viene effettivamente aperta sopra la pagina principale, ma, cliccando su altre miniature senza aver prima chiuso la popup, le prossime immagini saranno aperte solo in una finestra nascosta sulla barra di stato. Questa riga di codice serve proprio ad evitare questo inconveniente. w=width+20; | h=height+50; finestra.resizeTo(w,h); La larghezza e l'altezza passate come parametri
vengono un po' aumentate e memorizzate in due nuove variabili di nome w ed h. | Queste righe di codice sembrano superflue ma sono necessarie se si devono ingrandire più miniature: se infatti viene aperta una nuova finestra, cliccando ad esempio su un'altra miniatura, prima che la popup venga chiusa, la prossima immagine ingrandita verrà sovrapposta a quella corrente, con problemi conseguenti sulle dimensioni. In altri termini, in questo caso, non verrà aperta una nuova finestra ma verrà semplicemete cambiato il contenuto in quella già aperta. Ecco allora che è necessario ridimensionare la popup. finestra.document.writeln("<html>");
| Viene predisposto il codice necessario per visualizzare la pagina:
nell'oggetto document della pagina che viene aperta (alla quale ci dobbiamo riferire
chiamandola con il nome della variabile finestra) viene scritto il codice HTML. | finestra.document.writeln("<body style='scrollbar-face-color:navy;scrollbar-track-color:silver;
scrollbar-arrow-color:yellow;scrollbar-highlight-color:aqua;
scrollbar-3dlight-color:green;scrollbar-darkshadow-color:red;
scrollbar-shadow-color:white;margin:0px;'>");
|
La variabile di nome finestra memorizza le proprietà della finestra stessa ed in particolare
le proprietà delle barre laterali:
|
finestra.document.writeln
("<a href='javascript:window.close();'>");
| Con questo codice la finestra viene chiusa cliccando sopra l'immagine. | finestra.document.writeln("<img src='" + URL + "' alt='Clicca per chiudere' id='Grande'>");
| Nella pagina viene visualizzata l'immagine che verrà passata alla funzione attraverso
il parametro URL: tale parametro conterrà sia il nome che l'indirizzo dell'immagine.
| finestra.document.writeln("</a>");
| Chiusura del tag < a href='...
| finestra.document.writeln("</body></html>");
| Chiusura dei tags <body> e <html>
| finestra.document.close()
| Metodo JavaScript che comunica al browser che la scrittura
del document della pagina finestra è terminato.
| } | Parentesi di chiusura della funzione.
| </script> | Fine script.
| | ||||||||||||||||||||||||
<a href="http://www.webfract.it/GUIDA/baldo4.jpg"
| Nel primo collegamento viene inserito l'URL dell'ingrandimento:
questo collegamento funzionerà solo se, per qualche motivo, ad esempio perché
l'utente ha disabilitato javascript oppure blocca le finestre popup,
la finestra popup non può essere aperta. | Ovviamente sostituite, nel vostro codice, il nome della vostra immagine. onclick="Apri('http://www.webfract.it/GUIDA/baldo4.jpg', 196, 195);
| Quando l'utente fa clic sulla miniatura viene chiamata la funzione Apri
e vengono passati come parametri l'URL dell'ingrandimento da visualizzare e la
larghezza e l'altezza in pixel della finestra da aprire.
| return false;">
| Se la funzione Apri è stata correttamente attivata
essa restituisce il valore false e quindi il collegamento normale con l'HTML
non funziona: se invece non è stato possibile attivarla il link funziona e, perlomeno,
l'immagine può essere visualizzata anche se a schermo intero.
| <img src="http://www.webfract.it
/GUIDA/baldo4p.jpg" height=49 width=49
| E' questo il normale codice per aprire un'immagine con HTML.
| alt="Clicca per ingrandire">
| Clicca per ingrandire è il messaggio che compare sull'immagine quando si passa sopra con il mouse. | Con FireFox il messaggio si visualizza solo se l'immagine non viene caricata. </a>
| Chiusura del collegamento ipertestuale.
| |
©2002 www.webfract.it
