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.
Clicca su un'immagine per vederla ingrandita |
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>
<a href="..." onclick="Apri('...', w, h);
return false;"><img src="..."></a>
<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>
©2007 www.webfract.it