Question

我遇到了跨浏览器兼容性问题。

基本上，期望的效果是方块是不透明度=“0.5”onmouseout而opacity =“1”onmouseover。广场一旦点击，就会重定向到一个页面。

代码在Chrome上按预期工作，但在IE 11上，背景图像不会显示。另外我注意到onmouseout / onmouseover的不透明度函数不起作用。

<html>

    <head>
        <script>
            function bigImg(x) {
                x.style.opacity = "1";
            }

            function normalImg(x) {
                x.style.opacity = "0.5";
            }
        </script>
        <style type="text/css">
            table.imagetable {
                font-family: verdana, arial, sans-serif;
                font-size:11px;
                color:#FFFFFF;
                border-width: 3px;
                border-color: #FFFFFF;
                table-layout: fixed;
            }
            table.imagetable th {
                border-width: 3px;
                padding: 3px;
                border-style: solid;
                border-color: #FFFFFF;
                border-spacing: 3px;
                width: 200px;
                height: 200px;
            }
            table.imagetable td {
                border-width: 3px;
                padding: 3px;
                border-style: solid;
                border-color: #FFFFFF;
                border-spacing: 3px;
                width: 200px;
                height: 200px;
            }
            table.imagetable td:hover {
                cursor: pointer;
                cursor: hand;
            }
            #app1 {
                background-image: url("http://gprgeo@www.gprairborne.com/images/airborne/blue.png");
            }
            #app2 {
                background-image: url("http://gprgeo@www.gprairborne.com/images/airborne/blue2.png");
            }
            #app3 {
                background-image: url("http://gprgeo@www.gprairborne.com/images/airborne/blue3.png");
            }
            #app4 {
                background-image: url("http://gprgeo@www.gprairborne.com/images/airborne/blue4.png");
            }
            #app5 {
                background-image: url("http://gprgeo@www.gprairborne.com/images/airborne/blue5.png");
            }
        </style>
    </head>
    <table class="imagetable">
        <tr>
            <td id="app1" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
            <td id="app2" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
            <td id="app3" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
        </tr>
        <tr>
            <td id="app4" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
            <td id="app5" onmouseover="bigImg(this)" onmouseout="normalImg(this)" onClick="javascript:location.href='http://www.google.com';"></td>
        </tr>
    </table>

</html>

编辑：

好的，所以现在一切正常，图像的路径被阻止，因为它们是从正在建设的网站提供的，需要登录。即使登录浏览器，IE 11也存在问题，但Chrome没有。请参阅下面的jsfiddle以获得理想的效果。

http://jsfiddle.net/nP7pd/4/

工作在chrome中的不透明脚本/背景图像不在IE 11中

0 个答案: