Skip Navigation | Groups

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

Tags

Graphics
Security

2009120204 Email to Ronx
 

Protecting images: required JavaScript

The JavaScript 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 JavaScript and the Warning

The Javascript is used to control the visibility of the warning messages. The message itself is written by the script, this saves duplicating the message for every "protected" image.

In this example, the warning is a simple text warning on a grey background, but the background can easily be changed to an image by adding inline CSS to the warning message.

The message (for this example) is:

All images on this site are copyrighted
©RxS Enterprises
Do not copy
Close window ]

The script can be placed in an external .js file, which makes it usable on multiple pages.

<script type="text/javascript">
Open a script block
function giveWarning(id) {
Declare a function - this function writes and displays the warning message. The position of the message is determined by the parameter "id".
var did,txt;
Declare variables
did=document.getElementById(id);
This finds the <span> that will display the message
txt="All images on this site are copyrighted<br />
&copy;RxS Enterprises<br />
<span class=\"red\">Do not copy</span><br />
[&nbsp;<a href=\"javascript:;\"
style=\"cursor:hand;cursor:pointer;\"
onclick=\"removeWarning('" + id + "')\">
Close&nbsp;window</a>&nbsp;]";

Everything here goes on one line - the line has been wrapped over several lines for clarity.

This is the message that will be displayed. This uses classes ("red" and "green") defined in the main CSS file for this site. A link is also added so that the message can be hidden again. Clicking the link implies that the user has read the message.

style=\"cursor: hand;cursor:pointer\" restores the normal hand cursor for hyperlinks that was removed in the CSS.

did.innerHTML = txt;
Write the message
did.style.display = "block";
Display the message - shows the normally hidden <span> that now contains the message.
}
Close the function
function removeWarning(id) {
Declare a function that removes the displayed warning message. This is fired by clicking the link in the message itself.
document.getElementById(id).style.display = "none";
Hide the message
}
Close the function
</script>
Close the script block

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.