How to stop "right clicking" on images

How do you make it so that when people right click on an image on your site they get a message saying it's copyright etc?

Here's an example of what I mean:
http://www.cleanertoday.com/Spider-Trap-60-Traps-p/trap-spider-60free.htm

Does anyone know how to prevent people from right clicking on images like that?

 

Well you would probably use a java script on each page. You wouldn't be able to totally prevent right clicks as the savvy user would just disable the script or just print screen if they wanted to copy an image. You best bet to deter image copying is watermarking them.

 

http://www.java-scripts.net/javascripts/No-Right-Click.phtml

Just wanted to add that disabling right click doesn't work in all browsers. I'm using Safari and when I right click on an image on that site you mentioned, I get the popup, but the right click menu afterward haha

If I were you, I'd forget disabling right click. It serves no real purpose and can be easily bypassed. The watermark is your best bet

 

Cool thanks for the tips.

 

Its not a permanent solution as any browser can have javascript disabled in it.
Once disabled, any content can be right clicked and saved.

 

you can use a JavaScript, but the user can just highlight the image, then file>save image or just take a screenshot and open up photoshop or even MS Paint and save it.

So basically it's impossible to prevent people from stealing your images.

 

Here's an idea that might work, needs some work, but it's what first came to my mind:

<div id="container">
  <div class="whatever"></div>
</div>

HTML:

Then in the CSS you set the image you want as the background for the "container" div, then create a small transparent gif as the background for the "whatever" div, something like this:

#container {
  background: url('your-image.jpg') no-repeat top left;
  padding: 0px;
}
.whatever {
  background: url('x.gif');
  margin: 0px;
}

HTML:

Of course that doesn't prevent anyone from grabbing a screen-shot, but it leaves that the only way to get your image. Unless someone wants to dig around in the css files.

P.S. I haven't really tested this, but theoretically it should work just fine, I've seen it implemented on a few sites.

 

Or I could just right click and click on "View Background Image" in Firefox..

Basically, there's no way you can stop this. Either cut your losses or watermark.

 

no, that's the whole point of the transparent gif over the original image, when someone clicks view background image they get the transparent gif, not the underlying image. As I said, I've seen this implemented, it does work. And it keeps people without html/css knowledge from saving the original image.

And, another thought, by using png alpha transparency, you can create your watermark in a png file and use it instead of the transparent gif. This could be used to create a watermark so you don't have to apply the watermark to every image. Of course, IE 6 doesn't support it out of the box, but there is a hack for that.

 

Here's the javascript, it should work for most browsers:

<script type="text/javascript">
function right(mousebutton) 
{ 
var msg1 = "Right click not allowed"; 

if (navigator.appName == 'Netscape' && mousebutton.which==3) 
{ 
alert(msg1); 
return false; 
} 
else 

if (navigator.appName == 'Opera' && event.button == 2) 
{ 
alert(msg1); 
return false; 
} 
else 

if (navigator.appName == 'Microsoft Internet Explorer' && event.button == 2) 
{ 
alert(msg1); 
return false; 
} 
else 


return true; 
}
document.onmousedown = right;Microsoft Internet Explorer' && event.button == 2) 
{ 
alert(msg1); 
return false; 
} 
else 

return true; 
}
document.onmousedown = right;
</script>

Code (markup):

Put in the head of your web document.

 

What's the point of going to all that trouble though, when javascript would be sufficient to keep out most people without any html/css knowledge?

 

My view exactly.

 

Javascript is way easier to disable, just takes a few clicks, and some people have it disabled by default for some reason. To get the image when using the method I described it would take someone who understands css, not just someone who can push a few buttons to make js go away.

Plus js popups remind me of the 1990s, I haven't seen any serious site that uses them, just throw in a table based design and some animated gifs and you've built yourself a friggin time machine. And they look awful.

But I never use any of these methods, I just live with the fact that some people will steal images and in most cases I don't really give a fk if they do.

 

Well I always hear people doggin the 90's web style, but I find myself being attracted to animated GIFs and flashy text still. Doesn't mean I'm not a seroius web desinger. Anybody can always use a Photshop to crop just like you do when you convert Photshop to CSS. So then both ways are screwed. And the fact is if they can view the source they can find the image. That's how I get images.

 

Sorry, but I disagree. The general population have no idea what "javascript" even is. How the hell would they know to disable it? And it is set to on for most people.