Protect Images Using a Transparent GIF or PNG
This technique uses a transparent "cover" to protect your web page images. Here's what you need to do:
- Place your image on the web page, preferably inside its own layer (div).
- Create a transparent gif or png file. This can be the same size as your image but it doesn't have to be. For example, you could create a single 1-pixel transparent gif to use as covers for all your images — you just need to specify the width and height in your HTML.
- Place the transparent image alongside the original image, but use CSS to position them in the same place (position:absolute).
- Use CSS to make the transparent image appear on a layer above the original image.
The end result is that when a visitor right-clicks the image to save it, they're actually right-clicking and saving the transparent image instead of the real one. Try it with the photo on the right.
Here's the code I used, which you should be able to adapt to your situation:
<img src="kids.jpg" width="180" height="186" alt="" style="z-index:0;position:absolute;" />
<img src="cover.gif" width="180" height="186" alt="My Kids"" style="z-index:1;position:absolute;" />