Home/ Questions/Q 8023003
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T22:26:03+00:00

here it is hosted so you can see the behavior. (first two keys only,

  • 0

here it is hosted so you can see the behavior. (first two keys only, leftmost white key and black key next to it)

http://23.23.184.26/miller/cssz/main.html

works pefectly in chrome (19.-)
produces a blue halo (selection?) box in firefox (12.0)
does not work at all in IE9

any advice?

<html>

    <head>
        <style type="text/css">
            #main {
                position:absolute;
                left:0px;
                top:0px;
                z-index:100
            }
            #key1 {
                position:absolute;
                left:0px;
                top:0px;
                z-index:98
            }
            #key2 {
                position:absolute;
                left:0px;
                top:0px;
                z-index:98
            }
            #key1zone {
                position:absolute;
                width:50px;
                height:75px;
                top:175px;
                left:55px;
                z-index:200
            }
            #key2zone {
                position:absolute;
                width:50px;
                height:75px;
                top:100px;
                left:85px;
                z-index:200
            }
            /*uncomment this to show button zones*/
            #key1zone:hover, #key2zone:hover {
                border:1px solid red;
            }
        </style>
        <script type="text/javascript">
            function keyDown(key) {
                document.getElementById(key).style.zIndex = "102";
            }
        </script>
        <script type="text/javascript">
            function keyUp(key) {
                document.getElementById(key).style.zIndex = "98";
            }
        </script>
    </head>

    <body>
        <div id="key1zone" onMouseDown="keyDown('key1')" onMouseUp="keyUp('key1')"
        onMouseOut="keyUp('key1')"></div>
        <div id="key2zone" onMouseDown="keyDown('key2')" onMouseUp="keyUp('key2')"
        onMouseOut="keyUp('key2')"></div>
        <img id="main" src="0.gif" width="506" height="319">
        <img id="key1" src="1.gif" width="506" height="319">
        <img id="key2" src="2.gif" width="506" height="319">
    </body>

</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Add background-image pointing to a non-existing image to the div:-

    #key1zone {
    background-image:url('nosuchimage.jpg');
    Z-INDEX: 200; POSITION: absolute; WIDTH: 50px; HEIGHT: 75px; TOP: 175px; LEFT: 55px
}

    This solves the key issue. Testing passed with IE8.

    To solve the halo issue in Firefox, replace all IMG with DIV:-

    #main {
    background-image:url('0.gif');
    Z-INDEX: 100; POSITION: absolute; TOP: 0px; LEFT: 0px;
    width:506px;height:319px;
}
#key1 {
    background-image:url('1.gif');
    Z-INDEX: 98; POSITION: absolute; TOP: 0px; LEFT: 0px;
    width:506px;height:319px;
}
#key2 {
    background-image:url('2.gif');
    Z-INDEX: 98; POSITION: absolute; TOP: 0px; LEFT: 0px;
    width:506px;height:319px;
}
<div id="main"></div>
<div id="key1"></div>
<div id="key2"></div>
    • 0