Easiest Way to Protect Image from Copying

Let's say, you don't want your image to be copied? Nah, that is nearly impossible. As of now, I don't know how to do it! Anyway, this post will just prevent people from copying your image by disabling the image link.

Here's the sample below:

breanne durren

When you right-click the image above, you won't see an option to save the image, at least if someone will copy your "precious"  photos, they'll do it the hard way. :D

So, enough with the talk.


You just need to paste a very short CSS code in your template. As usual form Dashboard > Template > Edit HTML then find ]]></b:skin> and paste this code above it.
.separator a{pointer-events: none}
Then Save it!

Want an explanation? :P

<div class="separator" style="clear: both; text-align: center;">
<a href="http://4.bp.blogspot.com/-gkNAVn2xKpw/UBpe4PKJeAI/AAAAAAAACno/I61-n4gSeVY/s1600/vlcsnap-2012-07-31-20h16m18s252.png" imageanchor="1"><img alt="breanne durren" border="0" src="http://4.bp.blogspot.com/-gkNAVn2xKpw/UBpe4PKJeAI/AAAAAAAACno/I61-n4gSeVY/s1600/vlcsnap-2012-07-31-20h16m18s252.png" title="breanne durren" /></a></div>
We just define the class "separator" in CSS because all the image link are enclose with it except those with captions.

Last Words:

Sad to say that "pointer-events" property is not supported by all browsers, here's the list.

Popular posts from this blog

Add/Subtract Single Digit Number in Assembly Language

Set table width to 100% on PDF export in Datatables

A Better Archive Page for Blogger