Controlling size of the image that href= opens?

P

(Pete Cresswell)

I'm using width= to control the size of my thumbnails within links, but can't
figure out how to control the size of the images they open.

I'm guessing it's something in the target area...

e.g.
----------------------------------------------
<base target="45thPix_PicArea"/>

<p><a href="Pix/45th/DSCN9178.JPG"><img src="Pix/45th/ThumbNails/DSCN9178.jpg"
width=120 alt="Thumbnail not found, please notify Pete:
(e-mail address removed)"/><br/>DSCN9178.JPG</a></p>
----------------------------------------------

Pix/45th/DSCN9178.JPG might be a VGA pic or it might be full 3:2 4 megapixel
photo. If it's the second, the target area will only show a small area of the
pic and the user is forced to scroll or zoom out.

Seems like I SB rendering all pics to some reasonable size range, but what
syntax to I look for?
 
N

Neal

I'm using width= to control the size of my thumbnails within links, but
can't
figure out how to control the size of the images they open.

You should always serve images at the size they are. This means, either
edit the image or change the HTML to match the true dimensions.

You want a particular size, make the image that size.
 
N

NOXwebmasterx

(Pete Cresswell) said:
I'm using width= to control the size of my thumbnails within links, but
can't figure out how to control the size of the images they open.

I'm guessing it's something in the target area...

e.g.
----------------------------------------------
<base target="45thPix_PicArea"/>

<p><a href="Pix/45th/DSCN9178.JPG"><img
src="Pix/45th/ThumbNails/DSCN9178.jpg"
width=120 alt="Thumbnail not found, please notify Pete:
(e-mail address removed)"/><br/>DSCN9178.JPG</a></p>
----------------------------------------------

Pix/45th/DSCN9178.JPG might be a VGA pic or it might be full 3:2 4
megapixel
photo. If it's the second, the target area will only show a small area
of the pic and the user is forced to scroll or zoom out.

Seems like I SB rendering all pics to some reasonable size range, but what
syntax to I look for?
This may help:
http://www.mbstevens.com/howtothumb/
 
B

brucie

In alt.html (Pete Cresswell) said:
I'm using width= to control the size of my thumbnails within links,

bad idea. with only a few exceptions images should only be displayed at
their actual size.

browsers are crap at resizing and you waste money/bandwidth sending them
and visitors waste time/money/bandwidth downloading images larger than
they need to be.
<p><a href="Pix/45th/DSCN9178.JPG"><img src="Pix/45th/ThumbNails/DSCN9178.jpg"

mixing case is a bad idea. use all lowercase. much less confusing and
easier to work with.
Pix/45th/DSCN9178.JPG might be a VGA pic or it might be full 3:2 4 megapixel
photo. If it's the second, the target area will only show a small area of the
pic and the user is forced to scroll or zoom out.

width="100%" will fill the available area width. don't specify a height
and it will proportionally adjust itself to match the width.

<img src="images/nude01.jpg" width="100%" alt="nude brucie">
 
P

(Pete Cresswell)

RE/
bad idea. with only a few exceptions images should only be displayed at
their actual size.

browsers are crap at resizing and you waste money/bandwidth sending them
and visitors waste time/money/bandwidth downloading images larger than
they need to be.

I should have added that I also re-created all the thumbnails at the exact width
specified in HTML. Reason I went to width= was to ensure that all the text in
my alt= message could be seen if/when a thumbnail couldn't be rendered.

I've got the message from Neal - so now I'll run all the full-sized images thru
PhotoShop and resize them to some least-common denominator....and add another
directory on the CD to hold all the original-sized pics in case somebody wants
to do something that takes a little more rez.

Any suggestions on the least-common denominator size? Left to my own, I'd
start with a 800x600 screen and see what fits in a maxed IE window.

Also, just a knee-jerk reaction: what do you think about a button in the area
containing the least-common denominator sized pic that the user can click to
open up a separate window containing the original? Or maybe call the button
"Zoom" or something and populate the same area with the original?
 
N

NOXwebmasterx

(Pete Cresswell) said:
Also, just a knee-jerk reaction: what do you think about a button in the
area containing the least-common denominator sized pic that the user can
click to
open up a separate window containing the original? Or maybe call the
button "Zoom" or something and populate the same area with the original?

Instead of a click-though image as thumbnail, you can have a number of links
to different size images near a thumbnail size image. Labels might be
something like:

Enlarge image:
25K | 200K | 3000K

This gives visitors the choice of download size at the outset, instead of
having to click through progressively larger images.
 
B

brucie

In alt.html (Pete Cresswell) said:
I've got the message from Neal

so he can phone you but not me. bastard!
so now I'll run all the full-sized images thru PhotoShop and resize
them to some least-common denominator

make all the portrait the same size and all the landscape the same size.
if possible don't mix them when you put them on the page. it looks much
more polished and professional when the images are all one type or the
other. if you have to mix them try for alternating rows or some other
pattern, just try to avoid randomly sticking them on the page.
Any suggestions on the least-common denominator size? Left to my own, I'd
start with a 800x600 screen and see what fits in a maxed IE window.

how about a flexible layout so it doesn't matter what the window size
is? give them margins/padding to keep them separated and float them all
left. they'll automatically wrap to fit the window width.
Also, just a knee-jerk reaction: what do you think about a button in the area
containing the least-common denominator sized pic that the user can click to
open up a separate window containing the original?

a new window is icky, just link normally to the full size image either
directly to the image or to a html page containing the image. i would go
for a html page so you can style it to match the rest of the pages.

if the user doesn't like the image they can quickly hit their back
button to get back to the thumbs.
Or maybe call the button "Zoom" or something and populate the same
area with the original?

i've done this before but it wasn't very successful. the users found the
behavior unexpected and the larger image caused the page to redraw
jumping everything around so navigating the thumbs wasn't consistent,
they were having to continually adjust to a new layout.
 
P

(Pete Cresswell)

RE/
how about a flexible layout so it doesn't matter what the window size
is? give them margins/padding to keep them separated and float them all
left. they'll automatically wrap to fit the window width.

That's the end result that I first had in mind, but can't figure out how to do
it with the link's target.

Seems pretty straightforward when dealing directly with an image, but the pic
whose size I'm trying to control is the href of that image (i.e. the first image
is being used as a link...no problem there...it's when the user clicks on the
link and I tell href= to open up... that's when I want to make it fit in the
available space.
 
P

(Pete Cresswell)

RE/
Enlarge image:
25K | 200K | 3000K

Is it possible for me, in my HTML, to discover the user's screen size (e.g.
800x600 or 1600x1200) and then open up different-sized pics depending?

i.e.

SELECT CASE myRez
CASE 800x600
(base the navlist panel on an HTML file containing links to small pix)
CASE 1600x1200
(base the navlist panel on an HTML file containing links to big pix)
END SELECT
 
B

brucie

In alt.html (Pete Cresswell) said:
Is it possible for me, in my HTML, to discover the user's screen size (e.g.
800x600 or 1600x1200) and then open up different-sized pics depending?

you don't want the screen size but the browsers windows size but its not
reliable. KISS is best.
 
B

brucie

In alt.html (Pete Cresswell) said:
That's the end result that I first had in mind, but can't figure out how to do
it with the link's target.

i have a demo for you but my host is down ($%&#*!) so you'll just have
to hang onto your panties until they're back so i can upload it.
 
P

(Pete Cresswell)

RE/
i have a demo for you but my host is down ($%&#*!) so you'll just have
to hang onto your panties until they're back so i can upload it.

Good fit. My brain's about fried anyhow...time to catch some zzzz's.
 
J

Jeffrey Silverman

bad idea. with only a few exceptions images should only be displayed at
their actual size.

What possible exceptions are there that the browser should resize the
image? The browser should *never* resize the image!
 
B

brucie

In alt.html Jeffrey Silverman said:
What possible exceptions are there that the browser should resize the
image? The browser should *never* resize the image!

browsers can if the user wants them to but to clarify the above i meant
the author shouldn't use the width/height attributes to change the size
of the images from their actual size. there are some exceptions.
 
J

jake

Jeffrey Silverman said:
What possible exceptions are there that the browser should resize the
image? The browser should *never* resize the image!
It's useful if you want your image to occupy the same proportion of the
browser window, regardless of window size.

Browsers do a good job of down-sizing images -- but aren't any good if
expanded beyond the image's real size.

I guess it depends on how crucial optimum quality is.

regards.
 
B

brucie

In alt.html jake said:
Browsers do a good job of down-sizing images

<cough>bullshit</cough> you're a bad man. downsizing images means you're
wasting your money/bandwidth and making the visitor waste their
time/money/bandwidth downloading images larger than they need to be.
-- but aren't any good if expanded beyond the image's real size.

it depends on the image. e.g areas of solid color.
I guess it depends on how crucial optimum quality is.

how about just resizing using your favorite graphics editor. simple.
 
J

jake

brucie said:
In alt.html jake said:


<cough>bullshit</cough> you're a bad man.

You could be right (about being a bad man, that is). But I am frequently
surprised at the ability of popular browsers to successfully re-size the
image ... depends whether you are after 'optimal' quality.
downsizing images means you're
wasting your money/bandwidth and making the visitor waste their
time/money/bandwidth downloading images larger than they need to be.

Like life, it's all a trade-off.

On the negative side -- it's exactly as you say.
On the positive side -- it's a flexible way of matching the size of the
image to the browser window.

And, like life, you've just got to make your own decisions.

It's not for use in most circumstances .... but it's nice to know you
can do it when you need to. All part of the design process, I guess.
it depends on the image. e.g areas of solid color.

how about just resizing using your favorite graphics editor. simple.

Yep -- the best way (if you don't need to match the browser window).Regards.
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top