Ideally I would like to use only one image at it's largest size, say
200px wide, I can control the width, what I have no control over is the
height. I also need the image to float right (sorry to be so needy!)
and ideally I would like to get to two or three classes to solve this,
IF indeed the images will constrain. I've found this code and it works:
#zoom a img {
float:right;
height: 198px;
width: 150px;
margin: 0 15px 5px 5px;
}
#zoom a:hover img {
height: 329px;
width: 250px;
}
But like I said, this requires me to code each image individually,
using the above or even what you've given me below, can I eliminate the
"height" and keep the image constrained?
w
Wayne Godfrey
[EMAIL PROTECTED]
On Jun 30, 2005, at 10:12 PM, Paul Novitski wrote:
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
******************************************************
******************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
******************************************************
