Protecting Images with Overlib

While the two (2) images above appear identical and are, in fact, the exact same image, there is a distinction. The top image is protected from a casual user right-clicking on it and saving it to the hard drive. This is accomplished with a bit of subterfuge -- the old switcheroo in action. The user believes he or she is saving the image, but is actually saving an empty transparent image which has been layered over the top of the apparent image.

The Overlib script is being used here to simplify the use of the layering technology. Here is the HTML for this page:

Note that both images are initially placed on the screen with the alt tag set to "unprotected". However, when the protectPicture() function is called, it overlays a transparent image called transparent.gif over the top of the first image and sets the alt tag to "protected". This is just for demonstration purposes to show us that the image is being protected. In actual use, you'll want to remove these alt tags. You'll also want to give the transparent.gif file a different name, such as pic029.gif. The idea here is to fool the surfer into thinking he/she has grabbed the image off the server. You don't want to clue them into the fact that you are using a protection scheme.

The heart of the deception is in the use of the overlib script to overlay the transparent gif image. This is done in the BODY onLoad= handler, which is executed by the browser after the page finishes loading. The file transparent.gif is actually a very tiny totally transparent 20 X 20 .gif image (837 BYTES), so it loads very quickly. The onLoad= handler calls the protectPicture(x, y) function. Passing the x and y parameters into the function makes it reusable if you want to protect more than one image on a page. We use the width and height tags in protectPicture(x, y) to stretch the tiny 20 X 20 transparent image over the larger orginal banner, which is 468 X 60. (You could actually optimize transparent.gif even further by reducing its size down to 1 X 1 with a graphics program, I suppose.) Be aware however that because we are using absolute positioning and because different browsers will format pages differently, it can be very difficult to know exactly where to overlay the transparent image. This example page works pretty well because the protected image is near the top of the page. To protect multiple images on the same page will require a lot of trial and error to position the transparent images properly. The best way to do it is to just have thumbnails and load each full sized picture in a separate HTML document. Another alternative is to have the transparent image stretched over to fit the entire page. However, this will effectively disable any hyperlinks that you have on the page such as ad banners, text links, etc.