Disable Right-Click in Blogger (Unsavable Pictures)

After the post on Unselectable Text in Your Blog Posts many people have asked how to make the images unsavable too. As before, there are always ways around this if a user really wants, but again, let's make it difficult for them!!

After trawling the internet and trying out every code I could lay my hands on there was only one which I particularly liked. There are others dedicated to just images but they did not work as well as I thought they should. In short, the best way is using JavaScript to disable the right-click function of the mouse completely on your site.

NB This completely disables the right-click for everything. We will come back to this later when explaining how to allow people to open a link in a new tab/window without this funtion.

To add the JavaScript on Blogger we must do this in a new Gadget. So click "Add a Gadget" somewhere at the bottom of your Design page and from the options presented click on "HTML/JavaScript". Then simply paste the following code:

<script language=javascript>
<!--


//Disable right mouse click Script
//By Maximus (maximus@nsimail.com) w/ mods by DynamicDrive
//For full source code, visit http://www.dynamicdrive.com


var message="XXXXXX Put your own message here XXXXXXX";


///////////////////////////////////
function clickIE4(){
if (event.button==2){
alert(message);
return false;
}
}


function clickNS4(e){
if (document.layers||document.getElementById&&!document.all){
if (e.which==2||e.which==3){
alert(message);
return false;
}
}
}


if (document.layers){
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById){
document.onmousedown=clickIE4;
}


document.oncontextmenu=new Function("alert(message);return false")


// -->
</script>

Near the top of the code, you will see a line that says var message="xxx"; Type your own message that will pop up when a user right-clicks here inside the quotation marks.

I suggest that this is a great place to mention to people the alternative method of opening a link in a new tab/window. For example use the following:

"Right-click has been disabled. To open a link in new tab: [1] hold CTRL + Left click for Windows, [2] hold COMMAND + Click for Mac"

This way you can give instructions to users unfamiliar with browser shortcuts.

I recommend you not to add a title to leave the gadget invisible on your pages. Unfortunately an invisible gadget still takes up vertical space. so I suggest you put this gadget at the very bottom of your blog near the Attribution.

The last thing you must do is to remove the hyperlink from each image you upload that links to the picture. Feel free to change the link to another website, but if you leave the link to the image they can click to open it, and then save it easily!

I hope this helps, any comments or suggestions, please feel free to get in touch.