This is an old archived post from my former blog The Idea Shower. It's where I cataloged my product explorations and releases, one of which ultimately became Pocket.
This post was published back in 2007. It may not function as originally intended or may be missing images.
This post was published back in 2007. It may not function as originally intended or may be missing images.
PNG Hover
July 07, 2007
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 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]-->
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]-->