Specifying 100% image scaling

P

pmennen

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
 
R

Roy A.

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.
Click to expand...

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.
 
M

mbstevens

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.
Click to expand...

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.
 
J

Jonathan N. Little

pmennen said:
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>
Click to expand...

The "width" and "height" attributes are not valid on "a" elements.
Should be on your 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.
Click to expand...

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!
 
R

Roy A.

mbstevens skrev:
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.
Click to expand...

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

pmennen

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.
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!
Click to expand...

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
 
R

Roy A.

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.


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.
Click to expand...

I quest it was a reason you used png insted of quality redused jpg.
 
M

mbstevens

mbstevens skrev:


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

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.
 
J

J.O. Aho

pmennen said:
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.
Click to expand...

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.
 
P

pmennen

An image that size is too large anyway,
as Jonathan has already warned.
Click to expand...

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
 
J

Jonathan N. Little

pmennen said:
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.
Click to expand...

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
Click to expand...

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!
Click to expand...

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?
 
R

Roy A.

Jonathan N. Little skrev:
Your full size images are way-way too big, unless it is crucial that we
clear read the flight instruments' manufacturers label!
Click to expand...

Technical details could offend people.
You only have to
show how this device mount in the cockpit!
Click to expand...

Yes. That's important. I would have mounted it on the flybridge.
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!
Click to expand...

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

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Pyautogui, cv2 and cannot find image 0
ValueError - "Found input variables with inconsistent numbers of samples: [100, 120]" 1
Put image over the top of another image on hover 3
Relative image URLs in HTML 3
How Do I Set text on an Image and use the image as a border? 7
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
Centering picture element for larger screen sizes 2
Simple, but difficult to me. Image border property 1

Members online

Total: 34 (members: 1, guests: 33)
Robots: 322

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,011
Latest member
AjaUqq1950

Latest Threads

Top