Home  »  Solutions  »  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

What Next?

Related Posts:


More: , ,

Comments (12)


  1. I dunno, but your supposed-to-be and your the-way-it-is examples are EXACTLY the same… I tried with IE7 and Firefox.

    November 9th, 2007 Brad

  2. Brad, you were right, the tiled background image wasn’t showing up, so now it should look correct. Thanks for the save.

    November 12th, 2007 Nate Weiner

  3. interesting effect, do you have a better formatted version of the source (or pseudo) code?

    November 27th, 2007 Doug

  4. Ok, is this a fix to make PNGs transparent in IE6 or to do a sliding doors css hover?

    December 19th, 2007 Kristian

  5. DXImageTransform.Microsoft.AlphaImageLoader

    google that, nice workaround though.

    December 20th, 2007 mike

  6. Great stuff. Works well. Finding that as soon as I need an “active” state the fix breaks, though. I’d love to see this work with the rollovers and an option to remove the link and show the over state for which ever a user clicks.

    Or perhaps a way to use a class in the li tag to toggle an active state. That way PHP/ server code could determine which should be active.

    Would try it myself but you’ve obfuscated.

    January 3rd, 2008 jason

  7. [...] ?????? ????? ???? ?????? ??????? ????? ??????? ??? PNG Hover __________________ { ;My blog: ca2oom [...]

    February 8th, 2008 ??? PNG ???????? IE 6 ?? - ????? ???

  8. this appears to not be working at all for me. I have linked to the image properly as well as the script and still nothing, can the creator offer some assistance?

    February 12th, 2008 rob

  9. nm, I got it working. I moved the <if ie6 part to my footer at the very end of my document and it worked.

    February 12th, 2008 rob

  10. I’ve followed the steps, but it makes my .pngs completely disappear and are replaced with a small image with a purple border (which, I assume is the 1px square .gif).

    Any suggestions?

    April 30th, 2008 Trevor Kjorlien

  11. I understand it the way you explain it, but the method doesn’t reflect in your own coding. You have internal style sheets up there in your example, for one.

    July 18th, 2008 annette

  12. First of all thx for a great script. One question, how do i keep one of the image in the hover position, because i have a drop down menu and when I’m hovering the sub items I want to have the top one in the hover position. What is the correct way to do that, from what i seen pngHover_hover is the one that does this but i don’t know how to run it on :(

    October 8th, 2009 George

Leave a Reply

Posted in: Solutions • Comments Feed: RSS 2.0 • You can leave a response, or trackback from your own site.