Overlay Image

[yllai]

I wish to restrict user from copying and printing images in my page.I suggested to make the images in my page to be harder to copy and print by using CSS to overlay the images that I want to protect with a transparent...my question is how do I do it? Where can I get these info from? any example or site?

Or you have any suggestion that can meet my request- restrict user from copying, printing, downloading images from my page..

Thanks a lot.

[Purple Martin]

Firstly - it's always possible to copy images from a web page. If you don't want them copied, don't put them on the web.

Secondly - you are right that it is possible to prevent the right-click-save-as method of saving an image by placing a transparent image over the top. For example:

<style type="text/css">
.image1 {
position: absolute;
top: 50px;
left: 100px;
}
</style>
<div class="image1"><img src="realimage.jpg" width="50" height="50"></div>
<div class="image1"><img src="transparent.gif" width="50" height="50"></div>

As you can see, both images occupy the same position on the page. Simply use a transparent gif for the second one so that the first image shows through. Adjust positions and dimensions to suit.

[yllai]

I cant see the images based on the aforemented method?! the transparent images was overlay the original image...

any other way?

[Purple Martin]

hehe it sounds like your transparent image isn't transparent!

[Rambo Tribble]

Perhaps, yllai, you got the impression "transparent.gif" is some kind of generic file. It is not. You have to create it with a graphics program which can save in .gif.

Such a program allows the user to select a color in an image and make it transparent, if saved as a .gif. This allows a designer to float visual objects such as logos and special fonts on varied backgrounds.

If you are using Open Source, you may have some trouble finding a program that supports .gif.

[yllai]

can i save in .jpg

[Rambo Tribble]

A .jpg won't do transparency. A .png will and .gif will. The .png format is supported by open source, such as GIMP. .png just isn't as cross-browser as a .gif.

[Rambo Tribble]

yllai,

It is possible the program you use to process your .jpg's can save in .gif, but you may have overlooked it. Such capability us usually accessed one of two ways:

1) From the File menu, choose Save As. This usually produces a dialog window, which may have a drop-down list of file type choices.

2) From the File menu, choose Export. This generally produces a dialog window, again with format choices for the file being saved.

[sebbothebutcher]

if you're using windows, you can even use mspaint.exe to create a transparent .gif file!

[yllai]

sebbothebutcher, how to make transparent .gif with ms.paint? can you guide me?

[sebbothebutcher]

just create an image of the desired size with mspaint and save it as a .gif, then goto
Image -> Attributes (or Preferences?)
and at the bottom of the window you'll find something like "transparency". there you can select any colour as the transparent color, so just leave the image white and select white as the transpartent color...
that should do the trick... hopefully!