Image Protection

  • This script works only in the Version 4+ browsers.
  • This script does not work in Opera 5 and hardly on Netscape 4 on Mac.
  • This script works imperfectly in Explorer 4 and 5 on Windows if the user drags the image from the window.
  • This script does not work in Netscape 4 if the image is inside a link.

    •  

    On this page I explain how you can partially protect your images from being copied. The most common solution is to disable the right click. I have also found a (not completely reliable) way to get the desired effect on Mac, where the user drags the image to his desktop to copy it.

    First of all, please note that this is in no way a true protection of your images. It will only stop newbies, more advanced surfers may turn of JavaScript and copy the image anyway. Besides preventing the image from being dragged is not easy and success is not guaranteed.
    Nonetheless it serves as a polite reminder of the copyright to the users of your site and as a token to the holder of the copyright that you are taking some steps to protect his intellectual property.

    There are two ways of copying an image:

    1. By right-clicking on it and saving the image to your disk (all Windows and Linux browsers).
    2. By dragging the image to your desktop (all Mac browsers and Explorer 4+).

    This script defeats the right-click way and sometimes also the drag way. Try copying the image below.

    The script

    var specialcase = ((navigator.userAgent.indexOf('Mac') != -1) || document.all)
var flag = 0;
var msg = 'This image is protected by copyright.\nWe request you not to copy it.';

function init()
{
	if (!(document.getElementById || document.all || document.layers)) return;
	if (specialcase && document.layers)
	{
		if (document.layers) document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove = special;
	}
	for (i=0;i<document.images.length;i++)
	{
		document.images[i].onmousedown = checkIt;
		if (specialcase)
		{
			document.images[i].onmousemove = special;
			document.images[i].onmouseup = clearIt;
		}
	}
}

function checkIt(e)
{
	if (specialcase)
	{
		flag = 1;
	}
	if (window.Event) theButt = (e.which == 3);
	else theButt = (window.event.button == 2);
	if (theButt)
	{
		alert(msg);
		flag = 0;
		return false;
	}
}

function special(e)
{
	if (flag)
	{
		flag = 0;
		alert(msg);
	}
}

function clearIt()
{
	flag = 0;
}

    and call function init() onLoad:

    <BODY etc. onLoad="init()">

    Explanation

    We work our magic by detecting certain mouse events and then deciding if they're meant to copy an image. As said above, in Explorer and Mac browsers an image can be dragged to the desktop. So first of all we determine if the user uses an Explorer or a Mac browser (specialcase is true) and we set the special variable flag to 0 (I'll explain below).

    var specialcase = ((navigator.userAgent.indexOf('Mac') != -1) || document.all)
var flag = 0;

    Then comes the message for the alert:

    var msg = 'This image is protected by copyright.\nWe request you not to copy it.';
    function init()

    onLoad the functioninit() is executed which initializes the event handlers. First of all we check if the browser can handle the script. If it can't we do nothing.

    function init()
{
	if (!(document.getElementById || document.all || document.layers)) return;

    If the browser is Netscape 4 on Mac, we initialize a mouseMove event for the whole document (it doesn't work on images only) and attach the function special().

    	if (specialcase && document.layers)
	{
		if (document.layers) document.captureEvents(Event.MOUSEMOVE);
		document.onmousemove = special;
	}

    Then we go through all the images on the page and define a mouseDown event for all and attach the function checkIt().

    	for (i=0;i<document.images.length;i++)
	{
		document.images[i].onmousedown = checkIt;

    If we have a specialcase browser, we also define mouseMove and mouseUp events:

    		if (specialcase)
		{
			document.images[i].onmousemove = special;
			document.images[i].onmouseup = clearIt;
		}
	}
}
    function checkIt()

    this function is executed onMouseDown. We hand the event to it in variable e.

    function checkIt(e)
{

    First of all, if we have a specialcase browser we set flag to 1, which means that the mouseMove function goes on alert (see below).

    	if (specialcase)
	{
		flag = 1;
	}

    Then we check if the right mouse button has been used. For Netscape (the only browser to support window.Event, with a capital E) we see if e.which is 3

    	if (window.Event) theButt = (e.which == 3);

    For Explorer we have to check if window.event.button is 2, so we do.

    	else theButt = (window.event.button == 2);

    Now if the user has right-clicked the image theButt is true and we need to deliver our warning. First of all we give an alert with our message. Strangely, it is this action that cancels the special menu that pops up when you right-click on something (except in Netscape 4).

    	if (theButt)
	{
		alert(msg);
    flag = 0; return false; } }

    Home