Image Shield© is a script that allows you to hide the paths to image files displayed on your website to prevent hotlinking and discourage copying. It works by replacing the SRC attribute of your <IMG> tags to point to Image Shield with "imgShield.php?file=myimage.jpg" instead of the normal, direct URL for your images. Image Shield does not require a mySQL database, and is now available in both Perl and PHP versions. See the "readme.txt" file included in the package for complete installation instructions and documentation. Updated November 9, 2010.
This script is a good option for website designers who don't or can't use an .htaccess file to control hotlinking of their images, but can use Perl or PHP scripts. The script checks to make sure that the referer matches your domain name before serving the requested image and keeps the file's true directory location hidden from the outside world. It's not a perfect solution, but it can help prevent people from stealing bandwidth from your website. If your site has a gallery or blog, this can be very useful. It will not prevent people from copying your images to their computer. There is no 100% effective means of preventing someone from copying any content that can be retrieved by a browser program. But using Image Shield will often discourage casual copiers.
Once you've installed the imgShield.cgi script in your /cgi-bin/ directory, all that's required to use it is to change the "src" attribute of all of the <img> tags for the images that you want to protect to point to the Image Shield© script. The query string parameters don't have to include any directory paths in order to protect your files from people who would know enough to modify the URL to the image file's true location. The script is very old and very simple, but it is still effective.
Image Shield© is provided free of charge. If you use and enjoy this software, please place
the following link in an appropriate location on your website:
<a href="http://www.rainbodesign.com/pub/">Rainbo Design's Scripts and Tutorials for Webmasters</a>
A popular method of protecting images is to overlay them with a clear .gif file, making it
impossible to simply click and copy the images on a webpage. The image on the right is covered by such a clear .gif
file. You can right-click on it and see your normal options, but the image you'll be copying will be the clear .gif
and not the underlying image. This image protection method works by enclosing the image in a containing
element (I used a <div> for this example) that has it's CSS position property set to "relative" and
it's z-index property set to 1 and it's width and height properties set to match the dimensions of the image to be
protected. Within that containing element you include the <img> tag for the image you want to protect and
another <'img> tag for the clear .gif file. Both of these <img> tags have their position property set
to "absolute" with top and left properties set to 0. The width and height attributes of the
clear .gif file's <img> tag should both be set to "100%". The magic happens when you also set the z-index
property on the <img> tags, with the z-index of the protected image set to 1 and the clear .gif image set to 2.
These CSS settings, in effect, "stack" the two images on top of one another. The actual HTML and CSS for
this example is shown below:
<div style="float:right; width:400px; height:200px; position:relative; top:0; left:0; z-index:1;"> <img src="http://www.rainbodesign.com/pub/imgShield/blockedImage.jpg" width="400" height="200" alt="" style="position:absolute; top:0; left:0; z-index:1;" /> <img src="http://www.rainbodesign.com/pics/spacer.gif" width="100%" height="100%" alt="" style="position:absolute; top:0; left:0; z-index:2;" /> </div>
Another popular, but much inferior, method of protecting images is disabling the right-click in JavaScript. You should avoid this method for two reasons. First, it's even less effective than the CSS method shown above. Second, it's very annoying to users when they can't right-click on a webpage. There are many reasons why users right-click on a webpage besides copying images. On large screens, it's much easier to right-click to get to navigation links than to move the mouse pointer all the way up to the menu or toolbar. And captureEvents() is depreciated, so it's reliability is limited going forward anyway.
If you're determined to disable right clicks on images, the best solution is to use event handlers. This allows you to intercept the right click events on selected elements, like <img> tags. As is often the case, Microsoft Internet Explorer differs from the W3C standards in the syntax for adding event handlers in JavaScript. So you must include compatible code for the different browsers. I created the following JavaScript that will display a warning message when a user right clicks on an image:
var cMessage = "Please don't copy the images here.\n\nAsk for permission to use them.";
var imgShield = 0; // initialize on/off switch flag (0=off, 1=on)
function initRDImgShield() {
var el = document.getElementsByTagName('img');
if (typeof el[0].addEventListener === 'function') {
for (i=0;i<el.length;i++) {
el[i].addEventListener('mousedown', function (e) {
if ((e.which == 3) && (imgShield == 1)) {
alert(cMessage);
return true;
} // endif e.which
}, false);
el[i].oncontextmenu = function () { return false; }
} // end for i
} else {
for (i=0;i<el.length;i++) {
el[i].attachEvent('onmousedown', imgShieldIE);
}
} // endif addEventListener
imgShield = 1; // show imgShield is enabled
} // end initRDImgShield
function imgShieldIE() {
if (event.button == 2) {alert(cMessage); return false; }
} // end imgShieldIE()
Click Here to turn the image protection on and off. When the image shield function is turned on, you can right click on any image on this page and you'll see a pop-up alert message. But you can still right click anywhere else on the page and get the normal context menu.
Note that on browsers other than Internet Explorer, you can't really turn the software off once it's been turned on. This doesn't really matter in practical use because you are unlikely to want to allow the user to turn this function off. The issue is caused by the fact that in order for the JavaScript to have easy access to the event information, I used what's called an anonymous function for the event handler. Sadly, you can't remove anonymous functions used for this purpose.
The JavaScript file "imgShield.js" is included in the Rainbo Design Image Shield© package that you can download using the form above.
Click here to return to the Rainbo Design Tools and Scripts menu.
Image Shield© software Copyright (C) 2002-2011 by Richard L. Trethewey, Rainbo Design Minneapolis. All rights reserved.
Comments or Questions?