Dans la droite lignée de mon article Protéger vos photos sur le web, voici une petite astuce adaptable à (presque) tous les sites web affichant des photos… Le concept est très simple : interdire le menu contextuel – en clair un anti clic droit – mais uniquement sur les images de la page 😉 (oui je sais, ça ne sert à rien !)
Si les classiques scripts anti clic droit contribuent à réaliser cela, ils n’en sont pas moins mauvais car ils peuvent gêner un nombre certain d’internautes dans leur processus de navigation (perte de l’ergonomie et des facilités données par les menus contextuels de manière générale sur les pages visitées). L’astuce consiste donc à n’interdire le menu contextuel que sur les images ! J’avais déjà expliqué comment faire dans mon précédent article, mais cela ne répondait pas à deux éléments que le webmaster scrupuleux de la qualité de son code exige :
- le script ne doit pas modifier le code existant (doit s’appliquer à toutes les images, mais sans retouche à réaliser sur le code des galeries photo par exemple)
- les pages conformes W3C (jusqu’au XHTML 1.0 strict) doivent le rester !
À CONSULTER ÉGALEMENT : Pour en savoir plus sur la protection des photos…
Le script anti clic droit sur images
Simpliste s’il en est, il consiste à appliquer par une boucle en Javascript un code sur l’événement « OnContextMenu » de toutes les images de notre page. En clair, à chaque fois que dans notre navigateur, nous allons essayer d’afficher le menu contextuel sur une image (typiquement par un clic droit… ou par un autre moyen !), nous empêcheront ce dernier de s’afficher 😉
Il suffit de copier le code qui suit dans un fichier texte, de le sauvegarder dans un fichier nommé prot.js puis de le placer à la racine de votre site (ou tout du moins dans le répertoire des pages qui utiliseront ce script !)
// Retourne... rien ! function rien() { return false; } // Remplace l'événement "oncontextmenu" (typiquement un clic droit) sur toutes les balises IMG de la page function prot() { var imgs = document.getElementsByTagName("img"); for(var i=0; i<imgs.length; i++) imgs[i].oncontextmenu = rien; } Langage du code : JavaScript (javascript)Au niveau des pages web, il suffit d’en modifier l’entête de la manière suivante (ajouter les éléments en rouge) :
<html> <head> ... <script type="text/javascript" src="prot.js"></script> </head><body onload="prot()"> ... </body> </html> Langage du code : HTML, XML (xml)Télécharger l’exemple complet (format ZIP, 120 Ko)
Les limites
Elles existent, évidemment… Il existe plusieurs limites à cette technique, qui ne freinera d’ailleurs que les néophytes du web (entre les copies d’écran et l’analyse du code source que se permettent les autres !…) :
- ne fonctionne que si le Javascript est activé sur le navigateur
- ne fonctionne pas si présence de certains scripts Javascript (HighSlide notamment, que j’utilise parfois sur ce blog) ; déconseillé car peut entrer en conflit avec ces derniers !
- ne fonctionne donc pas avec certaines galeries Javascript
- fonctionne uniquement sur les images affichées avec une balise HTML
img!
Voilà ! Bon je le redis, dans la majorité des cas cela ne servira à rien si le voleur est motivé… mais l’astuce est sympa de part son côté technique donc je voulais la partager avec vous 🙂
