Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

    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
    Last edited by Vladdy; 11-05-2002 at 07:38 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #2
    New Coder
    Join Date
    Oct 2002
    Location
    Philippines
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    So, you can try to tear me down
    Beat me to the ground
    I will see you screaming

  • #3
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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).

  • #4
    New Coder
    Join Date
    Oct 2002
    Location
    Philippines
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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....
    So, you can try to tear me down
    Beat me to the ground
    I will see you screaming

  • #5
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Vladdy; 11-05-2002 at 08:04 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #6
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's pretty interesting Vladdy. Not bad. Creative use of CSS for sure...

    However, display:block; would work nicely in place of positioning the element, as it allows inline elements to receive width and height properties.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #7
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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
    Last edited by Vladdy; 11-05-2002 at 10:30 PM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #8
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by Vladdy
    - err, once you put: display:block; the element is no longer an inline element
    I knew that

    BTW, I did test it. Works fine.
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #9
    New Coder
    Join Date
    Oct 2002
    Location
    Philippines
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Originally posted by pharma
    Anyway, why is the image starts to load again when i mouseover the image?

    Still no answer..
    So, you can try to tear me down
    Beat me to the ground
    I will see you screaming

  • #10
    Regular Coder
    Join Date
    Jun 2002
    Posts
    623
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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>
    Last edited by Graeme Hackston; 11-06-2002 at 02:28 PM.

  • #11
    Senior Coder
    Join Date
    Aug 2002
    Posts
    3,467
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    My Site | fValidate | My Brainbench | MSDN | Gecko | xBrowser DOM | PHP | Ars | PVP
    “Minds are like parachutes. They don't work unless they are open”
    “Maturity is simply knowing when to not be immature”

  • #12
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Or better yet:

    <img src="transparent.gif" width="100px" height="100px" style="background:url(real.gif);" alt="Some Image" title="Some Image">
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #13
    PlatinumProject
    Guest
    http://www.vladdy.net/savethis.gif

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

  • #14
    Regular Coder
    Join Date
    Jun 2002
    Location
    United Kingdom Confused: Often
    Posts
    859
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    redhead


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •