CSS: impedire il download delle nostre immagini
This entry was posted on October 1st, 2009 and is filed under CSS, Projects.
Sappiamo bene che proteggere un’immagine e impedirne il download non è cosa realizzabile. Però possiamo fare qualcosa per impedire che una normale utenza non riesca facilmente a scaricare le nostre immagini o perlomeno perda quel minimo di tempo in più di un semplice tasto destro sulla foto.
Sono molte le tecniche che utilizzano Javascript per fermare i download ma, basta navigare senza il supporto ed il gioco è fatto. La soluzione che presento invece non usa altro che due semplicissime regole CSS e, cosa che non guasta, è anche cross-browser. Al momento che scrivo ho testato la pagina con tutti i browser a partire da IE6 e non ho riscontrato alcun tipo di problema con nessuno.
Il codice CSS presente in questo articolo altro non fa che mettere in primo piano una semplice gif trasparente in maniera che, cliccando con il tasto destro sull’immagine e scegliendo di salvarla, viene salvata la gif trasparente anzichè l’immagine stessa.
Per visualizzare una demo del risultato finale è sufficiente cliccare sul seguente link:
Il codice per la realizzazione invece è il seguente:
.protected {
width: 500px;
height: 375px;
margin: 0 auto;
display: block;
position: relative;
}
.protected img.blank {
width: 100%;
height: 100%;
display: block;
position: absolute;
left:0;
top: 0;
z-index: 1;
}
<div class="protected"> <!--immagine fittizia--> <img src="blank.gif" alt="" /> <!--immagine reale--> <img src="protected.jpg" alt="" /> </div>
Se volete scaricare il pacchetto con il codice necessario, potete farlo al link seguente:
Idea: sohtanaka
Benvenuto! Mi chiamo
October 1, 2009 at 11:01 am
Bellissimo, sbaglio o questo metodo è quello utilizzato anche da Flickr?
October 1, 2009 at 11:19 am
Ho visto adesso, hai ragione.
Sinceramente pensavo adottassero qualche altro metodo più avanzato con l’ausilio di Javascript invece è proprio lo stesso metodo.