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:

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.

Implementation:

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/s1600/vlcsnap-2012-07-31-20h16m18s252.png" imageanchor="1"><img alt="breanne durren" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgklLZ5e0R_sq1khMay728J0y39vVR1eRoErV9Q25G0VWaLOKA8IrB7ZkVk1gutyBD9t2hdWvvJj8FqONgkBqKTFInhzxNWWJ-SxJ91IXLhrohT8h0SeqPts0LgFKM3sjJc4qqswHd-GRQ/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.