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 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:
|Open the paragraph containing the image.|
|Open the <span> containing the image - XX is unique for the image - numbers starting from 1 are ideal.|
|Start a link - this enables hover and click events to happen in all browsers. The link goes nowhere.|
|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.|
|tp.gif is a transparent gif. This "protects" the visible image.|
|Close the link|
<span id="cwarnXX" class="cwarn"> </span>
Some descriptive text.
|Close the <span> opened above, and (optionally) provide some descriptive text for the protected image.|
|Close the paragraph.|
The finished HTML for a single image, with the warning and container, is:
<img id="img1" alt="Austin 7 - 1935"
height="64" src="/images/tp.gif" width="100" />
<span class="cwarn" id="cwarn1"> </span>
This is an Austin 7 from around 1935 seen here in a chalk quarry near Maidstone, Kent.</p>
<!-- Other images go here -->
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.