ingrandire un'immagine in una pagina con barre di scorrimento colorate - su webfract

INGRANDIRE UN'IMMAGINE IN UNA FINESTRA POPUP CON BARRE DI SCORRIMENTO COLORATE

Abbiamo già presentato sia il codice per colorare le barre di scorrimento laterali (trucco numero 1) sia il codice per ingrandire un'iimagine a scelta in una finestra di dimensioni prefissate (trucco numero 40).
In più dobbiamo fare in modo che l'immagine ingrandita si chiuda al clic del mouse sulla finestra stessa.

ESEMPIO FUNZIONANTE

Clicca su un'immagine per vederla ingrandita

REALIZZAZIONE

PASSO UNO

Inserire il seguente codice javascript fra i tags <head> ed </head> :


<script language="JavaScript" type="text/JavaScript">
function Apri(URL, width, height) {
     var finestra = window.open("", "ingrandimento", "width=" + width + ", height=" + height + ", scrollbars=yes");
     if (window.focus) {finestra.focus()}
     w=width+20;
     h=height+50; 
     finestra.resizeTo(w,h);
     finestra.document.writeln("<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;'>");
     finestra.document.writeln("<a href='javascript:window.close();'>");
     finestra.document.writeln("<img src='" + URL + "' alt='Clicca per chiudere' id='Grande'>");
     finestra.document.writeln("</a>");
     finestra.document.writeln("</body></html>");
     finestra.document.close();
</script>

PASSO DUE

Collegare ogni immagine da ingrandire alla funzione javascript mediante il seguente codice:

<a href="..." onclick="Apri('...', w, h); return false;"><img src="..."></a>

Al posto dei puntini inserire l'URL dell'immagine, al posto di w inserire la misura desiderata per la larghezza della finestra in pixel, al posto di h inserire la misura desiderata per l'altezza della finestra in pixel.

ESEMPIO

La miniatura del cucciolo in alto a sinistra, che si trova memorizzata nel nostro sito,

ha nome baldo4p.jpg;
si trova all'URL http://www.webfract.it/GUIDA/baldo4p.jpg
ha larghezza (width)= 49 pixel
ha altezza (height)= 49 pixel

Vogliamo inoltre che quando si passa sopra alla miniatura con il mouse compaia il messaggio "Clicca per ingrandire".
Il codice per visualizzare la miniatura è allora:

<img src="http://www.webfract.it/GUIDA/baldo4p.jpg" height=49 width=49 alt="Clicca per ingrandire">

Per richiamare la funzione javascript scriviamo, prima di inserire l'immagine,

<a href="http://www.webfract.it/GUIDA/baldo4.jpg" onclick="Apri('http://www.webfract.it/GUIDA/baldo4.jpg', 196, 195); return false;">

Infine ricordiamoci di chiudere il collegamento.

In conclusione il codice completo è:

<a href="http://www.webfract.it/GUIDA/baldo4.jpg" onclick="Apri('http://www.webfract.it/GUIDA/baldo4.jpg', 196, 195); return false;"> <img src="http://www.webfract.it/GUIDA/baldo4p.jpg" height=49 width=49 alt="Clicca per ingrandire"></a>