The Original Web-Wise-Wizard
Web Authors, Web Developers and Webmasters Internet Toolbox
Best viewed at 1024 x 768 using a colour depth greater than 256

Disable Right Click - Disable Image Toolbar

This page was completely rewritten in August 2005
No more leeching your Web Images
No more copying your source scripts

Making Life Difficult ...

Disable right click. Disable image toolbar. Stop them leeching your images. Stop them viewing your source Markup. Stop them hot linking to your images and stealing your bandwidth. Stop them breaching your Copyright, your work belongs to you. You want to display your work on the Web for others to see, not give it away. These are the feelings of a large number of Website owners and this JavaScript tutorial explores different methods they can use to help protect their work.

Before we start exploring these different methods we would sound a note of caution. If you are publishing your work on the World Wide Web and you use the methods outlined on this page and elsewhere, then you can stop most of the abuses most of the time but not all of the abuses all of the time. If someone is intent on grabbing your work and they have enough knowledge then they can probably do so.

Microsoft Image Toolbar ...

If you are trying to protect the images on your Web page then one of the very first things you must do is to disable the Image Toolbar that activates in later versions of Internet Explorer, when a user places their mouse cursor over an image. From a users point of view the Image Toolbar can be a useful feature and it will defeat our 'disable right click' script if you do not disable the toolbar. According to the Microsoft documentation, the Image Toolbar will only activate for images that are at least 200 x 200 pixels in size.

Use this Markup to disable Image Toolbar for all images on the page ...

<meta http-equiv="imagetoolbar" content="no">

Use this Markup to disable Image Toolbar for individual images ...

<img src="no-more-leeching.gif" width="250" height="250" galleryimg="no">

Disable Context Menu ...

Disabling the context menu (right click menu) in recent popular browsers is fairly straightforward. Stopping those users that are using a Microsoft browser, v5 onwards or a Netscape browser, v6 onwards or any browser in the same family including Mozilla and Firefox can be accomplished using the following Markup or JavaScript script.

Add this attribute to the BODY Tag to disable the context menu everywhere on the page ...

<body oncontextmenu="return false;">

Add this Attribute to an IMG Tag to disable the context menu for individual images ...

<img src="no-more-leeching.gif" width="250" height="250" oncontextmenu="return false">

Cross-Browser Demo ...

To give you some idea of the control that is available with JavaScript mouse events we have prepared a small demonstration that allows you to enable or disable the users right mouse button at will. You can also decide whether you want to disable the right mouse button on the displayed images only or on the whole page. When the page first loads the default setting is 'disable right mouse button on images only'. Try changing this setting and then test the change by right clicking on an image and then right clicking on any area of the page, away from an image.

Disable right mouse button on page and images
Disable right mouse button on images only
Enable right mouse button on page and images

Web-Wise-Wizard - Disable Right Click Demo

 

Disable Copy/Paste ...

This novel trick will disable mark/copy/paste in recent popular browsers and again, it is also fairly straightforward. Stopping those users that are using a Microsoft browser, v5 onwards or a Netscape browser, v6 onwards or any browser in the same family including Mozilla and Firefox can be accomplished using the following Markup or JavaScript script.

Add these attributes to the BODY Tag to disable copy/paste everywhere on the page ...

<body ondragstart="return false" onselectstart="return false">

or better still add this script to the JavaScript section in the HEAD of your page ...

document.body.ondragstart = "return false";
document.body.onselectstart = "return false";

JavaScript Disabled ...

Although the vast majority of your users browsers will be 'JavaScript Enabled', some users will disable JavaScript in their browsers, simply to stop the execution of your page scripts and then view/copy your page content without hindrance. There is one point that you should watch carefully and that is make sure you provide the replacement page, in our example 'error-no-javascript.html' otherwise the page you are trying to protect will remain loaded and accessible to the user.

Add this Markup to the HEAD section of your page, immediately below the META Tags ...

<noscript><meta http-equiv="REFRESH" content="0;URL=error-no-javascript.html"></noscript>

Disable Browser Cache ...

It would be pretty useless to take all the steps outlined on this page and then have a 'savvy user' view the contents of their browser's cache from where they would be able to snatch all the images and source Markup on your page. In the first META Tag below, the Pragma header is used to specify information not formally defined in the HTTP specification but the most commonly used value is no-cache. This value disables Web client caching of pages and page content in most Web browsers.

Preventing caching can sometimes be problematic because some browsers do not always bypass the browser cache properly and novel one solution to this problem is to include a second HEAD section at the bottom of your web page, in between the closing BODY Tag and the closing HTML Tag. This second HEAD section should contain a repeat of the Pragma no-cache META Tag. Peculiar maybe but there it is.

Include this META Tag in the HEAD section of your page along with the other META Tags ...

<!-- MICROSOFT/MOZILLA/NETSCAPE BROWSERS ALL REQUIRE THIS META TAG -->
<meta http-equiv="Pragma" content="no-cache">

<!-- MICROSOFT BROWSERS REQUIRE THIS ADDITIONAL META TAG AS WELL -->
<meta http-equiv="Expires" content="-1">

and then include this second HEAD section between the closing BODY Tag and closing HTML Tag ...

</body>

<!-- ADD THIS EXTRA HEAD SECTION IF YOU FIND YOUR PAGES ARE STILL BEING CACHED IN SOME BROWSERS -->
<head><meta http-equiv="Pragma" content="no-cache"></head>

</html>

Disable Page Printing ...

This is a Microsoft only solution and you should include these Attributes in your BODY Tag ...

<body onBeforePrint="document.body.style.display='none'"; onAfterPrint="document.body.style.display='';">

This is a CSS cross-browser solution which should be included as a separate section in the HEAD of your page ...

<style media="print">
<--

BODY {
display:none;
}

-->
</style>

Non-Supporting Browsers ...

Some of the less popular browsers appear to make a virtue out of not supporting the various methods outlined on this page. Two browsers that spring to mind in this context are Opera and Safari and If you are trying to protect your pages then the only solution to this problem that I can see, is to exclude these browsers from viewing your pages altogether. For some reason, many browsers seem to try to hide their true identity and in the case of both Opera and Safari the only way to check properly is to test their full User Agent string so that you can redirect them to a 'browser-not-supported' page. The scripts provided below use JavaScript Regular Expressions to accomplish this and if the named browser is detected then the user is redirected to a 'not supported' page. Do not forget to provide the 'not supported' page/s.

Opera Browsers

A typical Opera browser User Agent string ...

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1) Opera 7.54

Locate this script at or near the top of the JavaScript section in the HEAD of your page ...

if(navigator.userAgent.match(/Opera/ig)) {
	location.replace("opera-not-supported.html");
}

Safari Browsers

A typical Safari browser User Agent string ...

Mozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/412 (KHTML, like Gecko) Safari/412

Locate this script at or near the top of the JavaScript section in the HEAD of your page ...

if(navigator.userAgent.match(/Safari/ig)) {
	location.replace("safari-not-supported.html");
}
 

Link Directly To This Page ...

help support free information on the Internet ...

Many users prefer to link directly to individual content pages on Web-Wise-Wizard. If you would like to do this then we have provided the following HTML/CSS link script which you can copy and paste directly into your HTML editor. Alternatively, you might like to use our New Dynamic Link Generator to create a link that more fully meets your own particular requirements.

the link displayed ...

Web-Wise-Wizard - Disable Right Click Use JavaScript to disable right click and disable image toolbar. Stop users leeching your images, viewing your source, hot linking images and stealing bandwidth. Stop them breaching your Copyright.

select/copy the link Markup ...

width="167" height="58" />
Featured Tutorial
Want More Traffic? Increase your Link Popularity and your PageRank by learning how to use Web Directories
Link To Us Scripts
New Dynamic Link Generator
 
If you find this page interesting or useful then others are likely to view it in exactly the same way. Providing a link to the page will be considered by the search engines as casting a vote for the page. In turn, this will help to improve the search engine ranking of the page resulting in more people being able to see the page. Your link really does count so please don't delay.
 
Post your link NOW!
 
 
Disable Right Click Links
 
 
 
 
 
Copyright © 1998,2014, Gilbert Hadley, Liverpool, England