Skip Navigation | Groups

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

Tags

Graphics
Security

2009120203 Email to Ronx
 

Protecting images: required HTML

The HTML 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 Image

The protected images are placed as backgrounds in <span> elements, which in turn are contained in paragraphs (<p>). The <span> is floated to the right of the paragraph, and relatively positioned. The positioning enables the warning message to appear in the correct place, no matter how the page is subsequently edited or fonts changed by the user, etc.

The complete HTML for a (generic) image is:

<p>
Open the paragraph containing the image.
<span id="picXX">
Open the <span> containing the image - XX is unique for the image - numbers starting from 1 are ideal.
<a href="javascript:;" 
Start a link - this enables hover and click events to happen in all browsers. The link goes nowhere.
onmousedown="giveWarning('cwarnxx');">
When a button is clicked (left or right) the onmousedown event is fired which opens the warning message. Again, XX represents the image, and should (for sanity reasons) be the same as in picXX.
<img alt="alt text" height="64" width="100"
The height and width is the dimensions of the protected image, the alt-text describes the protected image.
src="/images/tp.gif" />
tp.gif is a transparent gif. This "protects" the visible image.
</a>
Close the link
<span id="cwarnXX" class="cwarn">&nbsp;</span>
This <span> provides the warning. It is normally hidden, but the Javascript behind the onmousedown event fills in the warning text and reveals the message. Again, the XX must be the same as the other XXs above. The class="cwarn" is common to all warning messages.
</span>
Some descriptive text.
Close the <span> opened above, and (optionally) provide some descriptive text for the protected image.
</p>
Close the paragraph.

The finished HTML for a single image, with the warning and container, is:

<div id="gallery">
<p><a href="javascript:;" onmousedown="giveWarning('cwarn1');">
<span id="pic1">
<img id="img1" alt="Austin 7 - 1935"
height="64" src="/images/tp.gif" width="100" />
<span class="cwarn" id="cwarn1">&nbsp;</span>
</span>
</a>
This is an Austin 7 from around 1935 seen here in a chalk quarry near Maidstone, Kent.</p>
<!-- Other images go here -->
</div>

The images (in their paragraphs) are placed in a container, which allows easy setting of link properties.

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.