Question

I currently have a menu using hovering image maps that works in Firefox, IE, Opera, and Chrome. However, the hover effect does not behave as expected in Safari. The idea is to use an image map and JavaScript to change the image of the menu when certain things are hovered over. In this case the image of the menu changes to an image where the text of the hovered item is black.

Here is a simple small sample of how the menu is set up:

HTML:

<ul id="menu">
    <li class = "topLevel"><a href = "../howWeDoIt/howWeDoIt.php">How We Do It</a>
        <ul>
            <li><img id = "how" src="../img/menu/how/how.png" usemap="#menuMapHow" alt="How We Do It"/></li>                       
        </ul>

        <map name = "menuMapHow" id="menuMapHow">
        <area shape="poly" coords="37,2,104,2,136,60,103,118,37,119,3,60" alt="Publications Link" onmouseover="document.getElementById('how').src='../img/menu/how/how1.png'" onmouseout="document.getElementById('how').src='../img/menu/how/how.png'" href=../howWeDoIt/publications/publications.php />
        <area shape="poly" coords="140,63,206,63,241,122,207,180,140,180,107,121" alt="Websites Link" onmouseover="document.getElementById('how').src='../img/menu/how/how2.png'" onmouseout="document.getElementById('how').src='../img/menu/how/how.png'" href="../howWeDoIt/websites/websites.php" />
        <area shape="poly" coords="36,124,102,124,136,182,103,240,36,240,2,182" alt="Professional Development Link" onmouseover="document.getElementById('how').src='../img/menu/how/how3.png'" onmouseout="document.getElementById('how').src='../img/menu/how/how.png'" href="../howWeDoIt/professionalDevelopment/professionalDevelopment.php" />
        </map>
    </li>
</ul>

CSS:

#menu > li > ul > li{
    display: none;      
}

#menu > li:hover > ul > li{
    display: block;
    z-index: 1;
}

I also have it hosted currently at [removed]
The hosted version will vary somewhat and may still have issues with Opera as I haven’t uploaded changes yet.

The problem with Safari is that when the cursor enters any of image-map’s hot spots the JavaScript is fired, but the hovered element loses focus and disappears. I’m not sure if this is a quirk with Safari or an actual bug, but it surprisingly doesn’t cause any issues with Chrome or any of the other popular browsers that I have tried.

If there is an easier alternative method to get the same effect, i.e. sprites or something else, I would appreciate direction on how to implement that instead.

Any help is greatly appreciated, thank you.

Apologies if this belongs in the Web Masters area, instead.

Answer 1

Have you tried a higher z-index value, or setting the z-index on #content to be a very low value (0)?