The attitudes here seem awfully defeatist. The general question is a fair one, and a common one. It is easily solved, and it breaks down into several parts. As always, there are legitimate reasons for wanting to disable copying, and there are effective methods to do so, but it is a multi-step process:
(1) How to remove the idiotic mini-Toolbar.
It is reasonable to remove this when it serves no real useful purpose, and it looks ugly, distracting the viewer from the graphic design.
(a) You can put this in your head section:
Code:
<meta http-equiv="imagetoolbar" content="no" />
however, as the Mad Professor pointed out,
That is actually not a good way to do it.
It is not widely known but, I have discovered that using:
<meta http-equiv="imagetoolbar" content="no" />
can and usually does create memory leaks. If you use this a lot on your site or if the page gets refreshed often, it will eat up memory like nobody's business until all instances of the browser are closed. Better to use the less convenient:
Code:
<img galleryimg="no" src="some.jpg">
option on just those images that are large enough to require it (below a certain size, images will not display that toolbar anyway).
This solves the first problem, the toolbar. But it doesn't stop people right-clicking on the pictures and saving them.
2) How to Stop the Right-Click
This again is not unreasonable. It allows you to stop honest viewers from just taking your pictures, and gives you an opportunity to display copyright in a separate window,
only when needed, without cluttering up the (lovely) visual design of the page.
You can disable IE by having a popup window show up when they right-click, but in Firefox this doesn't stop them from getting to a 'save menu'.
For IE put this in a file called copyright.js:
Code:
// copyright notice script
var message="Copyright 2000,2001,2002,2003,2004,2005 by (your company name here). WARNING! All content on this site is protected by copyright laws. Unauthorized use of our material is strictly prohibited.";
function click(e) {
if (document.all) {if (event.button==2||event.button==3)
{ alert(message); return false;}}
if (document.layers) {if (e.which == 3) { alert(message); return false;}}
}// --------- end function
if (document.layers) { document.captureEvents(Event.MOUSEDOWN);}
document.onmousedown=click;
//
Then hook it into your webpage HEAD section like this:
Code:
<!--================= COPYRIGHT NOTICE =====-->
<script language="javascript" src="copyright.js"></script>
This is a friendly way to deal with 'honest viewers' who might assume the pictures are free to use in any way they wish.
For Firefox, you can intercept the 'right-click' with a bit of Javascript:
(in the HEAD section
Code:
<script type="text/javascript" language="JavaScript">
<!--
function initPage(objectID) {
var object = document.getElementById(objectID);
object.onmousedown = findMouseButton;
}
function findMouseButton(evt) {
evt = ( evt ) ? evt : ((window.event) ? event : null);
if (typeof evt.button != 'undefined') {
alert('Mouse Button Value = ' + evt.button);
}
}
//-->
</script>
<style type="text/css" media="screen">
<!--
#object1 {
visibility: visible;
position: absolute;
top: 50px;
left: 100px;
width: 410px;
border: solid 2px gray }
-->
</style>
and in the body put this:
Code:
<body onload="initPage('object1')">
Click me and I will tell you which mousebutton you pressed:<br/>
<div id="object1">
<img src="yourpic.jpg" alt="pic" />
</div>
This you can modify to deal with people right-clicking in Firefox.
3) Stopping people saving the page with pictures to disk
As pointed out, next you'd like to stop people saving the page with graphics.
I don't know if the suggestion above works or not, but it looks interesting.
4) Stopping people doing a screen capture
The intelligent suggestion combines previous point with another.
Watermark important images with your identity and copyright notice,
and encode the same into the image itself invisibly.
Finally, don't use resolutions higher then what is absolutely necessary to
give a reasonable screen image (72 dpi) but is not good enough for
high quality printing. This has the added benefit of keeping the download
time for the webpages short and the experience for the viewer a fast loading page.
5) preventing robot harvestors from just raping you.
Store your pictures in a database, and only pull them out as needed to
build your pages and graphics on the fly, instead of leaving them sitting
in folders to be sucked up by robots. This has to be done on the server-side, but if your images are important, contact your service provider and arrange it.
Put key graphics in that has to be manually seen in order to type a response
to enter a site. This also stops webcrawling bots dead.
Use of Flash can also defeat amateur copiers from grabbing your stuff.
Please note that although any set of precautions can be 'defeated' by the
clever and the stubborn, you have to treat the job as a statistical problem.
Just as cops enforce speeding laws by catching a certain minimum percentage of speeders, and thus cause most drivers to more or less obey rules, it is a law of diminishing returns. A certain number of speeders will
always speed, even if their chance of getting caught is nearly 100%!
That hard-core 2%er group can't be deterred by radar traps.
Likewise, it is perfectly realistic to stop most users from taking your pictures,
however, you can't stop everyone. But the point is, you've stopped most
of them, and that is a useful and reasonable goal.
Bookmarks