The pages are set to load only four products and images at a time, so
hopefully that won't be too much of a drain to dial-up connections. My
choice would be to use only one image (and as little js as possible!),
so I'll give your way I try and see what happens. Thank you so much.
w
Wayne Godfrey
[EMAIL PROTECTED]
On Jun 30, 2005, at 9:00 PM, Bert Doorn wrote:
G'day
Wayne Godfrey wrote:
Is it possible using CSS to constrain the image sizes by creating two
or three classes, whereby the image width becomes fixed and the
height constrains accordingly, using percentages, ems or ???
If you don't specify a height on the image, but do specify a width (be
that in css or in the html), the height should adjust automatically
(once the browser has fetched the image and knows its dimensions).
Quick css example:
.ProductLink img { width: 100px; }
.ProductLink:hover img { width: 200px; }
Or better still, set it on the container, e.g.
.Products a img { width: 100px; }
.Products a:hover img { width: 200px; }
AFAIK, the only problem with not specifying height is that the browser
won't know how much space to reserve for the image in its layout. It
will then either adjust things as the page loads or delay displaying
it until the images are loaded. Could be a problem if there's a lot
of them, especially on dial-up.
If the image is to be replaced on hover, you'll probably need
javascript (someone correct me if it can be done with CSS)
HTH
--
Bert Doorn, Better Web Design
http://www.betterwebdesign.com.au/
Fast-loading, user-friendly websites
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
