Browser Variable Opacity with PNG(3)

But for now, these issues are the trade-off for flexibility. Obviously, choose the right tactic based on the particular needs of your project. Between them both, you can do pretty much anything with PNGs – like, for instance...

Example 1: Translucent Image on a Photo

In this simple example, we see how the same 80% opaque PNG can be displayed on any kind of background: Translucent Image on a Photo.

Example 2: Anti-Aliased Translucent Navigation with Rollovers

What a beautiful thing it would be, I'm sure you've thought from time to time, to create translucent anti-aliased images that work on any background. Well, check it out: Anti-Aliased Translucent Navigation with Rollovers.

Mouse over the images, observe the behavior of the rollovers, and click “change background” to see how the images behave on different backgrounds. Then view the source. There are a few things worth noting here:

To preload the correct images, we create a variable called strExt, which contains either “.png” or “.gif.” As long as our PNGs and alternate GIFs use the same names except for the file extension, the browser will only preload the images that it's actually going to use. We create a class called pngLink and set the cursor property to “pointer.” We pass that class name to the function when we call it, and the function applies the class to the PNG. The result is that the user's pointer turns into a cursor when he rolls over the image links, even though, in IE5.5+/Win, they're really just DIVs. (You might also want to add "display:block" or "display:inline" to your PNG class, depending on how you're using the images, to make them display correctly in Netscape 6. (For details, see Better Living Through XHTML.) We also use a couple of rollover functions specifically for displaying PNGs. It turns out that, while it's possible to dynamically swap out PNGs using the AlphaImageLoader, IE5.5+/Win has a tough time of it; it's damn slow, too slow for effective rollovers. What works better is to apply a background color to the DIV that contains the PNG – the color will shine through the transparent part of the image, and do it fast, too. When we call the function, we send along the name of the image to be displayed and an HTML color – IE5.5+/Win will display the color, and the others will display the image. Notice how those images even have drop shadows. You could stick any background image or color behind them and they would still look great, even if the PNGs were completely transparent. Is that cool or what? Example 3: Floating Translucent DIV with HTML Text Inside

In the first two examples, we used the quick-and-dirty function from tactic one. Now, we want our PNG to interact with other code on the page, so this time we display it with the OpacityObject.

But remember – there are drawbacks to this approach (see above), the most heartbreaking of which is that this example doesn't work perfectly on IE5/Mac. If that causes you pain, then there's always the quick and dirty function. Otherwise, read on.

First we create a DIV, give it an ID, and assign any style properties we want to it – height, width, font family, etc.

Then we pass along the ID of that DIV when we instantiate the OpacityObject. We pass along the image path, too, and now we have a DIV with a translucent background. Cool!

Next we put some HTML text in the DIV and apply another unrelated object method to it (this object has nothing to do with the OpacityObject – it could be any code you have lying around). Now we can move the translucent DIV around the screen. Wheee! Floating Translucent DIV with HTML Text Inside.

So there's a glimpse of what's possible with the OpacityObject. You hardcore CSS/DOM folks, go nuts.

Variably Opaque-R-You

Download the source code for the object, functions, and examples we covered. All the code relies on our tweaked version of Browser Detect Lite, which is included as well. Variable Opacity Source Code.

One PNG and One PNG Only

This is all very exciting, but, as with many achievements that get web developers excited, making PNG work in today's browsers simply shouldn't be this hard. You might consider signing the petition to persuade Microsoft to provide full PNG support in Internet Explorer. With any luck, this article will soon be obsolete.

In the meantime, post any ideas for improvements to this code in the discussion forum for this article. The PNG home site, for instance, talks about a few other obscure browsers that should support alpha transparency, but that haven't been verified yet. If you can verify any of these claims, or have any other valuable input, let us know, and we'll update the code accordingly.

Resources PNG Home Site AlphaImageLoader Filter page on MSDN PNG Behavior at WebFX, an alternate way to make PNGs display in IE. Involves using the runtimeStyle object. The downside with this approach is that it only correctly displays a PNG if it's displayed within an <img> tag, not if it's a CSS background image

您可能感兴趣的文章: