Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

Tags

Graphics
Security

2009120202 Email to Ronx
 

Protecting images: required CSS

The CSS required for the alternate "no right click" script


The code used for the image "protection" used in the example page is in three parts:

Note that this method of image protection has one thing in common with all other methods, IT DOES NOT WORK.

The CSS

The CSS should ideally be placed in an external style sheet - this adds one more obstacle to getting the images, but for this example the CSS is embedded in the <head> section of the page.

#gallery a {text-decoration: none; cursor: text; }
#gallery a:hover {color: maroon; }
This sets the links in the container to have no underlines, and maroon hover colour. The other link colours a:link, a:visited, a:active are taken from the main page stylesheet.
cursor: text; hides the fact that the image is a hyperlink that fires a JavaScript event.
#gallery p {clear: right; }
This clears the right float set in images in previous paragraphs.
#pic1,#pic2, #pic3 {
float: right;
position: relative;
background-repeat: no-repeat;
display: inline-block;
margin:0 1em 1em 1em;
}
This is the common CSS for all the "protected" images. In this example, the <span>s containing the images are floated to the right of their containing paragraph. A margin is applied around the <span> for appearance. The relative positioning allows the warning to be absolutely positioned within the <span>. Each image is represented here -  #pic1, #pic2, #pic3
#pic1 {
background-image: url(/lightshade/images/_tnails/austin7_3_small.jpg);
width: 100px;
height: 64px;
}

Individual image settings - The protected image is the background for the <span>, and the size of the span made equal to the size of the image.

There is one entry for each protected image (total of three in this example).

#pic2 {
 background-image: url(/lightshade/images/_tnails/frog_eye_3_small.jpg); 
 width: 100px;
 height: 64px;
}
#pic3 {
 background-image: url(/lightshade/images/_tnails/anglia_2_small.jpg);
 width: 100px;
 height: 68px;
}
.cwarn {
display: none;
position: absolute;
top: 0; left: 0;
font-weight: bold;
background: #eeeeee;
z-index:5;
}
The warning message is contained in a <span>. This styles the warning for each image, but since each warning is the same, a class can be used for all the warnings.
   

None of the images in these examples are really secure - they can be easily downloaded from the server using the Firefox web developer addin: Tools->Web Developer->Images->View Image Information, and the Developer Tools in IE8 show the image paths (but no clickable links). The images can also be found in the browser cache.