Gestione delle immagini

In questa breve guida illustrata parleremo delle immagini e del loro inserimento in un sito,delle protezioni applicabili: la maggior parte dei siti hanno immagini, a volte per abbellire il contenuto, a volte sono proprio le foto a costituire il contenuto del sito. Dal momento che su forum e mail list le domande sulle immagini tornano spesso ho deciso di scrivere qualche cosina sull'argomento. La scrittura è informale, ma per seguire bene è necessario avere una conoscenza minima di html

Una volta, tanto tempo fa (si fa per dire) la gestione delle immagini consisteva in questo: si metteva una miniatura dell'immagine, la miniatura era collegata da un link che portava alla foto vera e propria. Cliccando sulla miniatura il browser mostra la foto all'interno di una pagina web che in realtà non esiste, semplicemente il browser può visualizzare anche le foto e lo fa, provate a trascinare un'immagine dentro una finestra di Internet Explorer e capirete immediatamente.

Link ad una foto

Ecco il codice per fare una cosa del genere:

britney_spears.jpg

pamela-anderson_e_paris-hilton.jpg

paris_hilton_e_pamela_anderson.jpg

<TABLE id="table1"> <TR> <TD ALIGN=CENTER VALIGN=BOTTOM><FONT face="Verdana, Arial, Helvetica, Sans-Serif" size="-2"><A HREF="britney_spears.jpg"><IMG SRC="TN_britney_spears.JPG" ALT="britney_spears.jpg"><BR>britney_spears.jpg</A></FONT></TD> <TD ALIGN=CENTER VALIGN=BOTTOM><FONT face="Verdana, Arial, Helvetica, Sans-Serif" size="-2"><A HREF="pamela-anderson_e_paris-hilton.jpg"><IMG SRC="TN_pamela-anderson_e_paris-hilton.JPG" ALT="pamela-anderson_e_paris-hilton.jpg"><BR>pamela-anderson_e_paris-hilton.jpg</A></FONT></TD> <TD ALIGN=CENTER VALIGN=BOTTOM><FONT face="Verdana, Arial, Helvetica, Sans-Serif" size="-2"><A HREF="paris_hilton_e_pamela_anderson.jpg"><IMG SRC="TN_paris_hilton_e_pamela_anderson.JPG" ALT="paris_hilton_e_pamela_anderson.jpg"><BR>paris_hilton_e_pamela_anderson.jpg</A></FONT></TD> </TR> </TABLE>

Come potete vedere si tratta di creare una tabella, all'interno delle celle trovano posto le miniature il testo, sia il testo che le miniature sono linkate alle foto vere e proprie.

Ora complichiamo le cose.

Link ad una pagina contenente una foto

Di per se non è un gran passaggio, ma vedremo poi che ci sono indubbi vantaggi.

Questa foto è linkata ad una pagina web, il browser quindi visualizzerà la pagina e il suo contenuto, non necessariamente la foto (fermatevi un attimo a riflettere su questa sottigliezza). Linkare una foto ad una pagina web è utile perchè mi permette di definire le caratteristiche della pagina web. a questo punto non rimane altro che andare a vedere quali sono le caratteristiche più richieste o più alla moda.

Javascript più richiesti per la gestione delle finestre e la protezione delle immagini

1) Aprire una finestra che abbia delle misure predeterminate (ad esempio le dimensioni della foto)

si tratta di creare una funzione all'interno dei tag head

<!-- funzione apri finestra con misure determinate --> <script type="text/javascript" language="JavaScript"> function winOpen(URL, windowName, width, height, left, top, resizable, location, menubar, scrollbars, status, toolbar, directories){ var windowFeatures; windowFeatures = ''; if (width != '') windowFeatures = windowFeatures+'width='+width+','; if (height != '') windowFeatures = windowFeatures+'height='+height+','; if (left != '') windowFeatures = windowFeatures+'height='+height+','; if (top != '') windowFeatures = windowFeatures+'height='+height+','; if (resizable) windowFeatures = windowFeatures+'resizable,'; if (location) windowFeatures = windowFeatures+'location,'; if (menubar) windowFeatures = windowFeatures+'menubar,'; if (scrollbars) windowFeatures = windowFeatures+'scrollbars,'; if (status) windowFeatures = windowFeatures+'status,'; if (toolbar) windowFeatures = windowFeatures+'toolbar,'; if (directories) windowFeatures = windowFeatures+'directories,'; window.open(URL, windowName, windowFeatures); } </script> <!-- fine funzione apri finestra-->

in seguito, all'interno dei tag body,  gestiremo i singoli link della pagina attribuendo le dimensioni che vogliamo in questo modo:

<a href="" onclick="winOpen('pamela-anderson_e_paris-hilton.htm', 'la_foto_di_pamela_e_paris','400', '500', '100', '200', 'false', 'false', 'false', 'true', 'false');return false;">link testuale a foto</a><p>
 

ecco l'esempio: link testuale a foto

(la compatibilità tra questi javascript e i fogli di stile da qualche problema, tant'è che i professionisti gestiscono anche i link con i fogli di stile)

2) eliminare l'interfaccia grafica di IE per salvare le foto

questo è il meta comando, va scritto all'interno dei tag <head> </head>

<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

3) disabilitare il dx del mouse su una pagina web

questo è il meta comando, va scritto all'interno dei tag <head> </head>

<script language="JavaScript" type="text/javascript"> /******** Right-Click Disabler Created by Howard Chen Get more JavaScripts at http://start.at/javascripts/ Bugs report to jdeveloper@telebot.net This script is free as long as the credits above are kept **************************************************/ function BrowserCheck() { var b = navigator.appName if (b=="Netscape") this.b = "ns" else if (b=="Microsoft Internet Explorer") this.b = "ie" else this.b = b this.version = navigator.appVersion this.v = parseInt(this.version) this.ns = (this.b=="ns" && this.v>=4) this.ns4 = (this.b=="ns" && this.v==4) this.ns5 = (this.b=="ns" && this.v==5) this.ie = (this.b=="ie" && this.v>=4) this.ie4 = (this.version.indexOf('MSIE 4')>0) this.ie5 = (this.version.indexOf('MSIE 5')>0) this.min = (this.ns||this.ie) } is = new BrowserCheck() function init() { if(document.images) { document.images.onmousedown = mouseDown; for(i=0;i<document.images.length;i++) document.images[i].onmousedown = mouseDown; } } function mouseDown(e) { if ((is.ns && e.which == 1) || (is.ie && event.button == 1)) { } else { if (is.ie) alert("Il messaggio che preferite") else if (is.ns) setTimeout('alert("Il messaggio che preferite',50) } } // End --> </script>

e poi modificare il tag <body> in

<BODY onLoad="init()">

4) Eliminare le barre dei menu di IE

questo è il meta comando, va scritto all'interno dei tag <head> </head>

5) Protezione con gif trasparente

si tratta di costruire un bordo attorno alla foto e inserirla nella pagina web come sfondo. A questo punto inserite nella pagina web una gif trasparente sopra la foto di sfondo.

ecco l'esempio:

La parte più difficile consiste nel prendere le misure, la gif trasparente inserita sopra e la foto di sfondo infatti non iniziano nello stesso punto.

Se provate a mettere insieme tutte queste protezioni dovreste ottenere un risultato notevole.