Transparent cover gif

[jhatter]

Hi,

I have a gallery with some thumbnail images and when you click these it opens a larger image in a js lightbox gallery. I would like to put a transparent gif over the thumbnail and the larger image (when it pops up) to give it some protection from being downloaded.



I've had several attempts but can't make it work. I tried this for the thumbnail cover gif

<img src="images/cover.gif" width="162" height="162" alt="xxx" style="z-index:1;position:absolute;" />

and for the thumbnail image

style="z-index:0;position:absolute;"

Please can you help?


Thumbnail html & css:

<div class="gal_img">
 <a href="images/gallery/image_18.jpg" rel="lightbox"><img src="images/gallery/thumb_18.jpg" alt="xxx" width="162" height="162" /></a> </div>

.gal_img {
	border: 0;
	float: left;
	height: 188px;
	text-align: center;
	width: 205px;
	margin: 0 50px 20px 30px;
	padding-top: 10px;
	background-image: url(images/pic_box_bg.png);
	background-repeat: no-repeat;
	display: inline;
 	}

JS gallery css:

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

[keyboard]

From this thread

If there is an image on your site, no matter what someone can get it. They could get the original file off of your server, or they could just take a screen shot of it!

The best way to secure your content is -
Watermark all the images
Low quality images
Put a warning on the page, advising them to not download your content
I believe there is a google project that scans all the sites they crawl on a regular basis for a keyword (or paragraph) that you provide them, for the purpose of seeing if your content is on other peoples sites. Not sure if it'd work with images though...

If you find someone has taken your content (images), contact them and ask them to remove/delete it. Most times this is enough

If someone else is using it on their site and you've contacted them, asking to remove it (but they wont), contact their hosting. Often the host will make them remove that particular object. If none of this works, you could always take them to court, but that is a really extreem measure...


In the end, the best way to keep your data is not to do anything at all!

Most hackers (or to be technically correct; crackers) only do what they do for the challenge. If there's no challenge, they probably wouldn't bother!

If people are downloading your content, just put up a notice asking them to link back to you. It'll show that you made the content and your website may get extra visitors!

I will conclude (wow, that makes it sound like an essay ) by saying that the internet is made for sharing. If you don't want to share something with the world, don't put it on your site!

Thankyou for listening

[bernie1227]

as keyboard said,it is nigh on impossible to stop someone taking the image, if you really don't want other people to steal it, just don't put it up, the only precautions you can really take, are ones that make the image undesirable.

[jhatter]

Thanks for your replies. I quite understand that it is

nigh on impossible to stop someone taking the image

. In this thread I'm just after help with some CSS issues. I'm sure there's someone out there who can help...isn't there?

[bernie1227]

well if that's what your after, i'm happy to help. What is the lroblem woth it currently? is it not covering the image fully?

[jhatter]

Thank you Bernie1227, I appreciate your offer of help.

I guess what I'm asking is what extra html/css do I need to add to that I originally posted to make this work?

I have a transparent gif (1x1px) that I want to cover the thumbnail & larger image. I made several attempts that failed and ran out of patience/time. Unfortunately I didn't keep any of these attempts.

[bernie1227]

hmmm, i thought i've had is that you could actually set the transperant gif for the background image for the image you want to cover, and then apply a z-index higher than that of the actuall image.

[jhatter]

Thanks for your reply, but if you look at the original css I posted there is already a background image being used, so unfortunately your suggestion is not possible (I think)

	background-image: url(images/pic_box_bg.png);