Best markup for thumbnail?

[Leif K-Brooks]

I'm planning to add images to some of my blog entries. The idea is to
float the thumbnails of images to the left of the text, and have the
images be links to larger versions.What would be the most accessible way
to do that?

 

[Richard Clark]

I'm planning to add images to some of my blog entries. The idea

is to float the thumbnails of images to the left of the text,
and have the images be links to larger versions.What would be
the most accessible way to do that?

First, make sure the smaller versions are the actual size they will be
displayed - don't use the html "width" and "height" to shrink big images to fit
in a smaller area on the page.

<A href="big.jpg"><img src="thumb.gif" width=32 height=32 ALT="meaningful
description for people browsing in text-only mode" align=left></A>Text beside
image.

You can make the thumbs bigger than 32x32, but not much smaller if there is any
-necessary- information on the thumb. Any -text- on images "ought" to be 16
point text size or larger for people with less than perfect eyes or low
resolution display like WebTV.

(You're welcome.


Jesus' Birth (and related issues)
http://members.aol.com/RichClark7/read/birth_JC.htm

Real Meaning of Christmas?
http://members.aol.com/RichClark7/xmas.htm
Spirit of Christmas?
http://members.aol.com/RichClark7/santa.htm

 

[Leif K-Brooks]

First, make sure the smaller versions are the actual size they will be
displayed - don't use the html "width" and "height" to shrink big images to fit
in a smaller area on the page.
Right.

<A href="big.jpg"><img src="thumb.gif" width=32 height=32 ALT="meaningful
description for people browsing in text-only mode" align=left></A>Text beside
image.

Thing is, the meaningful description will be the text beside the image,
and the larger version the image links to will be pretty pointless for
blind people.

 

[Richard]

First, make sure the smaller versions are the actual size they will be
displayed - don't use the html "width" and "height" to shrink big images
to fit in a smaller area on the page.

<A href="big.jpg"><img src="thumb.gif" width=32 height=32 ALT="meaningful
description for people browsing in text-only mode" align=left></A>Text
beside image.

You can make the thumbs bigger than 32x32, but not much smaller if there
is any -necessary- information on the thumb. Any -text- on images "ought"
to be 16 point text size or larger for people with less than perfect eyes
or low resolution display like WebTV.

(You're welcome.

Why do you want to impose icons as thumbnails?
An image of rather large details would be lost in the icon size thumb.
I see no reason not to use something like 200x??? or ??x200 as a thumb size.
align=left may or may not be a good idea.
in a div tag, use float:left instead.
or use inline style="float:left".

 

[Richard]

Thing is, the meaningful description will be the text beside the image,
and the larger version the image links to will be pretty pointless for
blind people.

Here we go with this crapola about designing sites for 5% or less of the
world population.
first of all, I don't know to many blind people who have computers to begin
with.
You ever seen a keyboard with brail on it? Rare ain't they?
Then if a person is blind, truly blind, how's he gonna know where the cursor
is?
Granted 1 out of a 100 blind people might access the internet, but why
should I bend over backwards to make it easier for that 1 person who just
might show up on my site someday?
The internet is not designed for the blind.

Oh yeah I know, you'd say blind people should be able to get a driver's
license too.

 

[rf]

I'm planning to add images to some of my blog entries. The idea is to
float the thumbnails of images to the left of the text, and have the
images be links to larger versions.What would be the most accessible way
to do that?

<a href="big.jpeg" style="float: left"><img src="small.jpeg" width="..."
height="..." alt="..."></a>

Cheers
Richard.

 

[Daniel Ruscoe]

Include a short version of the meaningful description in the image tag.
Your visually impaired users may be unable to link the image to your
longer description otherwise.

Here we go with this crapola about designing sites for 5% or less of the
world population.

What's wrong with you?

first of all, I don't know to many blind people who have computers to begin
with.

With your attitude towards mankind, Richard, I doubt you know too many
people at all.

You ever seen a keyboard with brail on it? Rare ain't they?

Not at all.

http://www.freedomofspeech.com/powerbraille.html

Then if a person is blind, truly blind, how's he gonna know where the cursor
is?

Now you're just trolling.

Granted 1 out of a 100 blind people might access the internet, but why
should I bend over backwards to make it easier for that 1 person who just
might show up on my site someday?

You don't have to go to any great length to make a website accessible.
People go to great lengths to make then unaccessible by over-using
images, javascript, text in images, table misuse, flash, etc.

The internet is not designed for the blind.

The Internet is designed for everybody and, with an attitude like yours,
any online business venture you attempt is doomed to failure.

Oh yeah I know, you'd say blind people should be able to get a driver's
license too.

How does using the Internet compare with operating a potentially deadly
vehicle?

Merry Christmas.

 

[Leif K-Brooks]

Include a short version of the meaningful description in the image tag.
Your visually impaired users may be unable to link the image to your
longer description otherwise.

The link will be to a larger version of the image, which a blind person
won't have much use for. The full description will be on the same page
as the thumbnail. Maybe alt="" would be the best solution?

 

[Marc Nadeau]

Richard a écrit:

Why do you want to impose icons as thumbnails?
An image of rather large details would be lost in the icon size thumb.
I see no reason not to use something like 200x??? or ??x200 as a thumb
size. align=left may or may not be a good idea.
in a div tag, use float:left instead.
or use inline style="float:left".

Actually, it is often better to thumbnail a *part* of the original image.
Otherwise you can not see what the thumbnail represents.

example: A picture of somebody somewhere in a landscape.
Thumbnail: Keep only the face.