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 of javascript code that, in one manner or another, will accomplish this. However, most browsers and/or 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.

Next, you need to identify the image you want to display on your web site and make note of its name and dimensions (width and height).

When you have completed the above steps, its time to move to SiteSpinner. Place the transparent image on your work page using the Image tool (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 specify it in CSS code.

Thanks Larry -- this is a interesting tip which I have only just noticed. It avoids disabling the right click menu which is a nasty thing to to do to your visitors.

It seems to me there are three ways a visitor could still get the image (I haven't tested these):
1. By reading the code, and finding the image name.
2. By looking in their browser cache.
3. Firefox has a Media tab under Tools > "Page Info", which might show the image and still allow it to be saved.

It should be possible to avoid issue 1 by 'scrambling' the file name as it appears on page, and using javascript to unscramble.

Is it possible to avoid issue 2 and maybe 3, by instructing the browser to not cache the image?

I fully agree with your points. And I can think of a few other ways to get to the image. I had hoped only to discourage the use of disabling the right-click menu while still offering some level of protection. If someone is determined, they will get what you are hiding.

All this is great, but it takes allot of work. Is there something that will just disable right-click? The reason I need to prevent right-click is that I display artist work. People have unscrupulously right-clicked, saved image and reproduced this great artwork. It is my job to protect the artist work.

There are several javascripts available that will disable the right-click option. Try here for one.

Please be aware that this will not prevent anyone from saving the image. As Bruce has pointed out, Firefox has built in tools/extensions available that can save any image found on a page, or even look in the browser's cache for the image, without using the right-click save option. And if you do not put the images into a protected directory, if I know the URL of the image, I can access it directly from your site.

Your best bet is to watermark the image. While any decent paint program can be used to get rid of the watermark, it would take time and is usually more work than the avarage visitor wants to do.

A couple of things to add Larry's good suggestions:

You can also use the transparent gif trick by just placing a transparent gif image on top of your image in SiteSpinner. That saves the extra css and uploading work. If you 'group' the image and the transparent gif ( with re-rendering off) then they will stay together and you won't need to think about them any more even if you move or resize them.

You can make a quick transparent gif image with SiteSpinner by making a rectangle with 100% transparency and GIF rendering. Then just drag the image from the preview back into SiteSpinner. It then becomes an 'image' in SiteSpinner. In theory you could use the rectangle itself but often SiteSpinner will optimize a transparent rectangle out of existence.

If you use a small gif and scale it rather than size it (with re-rendering off) that will keep the page size down. You could even clone it since there is no background to worry about.

SiteSpinner 'popups' are another one way to deter copying since most browsers won't let you right-click copy from the popup and assuming the thumbnail is usually sized too small to want to copy.

Remember too that someone can always press ALT + 'Prnt Scrn' to copy whatever they see in the browser to the clipboard.

You can make a reasonable watermark fairly easily with SiteSpinner by creating a 'title', sizing it and adding the right amount of transparency. Then just place a copy over each image and 'group' the image and title. Be sure to turn re-render on for the group so that the images are merged into one.

this is a very useful thread for me .. i too
will need to protect lots of images on my site

so on reading, it seems that
1. the transparent rectangle gif, created right in SS and grouped with an image, is the easiest least time consuming option, when you have lots of images to protect. plus it'll scale

2. a text watermark grouped with the image is also easy, as long as you can live with the watermark, which i think i can

so which of these two methods ultimately offers the best protection ?? it's true watermarks can be removed, but as LarryD points out, most will be put off by the time and work involved .. or will they ?

so on balance ??

thanks

I think both are about equal. I keep a blank transparent GIF handy for various reason, so it is easy to import into SiteSpinner and rescale as needed.

I do not have any images that need watermark protection, but if I did, I would create a GIF file with a transparent background that also contains my watermark. Then it could also just be imported in SiteSpinner and rescaled.

I think keeping external GIF files (plain and watermark) would save time over creating one when needed from within SiteSpinner (but I'm lazy).

yep im lazy too - well everything just takes so long, you gotta look for efficiencies

on the same theme of protection

when i have my site up .. if someone goes looking for the location of an image

will the location be on my host, or will it go back as far as the file on my computer ..i think its the host ?

thanks guys .. really appreciate this forum

test

this is what ive done

imported an image into SS with a watermark already on it
imported a transparent giff,
placed it over the image, selected both, and grouped them together ( without going to the properties editor )

they are a group because i tested that and tried grouping an ungrouping

in the preview window, i was still abloe to right click on the image and did the " save image as " ( to my desktop )

went to my desktop, opened it, and the image is copied, intact

what am i missing ??

is the procedure supposed to disable the
" right click ? "

The procedure doesn't disable right click. A save will seem to work normally except that you will find you have actually saved the transparent gif.

Two things to check:
1. Make sure your gif is an actual image file. If you use SiteSpinner, make sure Re-Render is on -- that forces it to make an image file.
2. When you make the group, set Re-Render off -- here is where you want to keep the gif separate from the underlying image.

heres what seems to be happening

i make the transparant gif in Xara and import it

once imported, i checked the properties in preview ..to confirm it's a gif .. it is

i can move it around with the arrow keys, and it remains a gif

however if i resize it, it automatically becomes a PNG

if i group it with the png image i want it to cover ( with re render off ) the new " group " becomes a PNG .. the rectangle no longer exists as a gif it seems

when i check the properties in preview, and click on where the giff rectangle is, it tells me its a PNG

if i go back and ungroup it and go back into preview, it tells me its a gif again

hmm ??

the idea that the transparasnt gif and not the image, is copied with the right click, is a good one, just havnt got it to work yet

This message has been edited. Last edited by: skyrunner,

I only group the two images when moving them to keep them in sync. Before publishing, I ungroup them and make sure the gif image is on top.

quote:

however if i resize it, it automatically becomes a PNG

In the Quick Editor > Object tab, set re-render off. This stops SS from making a new image.

If you do want a new image: leave re-render on, and in the Geometry Editor > Options tab set a Rendering File Format of GIF. This will make a new transparent GIF image. Not a PNG, which as you are doing it, will probably not be transparent. Because the new PNG includes the background (if you don't set render background off in the Geometry Editor), it will be a beautiful copy of your original image

quote:

if i group it with the png image i want it to cover ( with re render off ) the new " group " becomes a PNG .. the rectangle no longer exists as a gif it seems

This shouldn't give you a new image. If you have done it correctly, the gif will remain a gif and the image will remain in its original format. Make sure re-render is still off.

thanks Bruceee and LarryD

with the additional info, ive got it now.
I only have to make one transparent gif ..
copy as many times as i need, resize, move them wherever i want .. so convenient

you guys are awesome .. the attention to detail and support you give to folks on this forum, adds alot to a positive experience using SS

This message has been edited. Last edited by: skyrunner,

Sorry to burst your bubble, but there's no point in this. All a person needs to do is press one simple button on their keyboard (I'll let you figure it out) and anyone can have ANY picture they want from your website. Just put a watermark of your name/pen name over your pictures and be done with it. Unusually determined people will simply use Photoshop to remove the watermark, but this is unlikely to happen.

I'm pretty sure it was stated that this was a deterrent and not a solution. And that there are several ways (not just one) around this.

As an alternative to disabling the whole right-click menu, the suggestions in this thread are very good ones. But as we all know, still not secure.

quote:

All a person needs to do is press one simple button on their keyboard (I'll let you figure it out)and anyone can have ANY picture they want from your website.

What button is that? -- I don't seem to have one

The button is called "PRINT SCREEN." And I can tell you from experience, if someone wants your picture, no amount of right-click disabling will deter them. In some cases they can simply save the entire web page to the desktop and pull the graphic from there.

The only realistic deterrent is the watermark. Again, this is from experience. It's just too much work to edit it out properly.

Hmmm, I pushed that button (Print Screen) and nothing happened -- maybe I need to push some other buttons too