With all the neat-o AJAX and Atlas sites showing up, one of the recurring things I've noticed is groovy, shadowy tooltips. What am I talking about? If you haven't tried Netflix yet, at least visit their site and try hovering over a movie image. You'll see a nice popup flash up with title details. I really like the shadows that show up around this popup, it really adds a professional touch.

So how is this done? Well, it should be possible to use PNG images to define an alpha channel that supports transparency. Most browsers except Internet Explorer support this. But in order to support the most browsers, you have to use a klugey method that uses an AlphaImageLoader Filter in IE. I'll show some code that implements this kluge, but first let's look at how we can create a PNG file that has this nice alpha channel...

I'll be using Paint.NET because it's free and it does a fine job of managing layers and transparency for PNG's!

(1) Create a new image by selecting File/New. Be sure to input your desired height and width.

(2) Set the image background to transparent by selecting Layers/Layer Properties and setting the Opacity to 0.

(3) In this step we will create the shadow layer
Select Layers/Add New Layer. Select the “Draw filled shape with outline” option button on the toolbar.

(4) Set both the foreground and background colors to a dark gray

 

(5) Draw out a rectangle (or other shape) for the background shadow.

 

 (6) Next, blur the shadow by selecting Effects/Blurs/Gaussian. Note how the “shadow” gets blurred out!

(7) Next, we add the “real object” that is casting the shadow. Overlay another rectangle or other object that is casting the shadow.

That's it! We now have a nice PNG file that can implement alpha transparency. But in order to get this to work cross-browser, we need to do a couple of dirty, kludgey things.

First, we need to have a "bogus proxy image" that is at least 1x1 pixel and completely transparent. You can create a 1x1 GIF image that is completely transparent, that will work fine. Let's call that image bogusPixel.gif.

Next, we need some javascript that will figure out if we are in IE and need to apply an AlphaImageLoader filter. This is because IE doesn't really support alpha channel PNG's, but has a filter that does support them.

<script language="javascript">
    var bInitialized;
    function showImg(id) {
        var img = document.getElementById(id);
        img.style.visibility='visible';
        if (navigator.appVersion.indexOf("MSIE")>-1) {
            if (!bInitialized) {
                bInitialized = true;
                img.style.width = img.width;
                img.style.height = img.height;
                img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod='scale', src='" + img.src + "')";
                img.src = "images/bogusPixel.gif";
            }
        }
    }

    function hideImg(id) {
        document.getElementById(id).style.visibility='hidden';
    }

script>