Pages

Monday, August 27, 2007

Disable right-click to prvent copying of photos

(If you are only interested in how to disable right-click and you don't want to be bothered with all this arguments about why you should not do it, skip all this and go to the bottom of the post).

This has been requested many times, but in my opinion and also the opinions of many others in the know, disabling right-click to prevent visitors from copying your photo is a very bad idea. To me, it is an exercise in futility. If you still want to do it, I will outline how I did it for this blog Right-click have been disabled for this blog. Note that in that post which contains a photo, you can't right-click on the photo.

Before I show how to disable right-click, try clicking on the photo in Right-click have been disabled for this blog. You will be taken to a page with only the photo. Confirm that you can right-click on the image, select "Save image as" and copy the photo into your computer.

If clicking on the photo does not work, you can always click VIEW > SOURCE and look for the HTML used to display the photo. Below in a scroll box is the portion of the source code for that post. There will be two URLs there, one highlighted in red, and one highlighted in green. To see the green one, you will have to scroll down the box:

<div class='post-body'> <p>There have been numerous requests on a post to disable right-click because it is easy to copy photos by right-clicking on it and selecting "Save image as". Some bloggers just cannot stand the idea of their photo being copied. So this blog is to demonstrate that it is not difficult and is entirely possible. Try right-clicking on the photo below and see what happen:<br /><br /><a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_jizoPL28qCY/RtJYHqGWbPI/AAAAAAAAAmM/GU3Mmr9XkPs/s1600-h/MoreCatsInTown+wit+copyright+notice.JPG"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;" src="http://1.bp.blogspot.com/_jizoPL28qCY/RtJYHqGWbPI/AAAAAAAAAmM/GU3Mmr9XkPs/s400/MoreCatsInTown+wit+copyright+notice.JPG" border="0" alt="Photo with copyright notice. Right-click disabled"id="BLOGGER_PHOTO_ID_5103238216347446514" /></a><br /><br />It is better that you add a copyright notice to your photo using a simple free photo editor like <a href="http://blogger-tricks.blogspot.com/2006/10/using-irfanview-photo-editor-for.html" target="new">Irfanview</a>. More expensive photo editors like Adobe Photoshop can also embed digital watermarks in images which are not visible, but can be detected electronically in case you need to take legal action. But tell me, how many bloggers are prepared to go to court over copyright infringements?<br /><br />This impediment can also cannot deter a determined copycat. All he has to do is to click VIEW > PAGE SOURCE and look for the HTML used to display the photo. He can then go to that page and copy the photo from there. Another easy way is just to take a screenshot.<br /><br />Further, this can cause many inconveniences for your visitors. I am used to right-clicking on a link and choosing the page to open in a new tab with a browser like <a href="http://firefox-alert.blogspot.com/2006/09/what-is-firefox-and-why-you-should-be.html" target="new">FireFox</a> which has tabbed browsing. However, try right-clicking on the link above and see if you can do it?</p> <div style='clear: both;'></div> </div> <div class='post-footer'>

You will be able to find the URL of the photo in the HTML. Just copy the URL and paste it into the address bar of a new tab with a browser like FireFox which has tabbed browsing. If you copy-paste the first URL (highlighted in red) into the address bar of the browser press ENTER and you will be taken to the page with the photo where you can right-click and copy the photo. If you copy-paste the second URL (highlighted in green) and press the ENTER key, you will get a "pop-up" to either open the image with a photo editor or a photo viewer, or save it into your computer.

Another simple way is just to take a screenshot by pressing PRINTSCREEN, open up a photo editor like Irfanview (click BACK button to get back to this page), paste the screenshot into the photo editor window, crop the section you want if necessary, and save.

Fashion Critic also left a comment stating you can also (my own addition: minimise the window so that the desktop is visible) and drag the picture into your desktop. I tested that at Right-click have been disabled for this blog and found that it worked. So I hope you are convinced that disabling the right-click will only inconvenient your visitors but wouldn't do much to help prevent those who want to copy your photos from doing so.

A better way is to add a copyright notice to your photo as described in Put a copyright notice into your photo. More expansive photo editor like More expensive photo editors like Adobe Photoshop can also embed digital watermarks in images which are not visible, but can be detected electronically in case you need to take legal action. But tell me, how many bloggers are prepared to go to court over copyright infringements? But you do have the option to report the copyright infringement by report it to relevant parties by emailing abuse@google.com, abuse@blogger.com, etc., but whether action will be taken will be completely up to them.

Disabling right-click will also cause great inconveniences to your visitors. I used FireFox browser with tabbed browsing and frequently right-click on a link and chose "open in new tab". I get very irritated when I can't do this. I have put two links at Right-click have been disabled for this blog. Try right-clicking on the links there and see what happens. I also often right-click on a link and select "copy link location" to copy the URL into clipboard, but I can't do that for the above blog.

If you cannot stand your photo being copied, don't upload them to the web is my motto.

Disabling right-click

OK, after all the talk about why you should not disable right-click, if you still want to do it, this is how I did it for Right-click have been disabled for this blog. Sign into Blogger to get to the Dashboard, click LAYOUT for the blog which you want to disable right-click. Click the TEMPLATE tab, followed by clicking on EDIT HTML sub-tab. This will take you to the template editor. Search for the tag

<body>

I then added the line oncontextmenu="return false;" into the <body> tag so that it becomes

I have set 3 latest posts in one web page. And when the latest post appear. The rest of the 2 post in the bottom seems like going beyond the width given. Mean the lastest post is okay. But the 2 posts go out of the exact width. Hope you get what i mean. What should i do??

I don't claim to be a CSS expert, but CSS codes should be supported both in IE and Mozilla. It is the font-family that you use that sometimes I think may not be present in both browere (not sure as I think it is in the operating system eg Windows or Linux, not the browser)

As far as I know, CSS like

h2 {font-color: #000000;font-size: 13pt;}

should work in both. For links, you will have things like

a:link { color:#58a; text-decoration:none; }

Where font-family is not specified, I think the browser will use the font family selected as the preferred.

me again! as always, your blog is very informative. whenever i want to do something with my blog or learn a new tip, i always check out yours. i've linked your blog to mine already for easy access...thanks.

I am not expert in everything. There are so many things to consider, the CSS in the template, the computer user preferences set in the browser, etc, so I really can't tell offhand why. Only thing I can suggest is perhaps to check options - preferences in IE and Mozilla.

Peter aka Enviromanhttp://enviromansays.blogspot.com(floods in England, polar ice and ice caps at moutain peaks melting, I think more severe and frequent hurricanes in US, rain when it is supposed to be a dry season in my country, someone from Queensland recently contacted me if I noticed the weather changing. I replied when I was young I had to sleep under the blanket, but now I sleep topless. If I remembered, he said it is freezing in tropical Queensland and now he has to sleep under a blanket. Please folks, take good care of our one and only Spaceship Earth which have no lifeboat. It may not affect us severely now, but it has every chance of severely affecting our future generations. Then they will have lots to be "thankful to us).

I have set my blog to post 3 posts in one webpage. Which mean the latest 3 ofmy post wil be posted up.But why the latest post seems to look right. But the 2nd and 3rd posts go over the margin of its width box. What happen?

Good article Peter - I have found if you save the whole web page with right click disabled photos to a folder on your PC the photo is present to do what you want to do to it. Also watermarks can be erased with a editor using cloning or other tools (may take time and some tricky editing - mixing, merging, selection tools, duplications, etc)(e.g. Ulead photo express). Probably extreme script editing and 3rd party applicatons could quickly remove water marks...

Thanks for the extra piece of information on this issue. I am going to test it when I have the time, make a post if it is as you described it and acknowledge your contribution. If I do that, would you like your name or nickname mention with a link to your site?

Thanks for the tip. I tested it and it worked. I have added that to this post and attributed it to Fashion Critic. If you object or you want me to acknowledge your contribution another way like for example linking to your blog instead of your profile, please let me know.

You have not objected or indicated that you want anything I added in this post changed, so I will leave it as it is until and unless I get a concrete response from you.

As there are so many ways to get around this disable right-click and it inconvenient so many people (I hate it), I see your extra information as extra arguments against disabling right-click, hope that it will discourage bloggers from doing it and hope to my latest editing as it is. There is no point trying to hide information from people.

I only wanted to disable it because I see my work and my pictures used on other sites without being credited. My photos are sometimes hard to find and time consuming and I hate others using them as their own.

Hi, added the text and it worked on the main page....however, if I double click on the image, it will load a page with just the image and still, people can still right click on it....how do i prevent that? Thanks....

Right in the beginning of the post I already stated that there are many ways aroundd this disabling of right-click and only gave the method after telling readers it is not much use. I think if you still want to do it, making the image the same size as it will be displayed before uploading it may prevent the image from being displayed in another web page where one can right-click

But does this stop Grab/Print Screen and Photoshopping? I am doubtful that there will be a real way to stop people from copying your work, the challenge is so that they do not use it for profit, instead of just looking at it for themselves.

You can create a bookmark called "Enable Right Clik". Then you must edit the address of this bookmark, writing a piece of javascript code that will re-enable the right clicks in the page you are visiting. The code you must place as the address of the bookmark is: