-
Dans cette page
-
Plus de scripts
-
Gardons le contact
-
Souternir webbricks
PROTéGER SES IMAGES
script : imgProtect v1.0
langage : javascript
catégorie : module
usage : Une astuce javascript pour empêcher les néophytes de copier vos images.
tags : ergonomie - image - technique
Concept
Oui, bon, je sais :
Il est impossible sur internet de protéger une image contre la copie... Néanmoins, on peut trouver quelques astuces pour que
les personnes pas trop calées en informatique (c'est à dire au moins 90% des internautes) ne soient pas en mesure d'enregistrer les
images d'un site. Ce script est là pour ça.
Oui, bon, je sais aussi :
C'est un peu bizarre, sur un espace d'esprit open source, d'aider à protéger les images contre la copie... J'admets.
Mais ce n'est pas parce que je m'associe au copyleft que je me sens l'ennemi de ceux qui se veulent propriétaire de leurs
créations. C'est le cas de plusieurs de mes amis. C'est pour eux à l'origine que j'ai mis ce script au point.
Démo
(Peinture de Bruegel l'Ancien)
Eh bien allez-y, essayez de faire bouton droit -> Enregistrer l'image sous... (ou Afficher l'image ),
ou bien encore essayer de faire glisser l'image sur votre bureau. Vous ne pourrez obtenir de cette façon qu'une image transparente de
quelques pixels de côté.
Les informaticiens avertis que vous êtes trouveront bien entendu d'autres moyens de copier l'image. Mais pour le grand public,
ce ne sera pas possible.
Intégration
Le script est très facile à mettre en place.
Admettons que le script et l'image transparente se trouvent dans le même dossier que votre page html.
Vous commencez par charger le script en plaçant le code suivant entre les balises <head>
et </head> de la page :
<script src="imgProtect.js" type="text/javascript"></script>
Insérez ensuite les images dans votre page html, avec la balise habituelle :
<img src="mon_image.jpg" width="300" height="200" alt="une image" />
Enfin, il faudra déclencher l'exécution du script par le code suivant :
<script type="text/javascript">imgProtec();</script>
Plus de code
Le script apporte quelques autres subtilités.
Ainsi, vous pouvez choisir de ne protéger que certaines images. Pour ce faire, vous pourrez passer un premier argument dans la fonction :
imgProtec( cibles );
Cet arguments peut être une référence à une seule image :
var cibles = document.getElementById('mon_image'); imgProtec( cibles );
ou à une collection d'images :
var cibles = document.getElementById('conteneur').getElementsByTagName('img'); imgProtec( cibles );
Il vous est aussi possible de préciser où trouver l'image transparente. Ceci devra être indiqué dans un second argument :
imgProtect(0, 'dossier/sous_dossier/image.gif');
Notez enfin que si vous ne définissez pas d'attributs width et
height pour vos images, il vaudra mieux déclencher le script une fois que le tout le contenu de la page aura
été chargé. Vous utiliserez donc ceci (ou quelque chose de plus élaboré) :
window.onload = imageProtec;
Téléchargement
Vous trouverez dans ce zip le script en version compressée (700 octets) et en version commentée, ainsi que l'image transparente (16 octets).
compatibilité :
(autres navigateurs non testés)
Commentaires
- Publier un nouveau commentaire
-
C'est simple, et ça doit faire l'affaire contre la plupart des copieurs. J'enregistre. Merci
-
Volkow le 20 avril 2010, à 15h22Ca gère ^^.
-
Je ne sais pas à quel endroit mettre ce morceau de code:
Enfin, il faudra déclencher l'exécution du script par le code suivant :
<script type="text/javascript">imgProtec();</script>
Merci -
@Ray-Jo : Tu peux le mettre juste avant la balise </body>
-
Mouai... bon, un imprim ecran et c'est mort !
-
Article nul : faites afficher la source de la page et vous avez tout.
Exemple : http://www.webbricks.org/bricks/imgProtect/Brueghel_tower-of-babel.jpg
-
Plutôt que de vous la raconter, lisez la rubrique "concept" de cette page, les gars.
;) -
merci
-
Utile ce script ! (clique-droit code source et on peut récupérer l'image); c'est le seul défaut !
-
Goditron le 25 juin 2011, à 2h59Parfait pour mes sites par contre avec inspecter l?élément de google ds Chrome c'est d'une simplicité de mettre la main dessus.
Merci pour ce script ! -
marieoceane le 06 novembre 2011, à 20h10je ne comprends pas que vous puissiez prendre les images par la source, on je ne vois que leur nom.jpg, par exemple
Je suis débutante, mais un "copain", me pique mes images en faisant enregustrer sou : la page complète, et toutes les images de la page s'enregistre, j'aimerai désactiver cette fonction, mais comment? et bien sur je galère dans les explications qui paraissent simple mais je suis comme Ray-Jo, où mettre les différents szcripts et l'image transparente, l'image dans le même doddier que le fichier html, ok mais ensuite, je ne sais comment plac er les fonctions, sachant que j'ai toujours plusieurs images par page, merci pour votre aide, si l'un de vous peut m'aider, un grand merci -
ImaSTAT le 26 février 2012, à 22h47MarieOceane, dans ce cas-ci, le nom original de l'image "Brueghel_tower-of-babel.jpg" est disponible sur le serveur web. Le script empêche de l'enregistrer à partir de la page, mais si tu ouvres la photo directement dans ton navigateur, tu pourras ensuite la télécharger normalement car le script ne s'y appliquera pas. Dans ce cas-ci, l'image est placée dans le même répertoire que la page HTML, donc si tu vas à l'adresse suivante: http://webbricks.org/bricks/imgProtect/Brueghel_tower-of-babel.jpg, tu pourras télécharger l'image normalement. Il existe des façons d'empêcher l'ouverture de fichiers sur un serveur web autre que les pages que tu veux afficher (htaccess). Ainsi, la seule façon de récupérer l'image sera de faire un "print screen".
- Navré, le formulaire de commentaires est temporairement indisponible.
