The following tutorial explains how you can use a quick cascade-style sheet addition to your images to prevent the right-click/save as option and keep your images your own. This applies a transparent barrier to be saved instead.
Nothing will not stop the ever-persistant person from stealing your images, but this will cause them a bit more work for each image they wish to take.
******************************************************
Update:
-Although the tutorial below does do what it claims, it does not stop saving it as a background. So here is a better fix.
Updated Example
First, create a one pixel by one pixel transparent image (or copy the one from the example above).
Now, when inserting your images, insert them with a $div# tag which allows for layering of images, and apply it as a background:
$div style="position:absolute; top:10; left:10; width:400; height:75; z-index:1; padding:0px; border: #000000 1px solid; background-image:url(yourImage.ext);"#$/div#
In your header, create the following css script:
$style type="text/css"#
$!--
div#cover{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background-image:url(overlay.gif); image-
repeat:repeat;
--#
$/style#
Now, inside the div of the image you wish to protect, apply this transparent overlay by placing the following:
$div id="cover"#$/div#
Yes, it is another background div layer, but this one will sit above the other one, removing the usefulness of the right-click. Even when view background image is chosen, it simply shows the one pixel transparent image placed over top.
The full html page:
$html#
$head#$title#Overlay Example$/title#
$style type="text/css"#
$!--
div#cover{ position:absolute; top:0; left:0; width:100%; height:100%; z-index:2; background-image:url(overlay.gif); image-repeat:repeat;
--#
$/style#
$/head#
$body#
$div style="position:absolute; top:10; left:10; width:400; height:75; z-index:1; padding:0px; border: #000000 1px solid; background-image:url(yourImage.ext);"#$div id="cover"#$/div#$/div#
$/body#
$/html#
View the example to see the effect. It works for both Internet Explorer and Firefox. I have avoided the layer-background-image feature on purpose as it is not globally supported, and your images may not be protected or just simply not seen at all.
******************************************************
This example has the image in a table. For an example in use, check out:
Signatures
*This is a list of signatures and creation I did for a friend, but attempt the right-click and it cannot be saved.
$td height=98 width=416 style="background-image:url('http://www.marvingohan.com/images2/NH/1full.PNG')"#
This works for Firefox and Internet Explorer and probably all the rest.
Questions/Comments: [email protected]
-William. §
