Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Specifying 100% image scaling

Reply
Thread Tools

Specifying 100% image scaling

 
 
pmennen
Guest
Posts: n/a
 
      01-14-2007
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

 
Reply With Quote
 
 
 
 
Roy A.
Guest
Posts: n/a
 
      01-14-2007

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.

 
Reply With Quote
 
 
 
 
mbstevens
Guest
Posts: n/a
 
      01-14-2007
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

 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      01-14-2007
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
 
Reply With Quote
 
Roy A.
Guest
Posts: n/a
 
      01-14-2007

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.

 
Reply With Quote
 
pmennen
Guest
Posts: n/a
 
      01-14-2007
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

 
Reply With Quote
 
Roy A.
Guest
Posts: n/a
 
      01-14-2007

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.

 
Reply With Quote
 
mbstevens
Guest
Posts: n/a
 
      01-14-2007
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.

 
Reply With Quote
 
J.O. Aho
Guest
Posts: n/a
 
      01-14-2007
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
 
Reply With Quote
 
pmennen
Guest
Posts: n/a
 
      01-15-2007
> 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

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Tetration (print 100^100^100^100^100^100^100^100^100^100^100^100^100^100) jononanon@googlemail.com C Programming 5 04-25-2012 08:49 PM
100% TABLE + 100% ROW + 100% DIV..? fred Javascript 3 03-17-2005 04:25 AM
Scaling PNG image ko021_626@hotmail.com Java 3 04-30-2004 01:37 PM



Advertisments