Akdora’s Blog

Programming, Oracle, Life, Fun

HTML Image Saving Protection (Save Image As >> Point.gif) April 15, 2011

Filed under: CSS — Akdora @ 11:04 am
Tags: ,

If you have a web page with full of your copyrighted photos and do not want to visitors to save images in (easy way!) to their local computers. Let me show a trick about it.

In the photo (img) section of the page, we have always something like as following;

     <img id="myImg"
      src="http://www.google.com.tr/logoyapsana/images/templates/google_logo_01.gif"
      width="667" height="472"
      style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">
      </img>

On the image, when we right-click to the mouse and click to “Save Image As” command, we can save the image to our local disk. However, if we create a basic css style with a div below of the image, we can prevent this.

The important thing is in here: blank/point image’s dimensions has to be same with original image dimensions and css class of the component should include the following properties.

.BlankPixel { 
     position: absolute; 
     top: 0;
     left: 0; 
}
<div id="Photo">					
      <img id="myImg"
      src="http://www.google.com.tr/logoyapsana/images/templates/google_logo_01.gif"
      width="667" height="472"
      style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">
      </img> 
	</div>
       <div class="BlankPixel"><a href="#"><img src="http://akdora.files.wordpress.com/2011/04/point.gif" width="667" height="472"></a></div>

That’s it. This trick is an only basic measure for basic internet users. If someone want to save the photo, since the resource is downloaded to your computer to show up on the screen. It can be saved in any way.

Here is the full html example:
Copy the code and create a html page called “a.html” and open it. Try to save Google logo and see what happens :) A file dialog box will ask you a location to save “http://akdora.files.wordpress.com/2011/04/point.gif&#8221; file! Not Google Logo!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>My Title</title>
    <style type="text/css">
	.BlankPixel { 
		position: absolute; 
		top: 0;
		left: 0; 
	}
	</style>
  </head>
  <body>
    <div id="Photo" class="Photo">					
      <img id="myImg"
      src="http://www.google.com.tr/logoyapsana/images/templates/google_logo_01.gif"
      width="667" height="472"
      style="border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">
      </img> 
	</div>
	<div class="BlankPixel"><a href="#"><img src="http://akdora.files.wordpress.com/2011/04/point.gif" width="667" height="472"></a></div>
  </body>
</html>

About these ads
 

One Response to “HTML Image Saving Protection (Save Image As >> Point.gif)”

  1. Rix Says:

    Is there possible to add this, when I use a website in WordPress.COM.(where you can edit only the css). My idea is, that it applys to all of the photos on the website, by using one css code. Can this be done?


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 26 other followers