Specifying 100% image scaling

Discussion in 'HTML' started by pmennen, Jan 14, 2007.

  1. pmennen

    pmennen Guest

    I searched the web and several FAQs, but I couldn't
    find the answer to this html graphics question.

    I have a thumbnail on my web page (called screen1_small.png).
    When the user clicks on the thumbnail, I want a new window
    to appear with screen1.png, a large 768 x 1280 image.

    I attempted to do this with the following html:

    <A HREF="screen1.png" WIDTH=768 HEIGHT=1280 target="_blank">
    <IMG SRC="screen1_small.png" align="left" Hspace="7"></A>

    The problem is that the image looks terrible when scaled
    and I want the user to see it with 100% scaling even if
    the image is too big for the window.

    If the user is using FireFox, I could instruct them to select
    "View", "Page style", "No Style". Then the image is rendered
    at full scale and scroll bars are added if the window is too
    small to fit the whole image (which is likely with such a
    large image). Of course most users would probably suffer the
    effects of the scaling instead of following those tedius
    instructions for each screen shot.

    With IE6 the situation is even more frustrating. While the
    image is loading, it loads in the new window with perfect 100%
    scalling (with scroll bars), but as soon as the whole image
    is loaded it switches to a scaled down version that can fit
    in the window (but looks horrible). I couldn't find any way
    to change it back to the 100% view.

    Isn't there a way in HTML to specify 100% scaling? I would
    have thought that scaling is such an important issue that
    the answer to this would be easy to find. (But I couldn't).

    Be gentle, as I am an HTML newbie. I'm building this web
    site with straight HTML using a simple HTML editor
    (Evrsoft First Page 2006). I know nothing about dynamic
    html, cascading style sheets, java script, and all those
    other buzz words I've heard bantered around, although
    I'm willing to learn about them if necessary to solve
    the scaling problem.

    Thanks in advance for any advice you may offer.
    ~Paul Mennen
    pmennen, Jan 14, 2007
    #1
    1. Advertising

  2. pmennen

    Roy A. Guest

    pmennen skrev:
    > I searched the web and several FAQs, but I couldn't
    > find the answer to this html graphics question.
    >
    > I have a thumbnail on my web page (called screen1_small.png).
    > When the user clicks on the thumbnail, I want a new window
    > to appear with screen1.png, a large 768 x 1280 image.
    >
    > I attempted to do this with the following html:
    >
    > <A HREF="screen1.png" WIDTH=768 HEIGHT=1280 target="_blank">
    > <IMG SRC="screen1_small.png" align="left" Hspace="7"></A>
    >
    > The problem is that the image looks terrible when scaled
    > and I want the user to see it with 100% scaling even if
    > the image is too big for the window.
    >
    > If the user is using FireFox, I could instruct them to select
    > "View", "Page style", "No Style". Then the image is rendered
    > at full scale and scroll bars are added if the window is too
    > small to fit the whole image (which is likely with such a
    > large image). Of course most users would probably suffer the
    > effects of the scaling instead of following those tedius
    > instructions for each screen shot.
    >
    > With IE6 the situation is even more frustrating. While the
    > image is loading, it loads in the new window with perfect 100%
    > scalling (with scroll bars), but as soon as the whole image
    > is loaded it switches to a scaled down version that can fit
    > in the window (but looks horrible). I couldn't find any way
    > to change it back to the 100% view.
    >
    > Isn't there a way in HTML to specify 100% scaling? I would
    > have thought that scaling is such an important issue that
    > the answer to this would be easy to find. (But I couldn't).
    >
    > Be gentle, as I am an HTML newbie. I'm building this web
    > site with straight HTML using a simple HTML editor
    > (Evrsoft First Page 2006). I know nothing about dynamic
    > html, cascading style sheets, java script, and all those
    > other buzz words I've heard bantered around, although
    > I'm willing to learn about them if necessary to solve
    > the scaling problem.


    I think you have to put the image (screen1.png) in a HTML document.

    <html>
    <head><title>screen1.png</title></head>
    <body><img src="screen1.png" /></body>
    </html>

    and use

    <A HREF="screen1.html" target="_blank"><IMG SRC="screen1_small.png"
    align="left" Hspace="7"></A>

    in the tumbnail document.
    Roy A., Jan 14, 2007
    #2
    1. Advertising

  3. pmennen

    mbstevens Guest

    On Sat, 13 Jan 2007 18:01:16 -0800, pmennen wrote:

    > I searched the web and several FAQs, but I couldn't
    > find the answer to this html graphics question.
    >
    > I have a thumbnail on my web page (called screen1_small.png).
    > When the user clicks on the thumbnail, I want a new window
    > to appear with screen1.png, a large 768 x 1280 image.
    >
    > I attempted to do this with the following html:
    >
    > <A HREF="screen1.png" WIDTH=768 HEIGHT=1280 target="_blank">
    > <IMG SRC="screen1_small.png" align="left" Hspace="7"></A>
    >
    > The problem is that the image looks terrible when scaled
    > and I want the user to see it with 100% scaling even if
    > the image is too big for the window.
    >
    > If the user is using FireFox, I could instruct them to select
    > "View", "Page style", "No Style". Then the image is rendered
    > at full scale and scroll bars are added if the window is too
    > small to fit the whole image (which is likely with such a
    > large image). Of course most users would probably suffer the
    > effects of the scaling instead of following those tedius
    > instructions for each screen shot.
    >
    > With IE6 the situation is even more frustrating. While the
    > image is loading, it loads in the new window with perfect 100%
    > scalling (with scroll bars), but as soon as the whole image
    > is loaded it switches to a scaled down version that can fit
    > in the window (but looks horrible). I couldn't find any way
    > to change it back to the 100% view.
    >
    > Isn't there a way in HTML to specify 100% scaling? I would
    > have thought that scaling is such an important issue that
    > the answer to this would be easy to find. (But I couldn't).
    >
    > Be gentle, as I am an HTML newbie. I'm building this web
    > site with straight HTML using a simple HTML editor
    > (Evrsoft First Page 2006). I know nothing about dynamic
    > html, cascading style sheets, java script, and all those
    > other buzz words I've heard bantered around, although
    > I'm willing to learn about them if necessary to solve
    > the scaling problem.


    You can do it with javascript, as explained in the link in
    the sig. Opening new windows causes accessibility problems, however, and
    takes over the visitor's browser in a way they might not appreciate. Let
    the visitor decide how the new window is to open.
    --
    mbstevens
    http://www.mbstevens.com/howtothumb/index.html#jspopups
    mbstevens, Jan 14, 2007
    #3
  4. pmennen wrote:
    > I searched the web and several FAQs, but I couldn't
    > find the answer to this html graphics question.
    >
    > I have a thumbnail on my web page (called screen1_small.png).
    > When the user clicks on the thumbnail, I want a new window
    > to appear with screen1.png, a large 768 x 1280 image.
    >
    > I attempted to do this with the following html:
    >
    > <A HREF="screen1.png" WIDTH=768 HEIGHT=1280 target="_blank">
    > <IMG SRC="screen1_small.png" align="left" Hspace="7"></A>


    The "width" and "height" attributes are not valid on "a" elements.
    Should be on your image...

    <img src="screen1.png" width="768" height="1280" alt="Some big image">

    >
    > The problem is that the image looks terrible when scaled
    > and I want the user to see it with 100% scaling even if
    > the image is too big for the window.


    With the above markup is will, unless the user has his browser set to
    fit large images to window. If so, there is nothing you can do about the
    what the user has *his* browser set up...

    BTW I would not put an image 1280 pixels high on the web. Firstly, it
    will be a very large download for dialup, and secondly I'm running 1280
    x 1024 on my monitor which is higher than most and I would not be able
    to view your image without scrolling! Resample to something smaller than
    600!

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 14, 2007
    #4
  5. pmennen

    Roy A. Guest

    mbstevens skrev:

    > > Isn't there a way in HTML to specify 100% scaling? I would
    > > have thought that scaling is such an important issue that
    > > the answer to this would be easy to find. (But I couldn't).
    > >
    > > Be gentle, as I am an HTML newbie. I'm building this web
    > > site with straight HTML using a simple HTML editor
    > > (Evrsoft First Page 2006). I know nothing about dynamic
    > > html, cascading style sheets, java script, and all those
    > > other buzz words I've heard bantered around, although
    > > I'm willing to learn about them if necessary to solve
    > > the scaling problem.

    >
    > You can do it with javascript, as explained in the link in
    > the sig. Opening new windows causes accessibility problems, however, and
    > takes over the visitor's browser in a way they might not appreciate. Let
    > the visitor decide how the new window is to open.
    > --
    > mbstevens
    > http://www.mbstevens.com/howtothumb/index.html#jspopups


    If you try the javascript with an 768 x 1280 image, the image will
    still scale down.
    Roy A., Jan 14, 2007
    #5
  6. pmennen

    pmennen Guest

    Thanks for the responses.
    I liked Roy's suggestion best because it was very simple and seemed
    to work for me, both with IE and FireFox. No need to worry about
    JavaScript yet it seems.

    Jonathan N. Little wrote:

    > BTW I would not put an image 1280 pixels high on the web. Firstly, it
    > will be a very large download for dialup, and secondly I'm running 1280
    > x 1024 on my monitor which is higher than most and I would not be able
    > to view your image without scrolling! Resample to something smaller than
    > 600!


    Yes, the images are large (1/2 Mbyte) and I have several, so it
    won't be great with dialup. But in this case it is the only way to
    go. If the images could tolerate subsampling, I wouldn't have been
    asking this question to begin with. I'm demonstrating what something
    will look like on a particular computer, so it has to be exact.

    ~Paul
    pmennen, Jan 14, 2007
    #6
  7. pmennen

    Roy A. Guest

    pmennen skrev:
    > Thanks for the responses.
    > I liked Roy's suggestion best because it was very simple and seemed
    > to work for me, both with IE and FireFox. No need to worry about
    > JavaScript yet it seems.
    >
    > Jonathan N. Little wrote:
    >
    > > BTW I would not put an image 1280 pixels high on the web. Firstly, it
    > > will be a very large download for dialup, and secondly I'm running 1280
    > > x 1024 on my monitor which is higher than most and I would not be able
    > > to view your image without scrolling! Resample to something smaller than
    > > 600!

    >
    > Yes, the images are large (1/2 Mbyte) and I have several, so it
    > won't be great with dialup. But in this case it is the only way to
    > go. If the images could tolerate subsampling, I wouldn't have been
    > asking this question to begin with. I'm demonstrating what something
    > will look like on a particular computer, so it has to be exact.


    I quest it was a reason you used png insted of quality redused jpg.
    Roy A., Jan 14, 2007
    #7
  8. pmennen

    mbstevens Guest

    On Sat, 13 Jan 2007 21:10:11 -0800, Roy A. wrote:

    >
    > mbstevens skrev:
    >
    >> > Isn't there a way in HTML to specify 100% scaling? I would
    >> > have thought that scaling is such an important issue that
    >> > the answer to this would be easy to find. (But I couldn't).
    >> >
    >> > Be gentle, as I am an HTML newbie. I'm building this web
    >> > site with straight HTML using a simple HTML editor
    >> > (Evrsoft First Page 2006). I know nothing about dynamic
    >> > html, cascading style sheets, java script, and all those
    >> > other buzz words I've heard bantered around, although
    >> > I'm willing to learn about them if necessary to solve
    >> > the scaling problem.

    >>
    >> You can do it with javascript, as explained in the link in
    >> the sig. Opening new windows causes accessibility problems, however, and
    >> takes over the visitor's browser in a way they might not appreciate. Let
    >> the visitor decide how the new window is to open.
    >> --
    >> mbstevens
    >> http://www.mbstevens.com/howtothumb/index.html#jspopups

    >
    > If you try the javascript with an 768 x 1280 image, the image will
    > still scale down.


    Well, that part of the OP's request is something that depends on the
    browser and how it's options are set.

    An image that size is too large anyway,
    as Jonathan has already warned. One way to handle large images is
    to provide several links to full sized details taken from the full image.
    mbstevens, Jan 14, 2007
    #8
  9. pmennen

    J.O. Aho Guest

    pmennen wrote:

    > Yes, the images are large (1/2 Mbyte) and I have several, so it
    > won't be great with dialup. But in this case it is the only way to
    > go. If the images could tolerate subsampling, I wouldn't have been
    > asking this question to begin with. I'm demonstrating what something
    > will look like on a particular computer, so it has to be exact.


    You could try to use PHP to manipulate the images, would even be possible to
    the user to set a size they want and PHP scales the image to that size. Of
    course this wouldn't be something you do on a server that runs on an old i386
    with a high amount of visitors. The quality should be a lot better than
    letting the browser scale the image.

    --

    //Aho
    J.O. Aho, Jan 14, 2007
    #9
  10. pmennen

    pmennen Guest

    > An image that size is too large anyway,
    > as Jonathan has already warned.


    Oh, I don't know about that. In this case the page
    was intended for a small audience, so something
    somewhat simple minded is probably okay.

    I know opening in a new window is not the most user
    friendly thing but I wanted the user to be able to read
    the text next to the thumbnail while viewing the full
    size image (at least if he has a large screen display).
    At least I have a warning that a new window will open.
    Actually in FireFox it will open in a new tab if thats
    the way you have it set up.

    I ended up using the first suggestion on this thread.
    You are welcome to view the page if you want to
    suggest a better method:

    http://www.pmennen.members.sonic.net/Fujitsu/index.html

    The thumbnails in question are the 6 at the bottom of the page.

    Thanks for all suggestions!

    ~Paul
    pmennen, Jan 15, 2007
    #10
  11. pmennen wrote:
    >> An image that size is too large anyway,
    >> as Jonathan has already warned.

    >
    > Oh, I don't know about that. In this case the page
    > was intended for a small audience, so something
    > somewhat simple minded is probably okay.


    The audience or the reasoning?


    > I know opening in a new window is not the most user
    > friendly thing but I wanted the user to be able to read
    > the text next to the thumbnail while viewing the full
    > size image (at least if he has a large screen display).
    > At least I have a warning that a new window will open.
    > Actually in FireFox it will open in a new tab if thats
    > the way you have it set up.
    >
    > I ended up using the first suggestion on this thread.
    > You are welcome to view the page if you want to
    > suggest a better method:
    >
    > http://www.pmennen.members.sonic.net/Fujitsu/index.html
    >


    Your full size images are way-way too big, unless it is crucial that we
    clear read the flight instruments' manufacturers label! You only have to
    show how this device mount in the cockpit!


    > The thumbnails in question are the 6 at the bottom of the page.
    >
    > Thanks for all suggestions!


    Even the output map display can be reduced 50% to 384 x 640 pixels and
    still be legible and manageable to demonstrate the devices map output!
    Do they really need the details of Monterey;s airport?

    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Jan 16, 2007
    #11
  12. pmennen

    Roy A. Guest

    Jonathan N. Little skrev:

    > > You are welcome to view the page if you want to
    > > suggest a better method:
    > >
    > > http://www.pmennen.members.sonic.net/Fujitsu/index.html
    > >

    >
    > Your full size images are way-way too big, unless it is crucial that we
    > clear read the flight instruments' manufacturers label!


    Technical details could offend people.

    > You only have to
    > show how this device mount in the cockpit!


    Yes. That's important. I would have mounted it on the flybridge.

    >
    >
    > > The thumbnails in question are the 6 at the bottom of the page.
    > >
    > > Thanks for all suggestions!

    >
    > Even the output map display can be reduced 50% to 384 x 640 pixels and
    > still be legible and manageable to demonstrate the devices map output!


    Yhy? It wouldn't show the quality of the output. The thumbnails would
    be sufficient for your needs.

    > Do they really need the details of Monterey;s airport?


    >From the flybridge? No.
    Roy A., Jan 16, 2007
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Andreas Klemt
    Replies:
    2
    Views:
    409
    Marina
    Jul 28, 2003
  2. Not4u
    Replies:
    9
    Views:
    1,039
    Not4u
    Feb 27, 2004
  3. Replies:
    8
    Views:
    6,687
    Neredbojias
    Dec 9, 2005
  4. fred
    Replies:
    3
    Views:
    273
    Zifud
    Mar 17, 2005
  5. Replies:
    5
    Views:
    880
Loading...

Share This Page