I have created a website that centers around nature photography. I have a subscription based section, where users can download the photographs. I need to prevent users from downloading the thumbnail photos, unless they are logged on with a valid subscription. How do I get about doing this?
Prevention of right clicks, is what I would recommend. This is because the right click produces a menu that allows users to do various options. All browsers give the option of saving the image onto the computer when the right hand mouse button is clicked on an image. The most common option is "Save Image As".
The following screen shot shows the options in browsers such as Google Chrome, Firefox and Internet Explorer. All allow saving of the respective image via this special menu. You can insert the following code to prevent the right click button.
WARNING:Â The code is downloaded from the internet. It may or may not work but worth giving it a try! It shows an alert box whenever the right button is pressed. This effectively cancels the context menu from appearing.
<SCRIPT LANGUAGE="JavaScript1.1">
<!– Begin
function right(e) {
if (navigator.appName == 'Netscape' &&
(e.which == 3 || e.which == 2))
return false;
else if (navigator.appName == 'Microsoft Internet Explorer' &&
(event.button == 2 || event.button == 3)) {
alert("Sorry, you do not have permission to right click.");
return false;
}
return true;
}
document.onmousedown=right;
document.onmouseup=right;
if (document.layers) window.captureEvents(Event.MOUSEDOWN);
if (document.layers) window.captureEvents(Event.MOUSEUP);
window.onmousedown=right;
window.onmouseup=right;
// End –>
</script>
Put a transparent image layer on top of your image. This technique requires JavaScript and positioning of layers. You can have a layer with a transparent gif image about the same size as the background image, with around five pixels larger around the borders.
This is like putting a "Window Frame" in front of your image. You can use the "z-index" property to set the layer ordering.Â
The div tag holding the transparent image need to be "on top" of the image container. Therefore, you may need to use absolute positioning to "fit" the window. The following illustration attempts to show what I mean.
| Web Page | Â Grid or Table | Image | Â Div with transparent image | Â <= Web User |
When the web user clicks on the image, he is actually clicking on the transparent image and not your actual image. Therefore when the user selects to save the image, he actually saves the transparent image and not your original image.
Use CSS and put all your images as background images. This totally prevents users from saving the image using the mouse button. This is because the CSS engine paints the bitmap onto the screen and does not create a window handle like the img tag.
You will need to redo your layout as such to have the place holders the same size as the image. If you are using a table structure to hold the images, then you need to fix the width and height of the table divisions to be of the same size as the image. You then set the style attribute of each table division by using the following CSS attribute:
background-image:Â url(your image) no-repeat
The above code states to generate the background using the image specified by the URL and not to repeat it. This allows you to safely use your images, as a background rather than putting it in the foreground.
Thank you experts for your suggestions. I have one unique problem though. I am using a off the shelf product for the website and the pages are encoded! I have no way of modifying the source code. Do I have a choice in this matter at all? The facilities available by this product is only uploading of the images and managing the subscriptions and promotions. It is really hitting the bottom line when I see my images being used in other sites.
In that case, use a water mark on the thumbnail images. Watermarks are special marks that are embedded on the images. It is a light pattern that is stamped across the image. Light enough so as not to distort the image but prominent enough so that users can see the embossed water mark on top of the image.
This is what picture publishers are doing these days. They place their trade-mark right in the middle of the image. The over laid image makes it difficult for the downloaded image to be edited and restored to the original image. Popular websites such as "Getty"images use a watermark on all public images. Â
This method allows free downloading of the image and makes your trademark visible on any other site, who choose to use your images. Further more, you can use a reduced color scheme for the thumbnail images, but this method is highly discouraged. Images need to be crystal clear and vibrant to bag a subscription.
You can tag the images with properties such as author and copy write information. JPG images allows tagging of additional meta data such as location, camera type used, focus length, etc.
You can embed your information into it so that you can detect if an image used as is yours or not. However, if the image is edited, this information may be wiped out.
Therefore, I feel that the watermark solution is the best recommended method, if you only have images to play around with. You can use a third party server side image generator engine, to automatically embed your water mark when you upload the image.
Since you are not allowed to modify the source code, you can host a background scheduler to automatically replace files with a water-mark when it detects an image without a water mark. There is another option using VRML (Virtual Reality Modeling Language) but that requires editing the source code.
Using a watermark is what i choose! It requires extra time to use an image editor to embed a water-mark. But I did find a tool that will automatically set the water mark given a list of files. It is a desktop application but it does the needful! I have posted a suggestion to the company that i purchased my current website to add the automatic watermarking as a new feature in their product. Hopefully they would have it in their next version! Thank you experts for sharing your knowledge!
