CSS z-index/javascript working differently in the three major browsers

Question

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>

You should not use z-index for that. Just change the src attribute. — Bergi, May 25 '12 at 02:25
yah, I tried that orginally...there is a white "blink" that flashes between image transitions, even after they are cached....no good. The z-index method is attempting to get rid of the white blink flash..but now I have blue box and no working in IE. — 3z33etm, May 25 '12 at 02:39
Uh, then see [JavaScript Preloading Images](http://stackoverflow.com/questions/3646036/) — Bergi, May 25 '12 at 08:24
it does it even after they are cached...its not a caching issue. here is the orginal http://23.23.184.26/miller/keyboardanimation/index.html — 3z33etm, May 25 '12 at 11:31
flicker in IE and Chrome, no flicker in FF (after its cached). (we are discussing the img src changing version btw everyone, not the version in this post.) Bergi and I discussing this one: 23.23.184.26/miller/keyboardanimation/index.html — 3z33etm, May 25 '12 at 13:34

Grant Zhu · Accepted Answer · 2012-05-25T08:21:22.960

0

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>

edited May 25 '12 at 08:21

answered May 25 '12 at 08:04

Grant Zhu

2,988
2
23
28

disregard...I see that you provided a fix in IE...sorry I missed that, will try and report back. – 3z33etm May 25 '12 at 11:50
this fixed everything, but now there is a new problem: In FF and chrome it works perfectly. IN IE9 though it limits how fast you can click the keys (and for some reason doesn't show the red hover zone like FF and chrome do, and like its coded to do) – 3z33etm May 25 '12 at 14:45
Sorry, I didn't point out the fix for hover zone since I thought it wasn't important.. I believe IE doesn't support CSS hover. You may have to add onmouseover/onmouseout listeners to accomplish the same behavior. And in IE, mousedown event is triggered for only once when you double click. I didn't find out a good solution for that. If you find, please also let me know. Thanks. – Grant Zhu May 26 '12 at 02:34

score 0 · Answer 2 · edited May 23 '17 at 11:56

I'd propose the following. It uses a much shorter CSS, some inline styles, JavaScript Preloading Images, and no event handler attributes but sets them by script. Also, I gave the #image a background image, that should avoid any flickering. You could use transparent keydown-images then, too.

<html>
    <head>
        <style type="text/css">
            #main {
                position:relative;
            }
            .keyzone {
                position:absolute;
                z-index:1; /* one above is enough */
                width:50px; height:75px; /* all keys sharing their dimensions? */
            }
            .keyzone:hover {
                background: red;
                opacity: 0.3; /* or use rgba() for modern browsers */
            }
            #image {
                background: url('0.gif'); /* avoid flicker */
            }
        </style>
        <script type="text/javascript">
            function load(path) {
                 var img = new Image();
                 img.src = path;
                 return img;
            }
            var images = {
                // element id := Image to show
                key1: load("0.gif"),
                key2: load("1.gif")
            }; /* use a loop when everything is the same - but you
                  can also use more descriptive names with this map solution */
        </script>
    </head>

    <body>
        <div id="main">
            <img id="image" src="0.gif" width="506" height="319">
            <div id="key1" class="keyzone" style="top:175px; left:55px; /*width:50px; height:75px;*/"></div>
            <div id="key2" class="keyzone" style="top:100px; left:85px; /*width:50px; height:75px;*/"></div>
        </div>
        <script type="text/javascript">
            // I'm too lazy to use a onDOMready listener, so I just put the script after the elements
            var img = document.getElementById("image");
            function keyUp() {
                img.src = "0.gif";
            }
            function prevent(e) {
                e.preventDefault();
                return false;
            }
            function makeKeyHandler(keyEl, src) {
                keyEl.onmousedown = function keyDown() {
                   img.src = src;
                };
                keyEl.onmouseup = keyEl.onmouseout = keyUp; // resetter
                keyEl.onclick = prevent; // no selection on doubleclick etc.
            }
            for (var id in images) // see object declaration above
                makeKeyHandler(document.getElementById(id), images[id].src);
        </script>
    </body>
</html>

See http://jsfiddle.net/LSgF4/ for a working variant

here is your solution bergi http://23.23.184.26/miller/bergi/main.html it still does the blue square thing in chrome and FF(click it fast to get blue square). does not work at all in IE9. Also I think ur hotspots are backwards? — 3z33etm, May 25 '12 at 15:02
OK I thought the selection would disappear when defaultPreventing normal clicks, seems you need to add the same ondoubleclick. — Bergi, May 28 '12 at 17:48

CSS z-index/javascript working differently in the three major browsers

2 Answers2