There had been some discussion on the forum in the past on how to prevent a visitor from using the right mouse button and thus disabling the right-click menu. The main purpose seemed to be to prevent the visitor from saving images posted on a web site.

A quick web search will turn up several pieces javascript code that, in one manner or another, will accomplish this. However, browsers and the computer's operating system provide features that allow the visitor to circumvent your attempt and save the image anyway.

This discussion provides another level of image protection that does not require disabling the right-click menu. And while it is not entirely foolproof, it does put a tough obstacle in the way to prevent image saving. The method presented uses a standard SiteSpinner/WebEngine image object and CSS in a custom header.

The basic procedure is to use a transparent image and then draw your actual image as a background image of the transparent image. This accomplishes two things: (1) while the Save Image menu option is still active, the image to be saved is the transparent image instead of your actual image, and (2) since the transparent image "covers" the background, the browser's Save Background feature will not "see" the background to save.

To begin, you must have a transparent image. A GIF version can commonly be found on the web and is usually named spacer.gif. If you have a paint program capable of producing a transparent GIF image, then you can make your own. It does not have to be big; 10 x 10 pixels is enough. If you cannot create the image yourself, a zipped version can be downloaded here.

When you have completed the above steps, its time to move to SiteSpinner/WebEngine. Place the transparent image in your project using the mona-lisa icon. Size the transparent image to the width and height of the image you intend to display. If you intend to use a border, then make sure you turn re-render OFF for the transparent image. If re-render is left on when a border is used, a distracting white border will be visible on the image.

Take note of the object name for the transparent image. Now use the Page Editor and create a custom header. Enter the following CSS code in this header:

<style type="text/css">
#Oobject_name {
background-image:url(path_filename_to_real_image);
background-repeat:norepeat;
}
</style> 

where: "object_name" is the object name of the transparent image (make sure the capital "O" prefixes the object name; e.g., #Oobj2); and "path_filename_to_real_image" is the location and name of the actual image file to be displayed.

Save the custom header. Depending upon where you have stored your actual image and how you entered its location in the CSS code, you can either preview or publish the project to see the effect. Be sure that your actual image is uploaded to your web site. SiteSpinner/WebEngine will not automatically do this for you when you use CSS code.