Pubblicato il 22/04/13e aggiornato il

Come disabilitare il destro del mouse su tutte le immagini.

Come impedire che vengano copiate le immagini del blog disabilitando il tasto destro del cursore solo sulle foto.
Avevo già presentato un procedimento per impedire l'apertura del menù contestuale quando con il destro del cursore si cliccava su una singola immagine ma in un commento a tale post mi si è chiesto se fosse possibile disabilitare il menù contestuale su tutte le immagini senza doverlo fare individualmente. Questa operazione serve come deterrenza verso coloro che copiano le foto dei siti o addirittura che ne acquisiscono il link diretto per poi ripubblicarle nei loro blog.

Non sto a ripetere che uno mediamente esperto di informatica riesce comunque a risalire all'URL di una immagine magari andando sul sorgente pagina o usando altri espedienti ma si tratta comunque di una funzionalità che potrebbe scoraggiare molti copiatori non proprio navigati. D'altra parte sono soprattutto quelli che sono alle prime armi a sfruttare il lavoro altrui spesso senza neppure essere consapevoli della non liceità del loro comportamento.

Attraverso l'introduzione nel modello di un semplicissimo javascript è possibile giungere a questo risultato

menu-contestuale-disabilitato-immagini

Si va su Modello > Modifica HTML e si clicca nell'area del codice. Si digita Ctrl+F e su Search si incolla </head> . Si evidenzierà nel template tale riga e, subito sopra, va incollato questo codice

<!-- Disabilitare il destro del mouse solo nelle immagini -->
<script type="text/javascript">
//<![CDATA[
    function cont_menu(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG") {
            alert(alertMsg);
            return false;
        }
    }
    var alertMsg = "Il menù contestuale è disabilitato nelle immagini";
    document.oncontextmenu = cont_menu;
//]]>
</script>

Si salva il modello. Provate a cliccare con il destro del cursore in una delle foto della Demo



Al posto della scritta in rosso potete inserire un'altra espressione magari più colorita. Il destro del cursore funzionerà perfettamente al di fuori delle immagini e potrà essere selezionato e copiato del testo senza problemi. Una personalizzazione utile per chi voglia proteggere le foto che posta sul suo sito. Questo script oltre che su Blogger dovrebbe funzionare anche con qualsiasi altro CMS o pagina web.
Fonti | Dynamic Drive - Blogger Sentral -




17 commenti :

  1. ho provveduto ad inserirlo, grazie !

    RispondiElimina
  2. Buona giornata! Molto utile questo codice, recentemente ho trovato parecchi testi e foto dal mio blog, copiati. Pero ho già installato un widget per disabilitare il tasto destro, che però no protegge le immagini siccome si puo visualizarle in una nuova fineste e copiarle tranquillamente. Credi che il tuo codice puo funzionare insieme a quello gia installato?

    RispondiElimina
    Risposte
    1. @# No. Se non vuoi che le immagini si aprano in un'altra scheda usa questo sistema
      http://www.ideepercomputeredinternet.com/2011/04/come-rendere-le-immagini-non-cliccabili.html

      Elimina
    2. Grazie! Cerchero di applicarlo!

      Elimina
    3. Funziona a perfezione! Il solo quaio è che devo fare questa operazione in tutte le immagini!

      Elimina
  3. io non trovo heart e poi è cambiato tutto non appare più come prima il modello mi aiuteresti grazie

    RispondiElimina
    Risposte
    1. @# Heart? Ahahah il cuore è cosa difficile da trovare :)
      Devi cercare /head
      Devi digitare Ctrl+F quindi incollare /head nella casella Search e cliccare su Invio

      Elimina
  4. Molto utile soprattutto a chi come me, usa molto le foto personali all interno del blog e , come tu dici, non va che siano copiate...grazie Ernesto!

    RispondiElimina
  5. Scusa Ernesto ma non trovo l'area del codice. Grazie.

    RispondiElimina
  6. Vedo che però tutte le immagini (pensavo solo le foto JPG) le blocca.....va beh....comunque prima di modificare il testo che tu hai messo mi spieghi cosa vuole dire 'il menu contestuale' ?

    RispondiElimina
    Risposte
    1. @# Quando clicchi con il destro del mouse su un elemento si apre un menù che dipende dell'elemento su cui si è cliccato, per questo si chiama menù contestuale

      Elimina
  7. Scusa Ernesto ti ho chiesto un chiarimento prima di Fioredicollina ma non trovo la risposta. Dopo aver cliccato su modifica HTML tu dici di cliccare sull'area del codice ma dov'è. Grazie.Ciao.
    Erika

    RispondiElimina
    Risposte
    1. @# Ogni tanto qualche commento mi sfugge, è inevitabile. Devi cliccare in un punto qualsiasi del rettangolo in cui c'è il codice. Se non lo fai quando digiti Ctrl + F ti si apre la finestra nel browser invece della casella Search

      Elimina
  8. Ho trovato tutto. Grazie. Funziona.
    Buona notte.

    RispondiElimina
  9. Fatto. E' perfetto!!! ho solo cambiato la frase! il tuo sito è stupendo :)

    RispondiElimina
  10. Se non si aggiunge il codice per bloccare il drag & drop con il tasto sinistro del mouse, il codice è facilmente aggirabile.
    Sono entrato nell'area DEMO con lo smartphone: le immagini si salvano tutte nonostante il codice di script.
    Con questa particolare codifica non esce nemmeno il messaggio di pop-up di alert.

    RispondiElimina
    Risposte
    1. Riporto quanto scritto nel post
      "Non sto a ripetere che uno mediamente esperto di informatica riesce comunque a risalire all'URL di una immagine magari andando sul sorgente pagina o usando altri espedienti ma si tratta comunque di una funzionalità che potrebbe scoraggiare molti copiatori non proprio navigati."
      @#

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.