I have read the previous threads on disable right click but non of the scripts I've come across work in IE8.

 

I did read you can add a transparent png over an image which can work in a similar way. How do do you do that?

 

I know all the arguments, anyone can get an image if they want one etc. but the person who is allowing use of the images wants this sorted.

Hello

 

Do you mean by floating a transparent png image over the top of the image that you do not want copied, that would work but then some one can just do a print screen and cut the image out if they wanted to, can you not put a watermark on the image ?

Yeah, I think he just doesn't want anyone to be able to copy the images, I know you can still do it and obviously I can't stop a print screen but he knows I can stop the right click. I wasn't sure if floating an image over is a better way of doing it. There are about half the pages on the site using images I have to stop people taking (to the best of my ability....which isn't much lol) and the rest are my own and while I'd rather no one took them I'm not going to do anything to stop them either.

I don't want to disable the right click from the whole page, just the images on a few pages.

Hello

 

Do you mean by floating a transparent png image over the top of the image that you do not want copied, that would work but then some one can just do a print screen and cut the image out if they wanted to, can you not put a watermark on the image ?

As Elite said, best way is to watermark the image...

 

But if you want to add a transparent PNG over the top this is how you do it.

 

Make a div container. Set its background as the image you want displayed, and set the divs container to width and height of the image, then in the actualy div you will put your plank png image.

HTML:

<div id="tranimage">
<img src="imagecov.png" width="800" height="800" />
</div>

CSS:

#tranimage{
background:url(image.jpg) centre no-repeat;
   height800px;
   width:800px;
}

 

Should work.

Thanks I'll give that a try.

If the real image is a background image in a div, code sizes for the div and then use the transparent png image with the same size as a normal image inside the div so that it sits on top of the background image. In this method the viewer when he right-clicks may have two options, to save picture (the transparent png) and save background (the real image), but I'm not sure if that happens, perhaps only the option to save the transparent image shows.

 

OR

 

Use layers, probably position: absolute but position: relative can be used instead.

If the real image is a normal image in a div, create the transparaent png the same size and use position: absolute; to place the transparent png over the top:-

 

CSS:-

.photo { position: relative; }

.transparent { position: absolute; top: 0; left: 0; }

 

Markup:-

<div class="photo">

<img src="real-image.jpg" alt="image description">

<img class="transparent" src="transparent-image.png" alt="image description">

</div>

 

Position: relative is needed for the container with the real image so that the position: absolute image takes its positions from the top left corner of the containing div.

Thanks for the help folks.