Empêcher clic-droit sur les images @ Dreamweaver

[herissonalunettes]

Zaz, je considère que l'internaute n'a pas besoin de plus d'opération que de circuler dans la galerie. A quoi lui servirait le clic droit ? Voir les exifs ?


Héhé !

ben par exemple, récemment sur un site ornitho, quelqu'un fait suivre une image pour l’espèce rare.
je trouve la photo esthétiquement, clic droit, copier l'adresse de l'image, et hop, je trouve le site du photographe,...je ne lui ai pas piqué l'image, mais grâce au clic pas bloqué, j'ai trouvé son site. si ca avait été plus chiant, je n'aurai pas insisté.

[nico06]

Oui sauf qu'avec les écrans HD/Retina, il faut parfois balancer ses images en plus grande taille/résolution (sur mon site, si je veux que ça apparaisse au moins un peu clean, je les dimension en environ 1,5 fois leur taille HTML (elles sont dimensionnées en 700px de hauteur, je les upload en 1000px).

Pour ce soucis spécifique, je dirais que tu dois alors détecter la densité de pixel de l’écran ou s'affiche le browser utilisateur afin d'adapter le redimensionnement de l'image en conséquence. Mettre une image plus lourde juste pour ces types d’écran, c'est un peu dommage vu que tout tes utilisateurs l'ayant ou pas devrons attendre le téléchargement de la grosse image. Maintenant pour éviter le léger flou que cela générera peut être sur les retina, tu peux aussi générer les images dans plusieurs format et n'afficher que celui adapté a l’écran.

De toute façon ce n'est pas tant la taille des images qui compte que l'usage qui en sera fait. Si quelqu'un utilise une de tes photos pour faire éditer une série de timbre poste, je pense que avoir du 1000px ou du 700px ne fera pas une grosse différence.

Pour en revenir au sujet, je n'ai pas de solution pour ton soucis de copyright, a part l'afficher clairement sur ton site, il n'y a aucun moyen d’empêcher les indélicats de te voler tes photos dés le moment ou tu décides de les partager. C'est le même soucis pour tout le monde, que ce soit pour les photos, le contenu des pages web, la musique etc. Le problème est loin d’être trivial.

Un truc vraiment crade serait de tout encapsuler dans du flash. Pas d'image native a récupérer mais un gros binaire, et même si c'est toujours possible de récupérer une image propre, le cout est bien plus élevé que de chopper l'url de ton image dans le source de ta page.

[Aguares]

Edit pour EGr: si c'est plus chiant à faire ils le feront moins facilement

Penses-tu ! Avec Greenshot ça se fait en un clic et tu peux sélectionner que la photo.

[rob44]

Empêcher le clic droit était très à la mode il y a quelques années, avant que les gens ne se rendent compte que ça ne servait à rien.
Personnellement je trouve que ça ne fait ne fait pas pro du tout, étant donné que c'est inutile et obsolète.

[Lionel]

vla, j'ai trouvé la partie du code dans mon site qui fait ca: (j'ai un peu de retard c'est vrai '^^ mieux vaut tard que jamais il parait)

a.oncontextmenu = function() { return false;
placeY = document.body.offsetHeight-(140+121); // 121 = #miniatures.width
placeX = document.body.offsetWidth-marginleft- bordure.larg-10;
ratio = maxWidth/maxHeight;
a.style.height = (a.offsetHeight <= maxHeight) ? placeY-2*bordure.larg+'px' : maxHeight+'px';
if(a.offsetHeight*ratio< placeX){
a.style.width = a.offsetHeight*ratio+'px';
}
else{
a.style.width = (a.offsetWidth < maxWidth) ? placeX-2*bordure.larg+'px' : maxWidth+'px';
a.style.height = a.offsetWidth/ratio+'px';
}
contain.style.width = a.offsetWidth+bordure.larg+'px';
contain.style.height = a.offsetHeight+bordure.larg+'px';
var parleft1 = document.body.offsetWidth/2 -a.offsetWidth/2;
var xleft = (parleft1 < marginleft) ? marginleft+'px' : parleft1+'px';
contain.style.left = xleft;

[arero24]

Sauf pour celle que tu as mise dans l'onglet auteur. Le clic droit fonctionne.

[Manus]

Fil déplacé.

[round-planet]

Plein de réponses sur le web; par exemple ça si tu utilises jQuery:

Code : Tout sélectionner

$('img').on('contextmenu', function(e){ return false; });

bien sur ca n'empèche vraiment rien, ca ralentit juste.

[Lionel]

Sauf pour celle que tu as mise dans l'onglet auteur. Le clic droit fonctionne. :glups:

en faite je m'en fou un peu a vrais dire. Par contre si vous voulez m'aider pour rendre mon site compatible pour smartphone ca m’intéresse :) (je suis en train de bidouiller)

[Flash]

Tu dois le rendre "responsive", fais une recherche sur le net...
Pas forcément évident à convertir en fonction de la manière dont ton site est structuré et codé actuellement. Si c'est trop compliqué, le mieux est d'en refaire un à partir d'un Template qui est responsive.

[Lionel]

Plein de réponses sur le web; par exemple ça si tu utilises jQuery:

Code : Tout sélectionner

$('img').on('contextmenu', function(e){ return false; });

bien sur ca n'empèche vraiment rien, ca ralentit juste.

tip top, ca marche bien. Mais effectivement ca n’empêche pas un drag and drop.

[Lionel]

Plein de réponses sur le web; par exemple ça si tu utilises jQuery:

Code : Tout sélectionner

$('img').on('contextmenu', function(e){ return false; });

bien sur ca n'empèche vraiment rien, ca ralentit juste.

tip top, ca marche bien. Mais effectivement ca n’empêche pas un drag and drop.

J'ai trouvé comment empêcher le drag and drop. En jquery:

// empèche le click droit (copie par copier coller)
$('img').on('contextmenu', function(e){ return false; });

// empèche le click gauche (copie par drag and drop)
$('img').bind('click mousedown dblclick',function(e){
e.preventDefault()
e.stopImmediatePropagation()
});

du coup pour copier une image il faut passer par le code source (ca refroidit pas mal je pense)

[nico06]

Autre solution ... découpe ton image !

http://picslice.com/ <= juste une démo, faut trouver une lib qui te fasse cela a la volée

Cela va rendre sa réutilisation bien plus compliquée mais de toute façon tu ne pourras jamais empêcher totalement le vol, il faut juste rendre l’opération de récupération trop couteuse en temps

[bpol]

sur mon site en construction mes photos sont en 1024/900 comme pour les forums ce qui donne des photos de +/-9/6 cm et quand on l'enregistre c'est en html

[Lionel]

Autre solution ... découpe ton image !

http://picslice.com/ <= juste une démo, faut trouver une lib qui te fasse cela a la volée

Cela va rendre sa réutilisation bien plus compliquée mais de toute façon tu ne pourras jamais empêcher totalement le vol, il faut juste rendre l’opération de récupération trop couteuse en temps :)

Oui le but c'est juste d'éviter que quelqu'un ne connaissant pas trop copie. Car il lui suffit d'aller dans le code source pour trouver l'adresse. Je sais bien qu'il sera toujours possible de prendre les images. Je ne les posterais pas si non.
Après il suffit de faire une capture d'écran et d'enlever les boutons sous ps. Etant donné que mes images fonds 1920px http://apvl.ch/apvl . Mais je pense que d’empêcher le drag and drop et le click droit bloque déjà pas mal de monde.

[nico06]

Découpe en 10 lignes / colonnes et bon courage pour aller recoller les 100 jpeg pour refaire la photo originale. Dans le source code tu auras non pas une image mais 100 ! C'est tout l’intérêt. Bon par-contre ça augmente sensiblement les tailles des pages mais c'est pas trop grave.

Pj-1 : Je te mets en copie un screenshots de ton site avec un outil de base d'un browser le debuger, j'aime pas trop me balader dans le code source c'est pas le plus rapide. Donc de base avec cet j'ai les urls de 6 images "selection-apvl-**-sur-**.jpg".

PJ-2 : Bon la c'est immédiat je sauve directement la ressource qui me plait, je rajoute le fichier que j'ai récupéré, comme tu peux le voir je peux le réutiliser directement sans trop me casser la tête, aucun bouton ni rien c'est facile, même pas de watermark ! et PS c'est comme le code source... j'aime pas, donc si je peux éviter ... .

PJ-3 : je reprend le démo et je le passe a la moulinette du site sus-cité. Voici la sortie du debuger : 81 images !

PJ-4 : comme précédemment j’essaie de récupérer une image ... et ça fonctionne, mais j'ai pas tout : Alors bien évidement il faut ensuite récupérer les 80 autres fragment ce qui ne me prendra pas plus de temps c'est vrai, mais surtout je devrais les rassembler et ça va en dépiter plus d'un... B

Bon l'algo de découpe devrait aussi randomiser les noms parce que si il y a une logique on peut les ré assembler de manière automatique, ça demande un peu plus de motivation c'est tout. De même dans l'absolu on devrait pouvoir jouer avec des layer html afin de créer des fragments qui puissent se chevaucher et éviter un recollage bord a bord. Ça peut être un DEV vraiment sympa a faire mais ça deviens pour le coup overkill. Donc oui le site au dessus ne va pas t'aider, non il n'est pas parfait mais c'est plus une illustration de ce qui pourrait etre fait pour compliquer la vie des plagieurs.

PJ-5 : Je trouve ta galerie très jolie. Du coup je me dis que l'avoir en local c'est bien aussi Bon sinon sans plaisanter, j'ai récupéré un petit paquet de jolie photos (ce n'est pas pour me moquer), aucune n'a de watermark ni rien. C'est dommage de se donner autant de mal pour empêcher des actions utilisateurs si le premier aspiweb venu récupère tout pour moi pendant que je prend mon café.