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 />
©RxS Enterprises<br />
<span class=\"red\">Do not copy</span><br />
[ <a href=\"javascript:;\"
style=\"cursor:hand;cursor:pointer;\"
onclick=\"removeWarning('" + id + "')\">
Close window</a> ]";
|
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.