Question

这里它是托管的，所以你可以看到行为。（仅前两个键，最左边的白键和旁边的黑键）

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

在chrome（19.-）中完美在firefox（12.0）中生成一个蓝色光环（选择？）框在IE9中根本不起作用

任何建议？

<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>

Answer 1

将指向不存在的图像的背景图像添加到div： -

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

这解决了关键问题。测试通过IE8传递。

要解决Firefox中的光环问题，请用DIV替换所有IMG： -

#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>

Answer 2

我建议如下。它使用更短的CSS，一些内联样式，JavaScript Preloading Images，没有事件处理程序属性，但是通过脚本设置它们。另外，我给了#image一个background image，这应该避免任何闪烁。你也可以使用透明的keydown图像。

<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>

有关正在运行的变体，请参阅http://jsfiddle.net/LSgF4/

CSS z-index / javascript在三大浏览器中的工作方式不同

2 个答案: