2

当鼠标悬停菜单链接如下时，我有 5 个不同的背景，它们会从一个变为另一个：

5 个中的 3 个不同的屏幕截图

我希望该网站在所有浏览器中都能正常工作，但我得到的结果却大不相同。在 Firefox 中，背景图像消失并重新出现在每个菜单链接上，但只有当我第一次用光标浏览链接时，其他时候工作正常。在 chrome 中，背景会在每次鼠标悬停时消失并重新出现。在 IE 中，onmouseover 根本不起作用，菜单也不起作用。

所以我请你帮我解决这个问题，包括消失和 IE 中的菜单。我发现这种消失和重新出现是由于图像加载缓慢而发生的，但我不知道如何修复我的代码来解决这个问题。

我刚刚在 jsFiddle 中编写了我的代码，并且菜单在其中也不起作用。而且我注意到，当我将窗口缩小到小于 div 的大小时，整个东西开始变形。我以为我已经修复了它，但似乎我也不知道如何修复它。你可以在这里看到我的代码：

我在 jsFiddle 中的代码

CSS

body
{
    background-image:url(Slike/Ozadja/Osnova.png);
    background-repeat:no-repeat;
    background-position:center;
    background-attachment:local;
    background-color: #FFFAF0;
    background-size:794px;
}

#layoutWidth div
{
    width:628px;
    margin:auto;
    display:table;
    overflow:hidden;
}

div .header
{
    height:85px;
    text-align:center;
    display:table-row;
}

div .menu 
{
height:173px;
display:table-row;
}

#ddm
{   margin-top: 30px;
    padding: 0;
    z-index: 30}

#ddm li
{   margin-left:12px;
    margin-top:10px;
    padding: 0;
    list-style: none;
    float: left;
    font: bold 100% arial}

#ddm li a
{   display: block;
    margin: 0 6px 0 0;
    padding: 4px 4px;
    width: 130px;
    background: transperent;
    color: #FFF;
    text-align: center;
    text-decoration: none}

#ddm li a:hover
{   background: transparent;
    color: #C0C0C0;
    }

#ddm div
{   position: absolute;
    visibility: hidden;
    margin-top:10px;
    padding: 0;
    background: transparent;
    }


    #ddm  div a
    {   position: static;
        display: block;
        margin-left: -16px;
        padding: 5px 10px;
        width: 150px;
        white-space: normal;
        text-align: center;
        text-decoration: none;
        background: transperent;
        color: #000;
        font: bold 11px arial;
        }

    #ddm div a:hover
    {   background: transparent;
        color: #696969}

div .body
{   
    height:650px;
    text-align: left;
    display:table-row;
}

div .footer 
{   

    display:table-row;
}

HTML

<html>
<head>
<title>Drop-Down Menu</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta http-equiv="Content-Type"
    content="text/html;charset=UTF-16">
    <link rel="stylesheet" type="text/css" href="Stil.css">

<!-- dd menu -->
<script type="text/javascript">
<!--

var timeout         = 500;
var closetimer      = 0;
var ddmenuitem      = 0;
var myImage         = {};
myImage.m1 = 'Prvi_predal.png';
myImage.m2 = 'Drugi_predal.png';
myImage.m3 = 'Tretji_predal.png';
myImage.m4 = 'Cetrti_predal.png';

function mopen(id)
{   
    mcancelclosetime();

    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';
    document.body.style.backgroundImage = 'url(Slike/Ozadja/'+myImage[id]+')';
}


function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
    document.body.style.backgroundImage = 'url(Slike/Ozadja/Osnova.png)'
}

function mclosetime()
{
    closetimer = window.setTimeout(mclose, timeout);
}

function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

document.onclick = mclose; 

// -->

</script>

</head>
<body>

<div id="layoutWidth">
<div class="header">
<a href="Domov.html">
<img src="Slike/Logo/Logo.png" alt="Mankajoč logotip" width="279" height="80"></a>
</div>



<div class="menu">
<ul id="ddm">
    <li><a href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">Obdelava lesa</a>
        <div id="m1" class="prvi" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Izdelki iz iverala</a>
        <a href="#">Izdelki iz masive</a>
        <a href="#">Obnova pohištva</a>
        </div>
    </li>
    <li><a href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">Talne obloge</a>
        <div id="m2" class="drugi" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Laminat</a>
        <a href="#">Parket</a>
        </div>
    </li>
    <li><a href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">Ostale storitve</a>
        <div id="m3" class="tretji" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">Uporaba mavčnih plošč</a>
        <a href="#">Lažja zidarska dela</a>
        <a href="#">Fotografiranje dogodkov</a>
        <a href="#">Video zajem dogodkov</a>
        </div>
    </li>
    <li><a href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">Informacije</a>
        <div id="m4" class="cetrti" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">O podjetju</a>
        <a href="#">Kontakt</a>
        <a href="#">Kje se nahajamo</a>
        <a href="#">Galerija</a>
        </div>
    </li>

</ul>
<div style="clear:both"></div>

<div style="clear:both"></div>
</div>

<div class="body">
<p>Brez pomena.</p>
<br />
<p> Tole tudi! </p>
</div>

<div class="footer">
Brez pomena.
</div>
</div>

</body>
</html>
4

1 回答 1

1

对于闪烁的背景图像，以及您想从 JS 中使用的其他图像，您需要预先加载，否则它会闪烁。如何预加载图像？点击这里 （它在闪烁，因为当页面加载时，图像没有。所以，你要使用的那个图像，不在用户那里。浏览器下载它，但是直到那个时候，没有图像是什么它可以为他/她显示。这就是原因。）

IE 默认阻止 JS（如 IE 10）。您需要启用它。我在底部有一个警告气泡，上面写着，我已经阻止了一切……或类似的东西。您无法从脚本启用此功能。只有您可以为用户创建警告消息，如果启用了 JS，您可以将其删除。

另外，在 jsFiddle 中，如果您<head>从左上角的第二个下拉列表中选择“no warp - in”选项，它将在页面上工作。之后，您需要单击顶部的运行。

于 2013-09-07T21:45:34.853 回答