SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Zealot themissingelf's Avatar
    Join Date
    Nov 2001
    Location
    UK
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Disable Left-Click on Images

    Hi...

    I've created a "media" page for a client with large images for media publications to download for print purposes. Whilst the page is not available from the main site and protected from search listings via robots.txt, I still want to force visitors to right-click on the small, web friendly sample image and select "Save link as..." from the menu (rather than left-clicking and randomly opening the images in their browser).

    I'm using this script in the HEAD section:

    Code:
    <script type="text/javascript">
    function whichButton(event)
    {
    
    if (event.button==2)
      {
      
      }
    else
      {
      window.stop();
      alert("Please right-click and select Save Line As... from the menu");
      }
    }
    </script>
    And this in the link:
    Code:
     onmousedown="whichButton(event)"
    But, in Firefox, it displays the alert AND still allows the linked page to load. How can I stop the page (large image) loading?

    Help!

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You shouldn't force visitors to do things, it's anti-social and may drive them away. Also, if you want to save an image, there is no way to do this other than right-clicking it. Left-clicking an image does nothing unless it's wrapped in a link, so the obvious thing is to remove the link.

    If you want to stop people from dragging the image to another tab and opening the image that way (the only way I can think of opening an image via left-click), then, well, I'd say don't do that. You're only going to annoy your users.

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You only annoy some of your visitors by applying such stupid things to your page. The rest will simply override whatever you do and get the page working the way they want. The only users you will be forcing to do it your way (and hence annoying them so they don't return to your site) are newbies who don't know how easy it is to bypass any JavaScript built into a web page.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  4. #4
    Google Engineer polvero's Avatar
    Join Date
    Oct 2003
    Location
    Mountain View
    Posts
    567
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is a doozy. I've heard of disabling right click... but left? This takes the cake. I'm sure your intentions are good. Are you developing this for someone else or for yourself? You might want to considering discussing with your boss (or whoever is telling you to do this) for an alternative approach.

  5. #5
    SitePoint Zealot themissingelf's Avatar
    Join Date
    Nov 2001
    Location
    UK
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ref my original post... This is a media page for a very select number of users, serving a very specific purpose. I am quite familiar with the undesirable aspects of what I am proposing but, on balance, I'm quite happy to implement what I am describing without significant concern in this respect.

    Thanks for the contributions and concern but I'm keen for this thread to remain on track (dealing with the specifics of my original post) and not get hijacked in to a debate.

    I remain grateful for any help that can be provided.

    Cheers

  6. #6
    SitePoint Wizard silver trophy kyberfabrikken's Avatar
    Join Date
    Jun 2004
    Location
    Copenhagen, Denmark
    Posts
    6,157
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you send the proper combination of http-headers, I think you can force the browser to download the image, rather than opening it within the browser.

  7. #7
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm confused.

    What's making the image clickable in the first place, & why can't that be removed again ?

    Remove "window.stop".
    After the alert, add "return false;"
    Code:
    else
      {
      alert("Please right-click and select Save Line As... from the menu");
      return false;
      }
    }

  8. #8
    SitePoint Zealot themissingelf's Avatar
    Join Date
    Nov 2001
    Location
    UK
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by joebert View Post
    I'm confused.

    What's making the image clickable in the first place, & why can't that be removed again ?

    Remove "window.stop".
    After the alert, add "return false;"
    Code:
    else
      {
      alert("Please right-click and select Save Line As... from the menu");
      return false;
      }
    }
    Thanks, I'll give that a try.

    There's a smaller, web friendly version of the image on the page for the visitor to see to help them decide which to download. The larger "print friendly" version version of the image is the what's behind the click. I just don't want them to click on the image to display the large version AND THEN right-click and download. I want them to right-click and "Save link as...".

  9. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    So you use a server side script to write download headers in front of the image content so that when they left click on the small image it offers the large one for download.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  10. #10
    SitePoint Zealot themissingelf's Avatar
    Join Date
    Nov 2001
    Location
    UK
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    So you use a server side script to write download headers in front of the image content so that when they left click on the small image it offers the large one for download.
    Where can I find out more about this method? Cheers.

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Have a look at this: http://www.webmasterworld.com/apache/3309967.htm

    However, from what I have read IE understands application/octet-steam just fine, so I don't see the need to give it application/octetstream instead.

  12. #12
    SitePoint Zealot
    Join Date
    Sep 2007
    Posts
    136
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you're using Apache, you might try throwing out all the javascript, and just adding this to the config:

    Code:
    <Directory /images>
    ForceType application/octet-stream
    </Directory>

  13. #13
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Why stuff about with the MIME type when all you really need to do is set the content disposition.

    In PHP it would be:

    header('Content-Disposition: attachment;');

    That field has two valuesm the other is - inline - for when you want to get the browser to display something instead of offering it for download. Works for all MIME types so you can use the correct MIME type for the file instead of changing to a generic "I don't know what type of file this is so just treat it as an octet-stream" type.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  14. #14
    SitePoint Zealot themissingelf's Avatar
    Join Date
    Nov 2001
    Location
    UK
    Posts
    165
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Why stuff about with the MIME type when all you really need to do is set the content disposition.

    In PHP it would be:

    header('Content-Disposition: attachment;');

    That field has two valuesm the other is - inline - for when you want to get the browser to display something instead of offering it for download. Works for all MIME types so you can use the correct MIME type for the file instead of changing to a generic "I don't know what type of file this is so just treat it as an octet-stream" type.
    I like the simplicity of this, however, I cannot work out how to implement it to work when the visitor clicks on the image that they want to download without having to create a separate HTML page (with the header) for each image? Creating a separate HTML page is not too big a deal, however, is there a better way? Cheers.

  15. #15
    Floridiot joebert's Avatar
    Join Date
    Mar 2004
    Location
    Kenneth City, FL
    Posts
    823
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you are using Apache & have mod_headers available, you can place this in the .htaccess of the folder containing images.

    Notes: It will apply to all files in that folder. If they choose to "open" instead of "save" & it opens in a browser window, the browser may choose to reload it from cache instead of re-downloading it. That means the download prompt may not happen after the first time, untill the cache is cleared.

    Code:
    <IfModule headers_module>
    Header set Content-Disposition "attachment"
    </IfModule>
    Last edited by joebert; Dec 4, 2007 at 19:50.


Bookmarks

Posting Permissions

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