Don't want people stealing your images off your site?

Well here is a solution I implemented for a client, that makes the

only way to grab your image is thru a screen grab (see example


Now this is not an absolute solution to the problem since there isn't

one, but this is best way I've been able to implement todate, without

adding watermarks to the images.

There are two parts to this implementation.

First you require a cgi script (see below) that: 1/ checks to

see if it's your page calling the image (using HTTP_REFERER) as you

see I'll allow any page from the /test/directory to qualify. If you

use another CGI ensure you explicity disallow it from qualifying. 2/

pipes your protected image from a safe directory 3/ ensures that the

browser won't cache the image file by setting both the PRAGMA and

EXPIRES headers. (even try viewing using page info)

Next part to the solution is to use javascript (see code in html

example below) in your page to ensure the user can't use the image

save feature by: 1/ loading a dumby image which appears when ever the

mouse is over the image, thereby disabling the right mouse, save image

as. 2/ using javascript to load the desired image, then swapping it

with the dumby once loaded and whenever the mouse is NOT over the


Now also remember that your dumby image size has to be the same as the

image you want to display, now this wasn't a problem for me since I

ensured all of my clients photgraphs were the same size.

==== ===========


require "";


if ($ENV{'HTTP_REFERER'} =~ m# ) {

$expires='Expires: Wed, 26 Feb 1997 08:21:57 GMT


$pragma='Pragma: no-cache';


open( FROM, "< $tmpfile" );

binmode FROM;

binmode STDOUT;

# Print out the contents of the image file.

print "Content-type: image/$search{'type'}


print $expires,"


print $pragma,"

"; print "


while (<FROM>) {

print $_;


close FROM;

} else {

## Unauthorized access

print "Content-type: text/html


print "<html><body>copyrighted material</body></html>




====== end

==== begin index2.html==========

<html> <head> <title>image example</title> </head>

<script language='javascript'>

function ImageLoad() {

window.status="Image cache test";

iFake = new Image ();

iFake.src = 'loader.gif';

iReal = new Image ();

iReal.src = '/cgi/';




<body onload='ImageLoad();'>

<a href="" onMouseover="document.images['slide'].src=iFake.src;" onMouseout="document.images['slide'].src=iReal.src;"> <img src="loader.gif" name='slide' border=15> </a>

</body> </html>

=========end index2.html ======