Disable Context Menu for Elements in a Specific Area

Protected Image

The context menu (right-clicking) for the image above is disabled (except in Opera). For the JavaScript to work the image must be in an element with id="protect". In this case this image is in a paragraph tag that has an id of protect. It does not matter what element it is in, but the image must be a child element.

Unprotected image

This image (above) does not have the context menu disable because it is not surrounded by an element with id="protect".

One more thing you need to do to thwart IE users is to disable the image toolbar. Add the following meta tag to your page:

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

JavaScript used

function disableContextMenuInArea() { // find the area with id=protect... var imageArea = document.getElementById("protect"); // loop through all child elements of the protect element... for (var i=0;i< imageArea.childNodes.length;i++) { // find any image... if (imageArea.childNodes[i].nodeName == 'IMG') { // apply this function to disable the context menu when clicked. imageArea.childNodes[i].oncontextmenu=function(){return false;}; } } }

See also