Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Disable Right Click Context Menu On Your Blog Images

by Durodola Ridwan | Saturday, January 26, 2013 | 6 Comments

The most popular way bloggers use in protecting their site content is by disabling right click on the whole blog content, but this action makes some loyal readers to feel depress with limited functions associated to the right click such as open link in new window, bookmark this link, reload and back. But you can still protect your blog images by disabling right click on only images and not the whole blog, which still makes sense.
This effect can be apply to a single image or the whole images on your blog, using a few line of code. both the two hacks will be shared in this tutorial, and for a demo of this hack, simply click on the image below, and see what we are talking about. Cool right?



How To Disable Right Click ON Single Image

In other to disable right click on a single image, you will need to add a context menu event handler code into the image tag. The following code is the code you need to insert into your image tag.

oncontextmenu='alert("Image protected");return false;'

Now in your post editor, simply switch to HTML mode when your are about to disable an image. The image tag will look as follow:

<img border="0" src="http://4.bp.blogspot.com/-TMVJ-cIhneA/UQP9exo8jsI/AAAAAAAADUg/8OIbABt_Ui4/s200/disable+right+click+on+image..png"  />

Adding the context menu snippet into to the image tag, the final result will look as follow:

<img oncontextmenu='alert("Image protected");return false;' border="0" src="http://4.bp.blogspot.com/-TMVJ-cIhneA/UQP9exo8jsI/AAAAAAAADUg/8OIbABt_Ui4/s200/disable+right+click+on+image..png"  />

You can change Image protected to your preferred text as it is the alert text that will appear when a reader click on the protected image.


How To Disable Right Click On All Images

  • Go to Template > Edit HTML > Proceed
  • Use ctrl F to find </head> and paste the following code after/below </head>

<script type="text/javascript">
//<![CDATA[
/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Disable context menu on images by www.realcombiz.com
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ */
    function nocontext(e) {
        var clickedTag = (e==null) ? event.srcElement.tagName : e.target.tagName;
        if (clickedTag == "IMG") {
            alert(alertMsg);
            return false;
        }
    }
    var alertMsg = "Image context menu is disabled";
    document.oncontextmenu = nocontext;
//]]>
</script>

The code above will disable context menu on all your blog images and replace it with an alert box.

Hope you love this new hack?
Suggestion/comments are highly welcome, as we love to hear from you and feel free to share it with friends and followers using the share buttons.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

6 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. gud work man..its work fine.
    but no use of it unless u disable the image url link.
    it only disable right click not left click. :-p

    ReplyDelete
  2. Thanks for this post. I think this is a good idea to protect our site. Is there something for the WordPress too?
    website design

    ReplyDelete
  3. Yeah, it worked, thanks you so much realcombiz

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger