...

View Full Version : Preventing right-click -> Save as on your images (without a line of script)



Vladdy
11-05-2002, 05:10 PM
Just a little trick that works in css compliant browses. Tested on absolutely positioned elements with Gecko and IE 5.5+

instead of
<img src="image.gif" width="100px" height="100px" alt="My Image">

do this:
<a href="#" style="position:absolute; cursor:default; background: url (image.gif); width:100px; height:100px;" title="My Image"></a>

when a user right-clicks he/she will get the link menu instead of image menu :D :D :D

Cheers

Edit:
When I did this, my goal was to be able to specify different images depending on chosen css, not to go around "Save As". So i just stumbled upon the fact that there is no "Save As... " option in IE 5+ (tested) and Gecko 1+ (strange thing Gecko 0.9 in NS 6.2 does have a "Save Image" option, however it is no longer there in Gecko 1+ in Moz 1 and NS 7... go figure...)
Anyway it covers >90% browsers and still much simpler and less annoying to visitors than no-right-click scripts while providing the same amount of "deterrence".

Here is a working example. I'll be curious to hear how it behaves in other browsers/platforms.

www.vladdy.net/NoSaveAs.html

pharma
11-05-2002, 05:27 PM
I'm using IE 6 yet the tag you posted here is not working with my browser. I put in <a href="#" style="position:absolute; cursor:default; background: url ("csoon.jpg")" title="My Image"></a> and it didn't worked. I even indicated the width and height just in case, but still nothing.

Roy Sinclair
11-05-2002, 06:35 PM
If think the use of position: absolute; property also requires the presence of the top and right properties or it's incomplete.

Regardless, the image is still dropped into the browser cache or the user could simply examine the source and place the url to the image into the address line of their browser and get the image without any protection at all.

Protection ideas like this only stop those who have no clue about how it works (and who don't care to learn, a valid position BTW).

pharma
11-05-2002, 06:48 PM
Oh ok. Now I see why it didn't work on me a while ago.. because of the parenthesis..


Anyway, why is the images starts to load again when i mouseover the image? It's annoying....

Vladdy
11-05-2002, 06:48 PM
Roy,

By no means I advocate the quest for ways to protect images, code etc.
The only point I made was:
It gives the same amount of protection (next to none) as no-right-click scripts, but without reducing the usability of the page (assuming it renders right in the first place, hehe).

Absolute positioning does not REQUIRE top and right properties. If they are not present in definition, 0px is assumed.

beetle
11-05-2002, 09:10 PM
That's pretty interesting Vladdy. Not bad. Creative use of CSS for sure...:D

However, display:block; would work nicely in place of positioning the element, as it allows inline elements to receive width and height properties.

Vladdy
11-05-2002, 09:20 PM
Thanks, beetle.
I thought this peculiarity of CSS implementation is neat enough to share.


However, display:block; would work nicely in place of positioning the element,
- Agree. I have not tested it, but setting the position to static or relative with display property block should yield the same result (though I learnt the hard way not to trust M$ to produce the expected layout)

as it allows inline elements to receive width and height properties.
- err, once you put: display:block; the element is no longer an inline element ;) :D ;)

beetle
11-05-2002, 09:37 PM
Originally posted by Vladdy
- err, once you put: display:block; the element is no longer an inline element ;) :D ;) I knew that :p

BTW, I did test it. Works fine.

pharma
11-06-2002, 04:38 AM
Originally posted by pharma
Anyway, why is the image starts to load again when i mouseover the image?


Still no answer..

Graeme Hackston
11-06-2002, 01:22 PM
Your method reminded me of this. It leaves the right click menu exactly as it would be expected to be. I don't use or condone it, I just figured it’s a good addition to the thread.

I think if someone were to use this they’d need to make a different transparent 1x1 gif with a name similar to the background image for each background image. It would allow an unskilled user to make multiple saves without suspecting anything.


<html>
<title></title>
<body>
<div style="background-image: url(real.jpg); width: 200px; height: 200px;">
<img src="1x1_fake.gif" width="200" height="200">
</div>
</body>
</html>

beetle
11-06-2002, 01:55 PM
Yes Graeme, I have seen that used even. A map site (like Mapquest) and a photography site I've visited do the very same thing. Probably confuses the **** outta some folks! :D

Vladdy
11-06-2002, 03:21 PM
Or better yet:

<img src="transparent.gif" width="100px" height="100px" style="background:url(real.gif);" alt="Some Image" title="Some Image">

PlatinumProject
11-06-2002, 10:30 PM
http://www.vladdy.net/savethis.gif

lol i got a round it no matter what ppl can still get the img

redhead
11-07-2002, 05:06 PM
Originally posted by PlatinumProject
lol i got a round it no matter what ppl can still get the img

PlatinumProject: vladdy is not saying that it will stop you getting the image. if the image is on the site, you can get it. vladdy is just saying it is a way that will fool ameteur surfers. anyone can get the image, but this will stop the very many poeple who do use the right click method.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum