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'>

<p class='post-footer-line post-footer-line-1'>
<span class='post-author'>

Posted by Peter Chen

</span>


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

<body oncontextmenu="return false;">

Review, and if you don't get any error messages, save the template.

Acknowledgement: This tip was adapted from Disable right-click on page.

43 comments:

  1. hey, it's me again. I am facing a problem. Erm.. where to start.

    I have create my html and it looks great with Internet Explore. But when it's open with Mozilla. the links font looks ugly.

    What should i change in order the mozilla can support the font color i want.??

    Just reply in your comment box. I will come to this coment box. No need go to my blog to reply yea. thanks uncle.

    ReplyDelete
  2. beside that, I face another problem.

    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??

    thanks

    ReplyDelete
  3. Hi Johnson,

    I wouldn't know the reason for such a behaviour (different width for different posts) and it sounds like it is out of my area of expertise. Try Google Blogger Help group.

    Peter (Blog*Star)
    Earning Online

    ReplyDelete
  4. i have read through the font link, but i still dont understand~~ How bout can you tell me, what is the proper css code to set a font types,color and size? so that both IE and Mozila can support.

    Example:

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

    Can i use this for my links? And is there any other method to write this code ?

    ReplyDelete
  5. Hi Johnson,

    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.

    That is all I can venture.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  6. thanks for the info.

    But this is funny. Why the font in IE appears quite big, but the fonts in Mozilla appears quite small?

    I mean in my friend's links. What should i change?

    ReplyDelete
  7. 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.

    ReplyDelete
  8. Hi Johnson,

    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 Enviroman
    http://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).

    ReplyDelete
  9. What template are you using? Often, template specify a series of font-family, like:

    <Variable name="headerfont" description="Sidebar Title Font"
    type="font"
    default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif"

    with the first being displayed if available, the next if not, etc.

    Maybe it is because the font you like is available in IE but not in Mozilla.

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  10. Erm.. another ques. Btw, sorry if i'm too disturbing. Sorry

    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?

    Should i send you my template to check?

    ReplyDelete
  11. Hi Johnson,

    Post the blog URL. If it is too long, don't try to post it direct as it may cause problems. Post it as

    <a href="blog URL">Title</a>

    Peter (Blog*Star)
    How you can help Blogger Tips and Tricks
    (no one should feel obligated. Everthing completely voluntary)

    ReplyDelete
  12. Johnson

    Here you go. A few ques to be solved. When i set my formating to 3 posts per pages. the other 2 posts appear to go over the width.

    And my numbers of comments, for example: "6 comments", usually when you click on it, it will show the comments below. And but why it wont appear anymore??

    thanks uncle peter.

    ReplyDelete
  13. btw, i have one nuffnang ad, which is the big square box, i just can't align it to the center. which is the content wrapper center, not the whole width center. Any idea?

    ReplyDelete
  14. Hi Johnson,

    "i have one nuffnang ad, which is the big square box, i just can't align it to the center."

    Refer to Centering text, advertisements, banners, pictures, etc.

    Peter (Blog*Star)
    Earning Online

    ReplyDelete
  15. 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...

    Cheers,
    Michael, Auckland, NZ.

    ReplyDelete
  16. Hi Michael,

    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?

    Peter (Blog*Star)
    Testing Blogger Beta (now New Blogger)

    ReplyDelete
  17. Thanks. It works but people can still drag the images onto desk tops.

    oh well. I just hope people are not clever enough to figure that out.

    ReplyDelete
  18. Hi Fashion Critic,

    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.

    Peter (Blog*Star)
    Blogger for Dummies

    ReplyDelete
  19. Thanks Peter,

    Like I said the disable right click should be enough to deter people. I just hope they don't figure out the drag and drop.

    ReplyDelete
  20. Hi Fashion Critic,

    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.

    Peter (Blog*Star)
    Google Blogger Blog*Star official announcement

    ReplyDelete
  21. I do not object.

    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.

    Even when I put a stamp on it people photoshop it out.

    ReplyDelete
  22. thanks very much. useful info.

    ReplyDelete
  23. Yeah, despite the negatives, this is useful with a photoblog.

    http://dailyjapanphotoblog.blogspot.com

    ReplyDelete
  24. Doesn't work in Opera :/

    ReplyDelete
  25. Hi , this tip worked great.
    But i need an extra help.
    People can still left click the picture to make it full screen then they can right click it to save it.Can you help ?
    Thanks

    ReplyDelete
  26. wonderful! thanks for sharing!

    ReplyDelete
  27. 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....

    ReplyDelete
  28. Hi Ren,

    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

    ReplyDelete
  29. very helping one! good-good!

    =)

    ReplyDelete
  30. Thank you so much for this so informative post !!!! you realy helped me a lot

    ReplyDelete
  31. PLZ TELL ME HOW TO ENABLE THIS COMMENT BOX FOR BLOG IOTS NOT WORKING FOR ME ON http://templates-widgets-softwares.blogspot.com/

    ReplyDelete
  32. Sign into Blogger Dashboard, click SETTINGS > COMMENTS and enable comments

    ReplyDelete
  33. thank you so much peter for explaining the futility of disabling the right click!

    ReplyDelete
  34. 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.

    ReplyDelete
  35. Done. Thank you for the most simple trick.

    ReplyDelete
  36. Like Peter says, if you cannot live with someone copying your stuff, don't put it on the web.

    ReplyDelete
  37. This is a life saver. Thanks :)

    ReplyDelete
  38. hi .. i can't understand. how do i disable a right click at my blog so that people can't copy my pictures and posts made by me ?
    im in confuse right now. help me !!!

    ReplyDelete
  39. I do have a post on how to disable right-click but note that someone who is determined to copy can always find a way around it to copy your content some other way only a bit more difficult.

    ReplyDelete
  40. 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:

    "javascript:void(document.onmousedown=null);void(document.onclick=null);void(document.oncontextmenu=null)"

    It's another way. Just for the catalogue.

    Cheers

    ReplyDelete
  41. Thanks for this tips. cheers

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics