Featured Scripts
& Tutorials

CSS Tutorials

PHP Watermark Script

PHP Automatic Thumbnail Maker

JavaScript Multiple Slideshows

Google Adwords PPC Calculator

SMTP FormMail Script with Attachments

Image Tools/Scripts

Server Log Tools

JavaScript Tools & Tutorials

No-Frames 1-File Menu

Pre-Populate Forms with Javascript

SEO Tips & Tutorials

Image Shield© Anti-Hotlinking Scripts

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. I've also added a JavaScript method of preventing right-click image copying that doesn't require disabling all right-clicks.

Hotlink Blocker PHP Script

This script is a good option for website designers who 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 graphic content 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, but using Image Shield will discourage casual copiers and it will prevent hotlinking (ie. using your images on other websites).

Once you've installed the "imgShield.cgi" script in your /cgi-bin/ directory, or the "imgShield.php" script in an appropriate 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 methods used in these scripts are very old and very simple, but still very effective.

Prevent Images From Being Copied Using CSS

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:40%; 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

Block Only Images From Being Copied Using JavaScript

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. Click Here to toggle the image protection on and off.

var cMessage = "Please don't copy the images here.\n\nAsk for permission to use them.";
var rdImgShieldFlag = 1; // initialize on/off switch flag (0=off, 1=on)

 function initRDImgShield() {
  var el = document.getElementsByTagName('img');
   for (i=0;i<el.length;i++) {
    if (window.addEventListener) {
     el[i].addEventListener('mousedown', rdImgShield, false);
      } else {
     el[i].attachEvent('onmousedown', rdImgShieldIE);
    } // endif addEventListener
    el[i].oncontextmenu = function () { return false; }
   } // end for i
   rdImgShieldFlag = 1;	// show imgShield is enabled
 } // end initRDImgShield

 function rdImgShield(e) {
     if ((e.which == 3) && (rdImgShieldFlag == 1)) { 
       alert(cMessage);
       return true;
      } // endif e.which
 } // end rdImgShield()

 function rdImgShieldIE() {
      if (event.button == 2) {alert(cMessage); return false; }
 } // end rdImgShieldIE()

When this JavaScript 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 still get the normal context menu.

The JavaScript file "imgShield.js" is included in the Rainbo Design Image Shield© package that you can download using the form above.

This page was last modified on August 27, 2020