How to Lock a JPG From Being Copied
- 1). Edit the website or blog's HTML. Log into your website or blog. Open the webpage or blog post in which you want to lock JPG files from being copied.
- 2). Prevent a user from right clicking and hence copying the image file. Insert the following code above the “</body>" tag at the end of the page:
<script language="JavaScript1.2">
/*
Disable right click script II (on images)- By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
var clickmessage="Right click disabled on images!"
function disableclick(e) {
if (document.all) {
if (event.button==2||event.button==3) {
if (event.srcElement.tagName=="IMG"){
alert(clickmessage);
return false;
}
}
}
else if (document.layers) {
if (e.which == 3) {
alert(clickmessage);
return false;
}
}
else if (document.getElementById){
if (e.which==3&&e.target.tagName=="IMG"){
alert(clickmessage)
return false
}
}
}
function associateimages(){
for(i=0;i<document.images.length;i++)
document.images[i].onmousedown=disableclick;
}
if (document.all)
document.onmousedown=disableclick
else if (document.getElementById)
document.onmouseup=disableclick
else if (document.layers)
associateimages()
</script> - 3). Protect the image by editing its CSS code. This will allow a user to copy and save the image to his computer but he will save a blank image instead of the one he tried to copy. Insert the following CSS code:
<div style="background:url(http://example.com/sample.jpg);width:100px;height:100px;">
<img src="http://example.com/sample.png" width="100" height="100"/><span style="float:left;color:white;margin-top:-100px;"> © Your_Blog</span></div>
Replace “http://example.com/sample.jpg” with the URL on which the image is uploaded.
In the above code, edit the height and width parameters to give the image the required height and width. Keep the margin top attribute equal to the height of the image.
