SitePoint Sponsor

User Tag List

Results 1 to 13 of 13

Hybrid View

  1. #1
    SitePoint Member ZeniusIVanisher's Avatar
    Join Date
    Mar 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    clicking a jpeg link

    pardon me if this is very n00bish, but i have a problem that i can't figure out.

    i have a link "download image"

    i want the user to be able to click that link, then have the usual "download file" box to pop up.

    problem is, the links are jpegs, soo when you click the link, all it does is link to a new browser with the image at full size. (i don't want it to do this!)

    any help is much appreciated!

  2. #2
    SitePoint Evangelist TommiChi's Avatar
    Join Date
    Oct 2008
    Posts
    440
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    Is an anchor wrapped around the image? A sample of your source code would be helpful.

    What you want to do is have the browser ignore the "href" attribute. You can do this with href="#". You can then fire whatever action is required with the onclick event.

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    What you're asking requires changing the content-type of the linked files on the server-side.

    Normal practice is instead to advise people to right-click on the image and choose the "save link" option.
    Alternatively, you could use a different file extension. An example of which is to compress the images and use zip files instead for the links.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    What you're asking requires changing the content-type of the linked files on the server-side.
    Almost right.

    You need to make your server send a new HTTP header, like this:
    Code:
    Content-Disposition: attachment; filename=MyImage.jpg
    (See RFC2183 for details.)

    The easiest way is often to have a server-side script wrapper to do this.
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Member ZeniusIVanisher's Avatar
    Join Date
    Mar 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i was thinking about solving the problem by using zip files, but that gives 1 more step to the viewer, and i don't really want that.

    this site here does what i want to do.

    http://p o o l g a.com/en/p/108 (remove spaces)

    when you click on the "save" icons below the images, it pops up to save the jpeg in the download box.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That's because the image is at http://poolga.com/wp/310.jpg
    while the save button links to http://poolga.com/down/310

    The server would be returning the image with a content disposition as mentioned by AutisticCuckoo
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member ZeniusIVanisher's Avatar
    Join Date
    Mar 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alright. so how do i set up my document to do that?

    is it a line of code that goes in the header?

    i was sifting through that text document and couldn't find what i needed

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    That depends on what server-side code that you're using.
    If it's php, then the people in the php forum will have the answer for you.

    As an example though, here here info from the php header page.

    Code php:
    <?php
    // We'll be outputting a PDF
    header('Content-type: application/pdf');
     
    // It will be called downloaded.pdf
    header('Content-Disposition: attachment; filename="downloaded.pdf"');
     
    // The PDF source is in original.pdf
    readfile('original.pdf');
    ?>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member ZeniusIVanisher's Avatar
    Join Date
    Mar 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i'm using a css/html combo

    i appreciate your help!

  10. #10
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can't do this with HTML and CSS, I'm afraid. If you don't have access to a server-side programming language (PHP, .NET, JSP, ColdFusion, ...) you'll need to tweak the server to send this header. That can probably be quite tricky if you only want it to happen for certain JPEG files.
    Birnam wood is come to Dunsinane

  11. #11
    SitePoint Member ZeniusIVanisher's Avatar
    Join Date
    Mar 2006
    Posts
    0
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    that website i posted in post 5 was html though?

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    The end result is html, but when you look at the address bar you can see that it's obviously using url rewriting.

    Read this article:
    A Beginner's Guide to URL Rewriting
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Enthusiast kabo0m's Avatar
    Join Date
    Jun 2005
    Location
    Canada
    Posts
    25
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The only thing I could suggest for you to do this very easily would be to have the words "Right Click this LINK and Click Save As" and have that clickable to your image.

    Wow I found that link helpful! Thanks pmw57!
    Last edited by kabo0m; Feb 20, 2009 at 13:06. Reason: Added thanks
    Self-Taught Web-Designer (just know HTML)
    Site #1: SA Half-Life Gaming
    Site #2: Kidney Disease Site


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
  •