At 06:00 PM 6/30/2005, Bert Doorn wrote:
If the image is to be replaced on hover, you'll probably need javascript
(someone correct me if it can be done with CSS)
CSS can't replace foreground images but certainly can replace background
images:
.Products a
{
display: block;
width: 100px;
height: 200px;
background: url("somethingSmall.jpg") no-repeat;
}
.Products a:hover
{
width: 200px;
height: 400px;
background: url("somethingLarge.jpg") no-repeat;
}
At 11:36 AM 6/30/2005, Wayne Godfrey wrote:
I have tons of images, very few the same size and coding each individually
is nuts, even for me! 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 ???
A potential problem with this background-image solution is that you have to
stipulate the image's container dimensions in the stylesheet.
Note that I didn't say you had to stipulate the image's own
dimensions. Because I've set the background to no-repeat, the image will
appear only once even if the container is larger than the image. Therefore
this kind of solution could work if you knew the maximum actual image
dimensions.
Background-images also cannot be sized on the fly -- they'll show up at
their original dimensions, regardless of the container's size.
Also, there will be a download delay on hover unless you pre-load the large
images.
Paul
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
