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="https://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 “https://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="https://akdora.files.wordpress.com/2011/04/point.gif" width="667" height="472"></a></div>
  </body>
</html>

 

CSS Drop Shadows II: Fuzzy Shadows January 7, 2007

Filed under: CSS — Akdora @ 9:02 am

by Sergio Villarreal

We like shadows. We enjoy making them drop and we love CSS and standards, so we wrote CSS Drop Shadows. The little voice in our head approved of it. We thought that was the end of it.

We thought wrong.

The internet being the kind of medium it is, minutes after the publication of the article, we started receiving comments, queries and suggestions for improvements. Most notable among the latter was Phil Baines’ method for keeping the markup simple when dealing with paragraph drop shadows. We are indebted to him.

The most complained-about shortcoming of the technique turned out to be the sharp top and left edges of the shadow, which, although generally acceptable, are unlike what an image editing program would produce (a fuzzy shadow). Given that the shadow image is effectively clipped at those points, we felt this was an unavoidable inconvenience, chiefly due to Internet Explorer’s inability to display PNG’s transparency natively.


Our CSS is :


.alpha-shadow {
float: left;
background: url(img/shadow1.gif) »
no-repeat bottom right;
margin: 10px 0 0 10px !important;
margin: 10px 0 0 5px;
}

.alpha-shadow div {
background: url(img/shadow2.png) »
no-repeat left top !important;
background: url(img/shadow2.gif) »
no-repeat left top;
padding: 0px 5px 5px 0px;
}

.alpha-shadow img {
background-color: #fff;
border: 1px solid #a9a9a9;

padding: 4px;
}

The markup for this effect will be two <div>’’s around our image/block element.

<div class="alpha-shadow">
  <div>
    <img src="img/test.jpg" alt="just a test" />
  </div>
</div>

Rest of writing and reference : http://www.alistapart.com/articles/cssdrop2