Using ZOOM from a CSS

[johnl]

Hi!

I´m new to the forum, and I hope I´m in the right place...

I´m trying to implement a CSS class that will let me resize images on my site (in this case an HTML Help file) easily, without having to use drawing software like PaintShop. I discovered the ZOOM
property/attribute.

I have tried writing something like this:

<SPAN Style="Zoom:0.8"><IMG... etc

This works very nicely. Now, I would like to use this:

<SPAN Class="small"><IMG... etc

with a separate CSS file that includes the definition:

.small {zoom:0.8;}

This time, the image is resized too, only in a much uglier way. Does ZOOM from a CSS use a different resizing algorithm than when using ZOOM in an inline style? Or is this a bug in IE5.5 (which is what I am using)?

Thanks,

John Liungman
Technical Writer, Sweden

[johnl]

Hmm, I solved this one myself, and I´ll post the solution hoping I might save others the trouble I´ve been through.

I discovered that if I not only set the ZOOM attribute, but also apply a FILTER, things work out perfectly. This is what I put in the CSS:

.Small
{
zoom: 0.80;
filter: progidXImageTransform.Microsoft.Alpha(style=0,op acity=100);
}

And this is what I put in the HTML:

<SPAN CLASS="Small">
<IMG SRC="my_image.gif">
</SPAN>

The filter in this case is the Alpha filter, with parameters set to do just about nothing.

My theory is this: just like PaintShop Pro or other graphics software, Internet Explorer cannot do a good resize on a 256 color image. More colors are needed in order to resize for example thin lines and text. So just using ZOOM on a GIF does not work very well, at least not when my images are screen shots of dialog boxes (lots of text and thin lines). Applying a filter, however, somehow causes the the GIF to render in more than 256 colors. Otherwise effects such as blurring, opacity change, etc, could not work, right?

Again, this is just my theory. Maybe someone can confirm this? In any case, it works, although it requires a version of IE that supports both ZOOM and FILTER.

End of monologue!

/

John

[Till]

Certainly nice, but I didn't even find that attribute in my definition. Is it that new, or is it for enhancing the M$-experience only?

Also, please not that using this stylesheet attribute/property does not improve the loading time of your page. If you can, get around to a more cross-browser compatible way.

For example, on the server-side through ImageMagick.

_till


P.S.
Sorry for the late reply.

[johnl]

Hi Till!

Are you sure my method affects loading time? And if so: why and how much?

In my case, performance and cross-browser compatability is not that much of an issue, I think. I write help files packaged as compiled HTML (.chm), that are run locally. In other words, ít´s not really a web site as such. Also, Explorer is a prerequisite for the help files anyway.

Still, we are planning to start distributing these help files over the WWW, so loading time may become more significant in the future.

About the ZOOM and FILTER attributes: they are available from IE 5.5. Check out

http://msdn.microsoft.com/workshop/s...o/DXTidemo.htm

Cheers!

John

[Till]

Originally posted by johnl Are you sure my method affects loading time? And if so: why and how much?

What I meant is, when you resize an image through the properties of an <img>-tag (width and height) or through CSS/DHTML the actual file size will not change. Which means, the loading of the image will take as long as it took before. But since you are all "local", no worries.

Originally posted by johnl In my case, performance and cross-browser compatability is not that much of an issue, I think. I write help files packaged as compiled HTML (.chm), that are run locally. In other words, ít´s not really a web site as such. Also, Explorer is a prerequisite for the help files anyway.

I got you! Overall that sounds like a pretty smooth job. I'm jealous.

Originally posted by johnl Still, we are planning to start distributing these help files over the WWW, so loading time may become more significant in the future.

Yeah, it will.

Originally posted by johnl About the ZOOM and FILTER attributes: they are available from IE 5.5. Check out

http://msdn.microsoft.com/workshop/s...o/DXTidemo.htm

Oh no! It's the evil demon Microsoft!

_till

P.S.
Totally unrelated: I went to a "security" seminar/intro which was held by MS at Cebit (huge IT-fair in Hannover, Germany) over the weekend, and I fell asleep.

[oleksiy]

I've found one neat solution, pure javascript - LuckyZoom - http://luckyteam.co.uk/products/LuckyZoom/

[curtiss]

Very nice, but it's unfortunate that it's written in javascript, and it's truly unfortunate that it costs as much as it does.

I will let this link slide, as it does pertain to the topic that you bumped in order to make your post, but please be warned that bumping extremely old topics is bad form, and popping in just to post links to your products is a bannable offense.