Pocket

PNG Hover

Overview: The Problem

You want to use a Sliding Doors technique for your beautiful css/list-based rollover menus with PNG transparency, but in IE6, the transparency does not work. I won’t spend time explaining how to do a sliding doors rollover, if you don’t know how to, you definitely should. You can view a good tutorial on how to do an Advanced CSS Rollover here.
The way they should work:
The way they work in IE6 (simulated):

The Solution

The solution is a 1-line-of-code-fix. Simply download the script, which contains two variables to set. Then add the following line of code near the bottom of any page with your menu. <!--[if IE 6]><script type=”text/javascript” src=”/j/pngHover.js” /></script><![endif]--> Jump to download the script

An Example, Dismantled

Markup

As I said before, this is for a sliding-door CSS navigation, so the HTML markup should be similar to the following. You can use Suckerfish Dropdowns! However, this script will only apply the fixes to the top level of menu options.
<ul id=”nav”> <li><a id=”item1” href=”page1.html”>Page 1</a></li> <li><a id=”item2” href=”page1.html”>Page 1</a></li> <li><a id=”item2” href=”page1.html”>Page 1</a></li> </ul>

Images

A Sliding Door CSS navigation uses a single image file that combines both the default and rollover states. See the example below. You can have the states on top of each other, or side by side. You will need to specify in the file which one you are using. It should be noted that both states need to be the exact same size. Here, the default graphic is on top, and the rollover (or hover) graphic is on the bottom. Here, the default graphic is on the left, and the rollover (or hover) graphic is on the right

The Script

At the top of the script you will see three variables you need to set. The first is navId. This is the id of the main UL element in your markup. If you look up at our example, you’ll see our example’s id is nav. The second variable you need to set is slideSide. This tells the script which way your image file is layed out. Our example is layed out side to side, so we enter ‘leftToRight’. The last variable says where you put the transparent.gif file that comes with the script. Here is what our variables would look like:
navId = ‘nav’; slideSide = leftToRight; transparentImage = ‘/j/transparent.gif’;

The Final Markup

Now let’s bring it all back together. Hope this helps people as much as it has helped me!
<ul id=”nav” > <li><a id=”item1” href=”page1.html”>Page 1</a></li> <li><a id=”item2” href=”page1.html”>Page 1</a></li> <li><a id=”item2” href=”page1.html”>Page 1</a></li> </ul> <!--[if IE 6]><script type="text/javascript" src="/j/pngHover.js" /></script><![endif]-->

Download

Download Png Hover v0.9 (compressed 3.1KB) Source: Download Png Hover Source v0.9

3 Notes/ Hide

  1. nateweiner posted this