0

当我的光标位于链接 1 上时，我想将图像 »main.png« 更改为图像 »background.png «，如下面的链接所示。我还有 3 张图片，对于菜单的每个链接（链接 2、链接 3 和链接 4）一个打开的抽屉。

主要的

改变背景

我已经有了工作菜单代码，当光标位于链接 1 或链接 2 或链接 3 或链接 4 上时，它会打开带有子链接的子菜单。此子菜单保持打开状态，直到计时器结束。所以我想将新代码集成到旧代码中，所以只要子菜单 1 打开，新背景 1 就在那里，只要子菜单 2 打开，新背景 2 就在那里，以此类推，其他两个子菜单。我已经在互联网上搜索了解决方案，但我找不到任何东西。类似的东西还有很多，但不只是喜欢，只是我还不够好，不知道怎么整合。我尝试了一些，但没有一个奏效。

这是我的工作菜单代码：

CSS

body
{
background-image:url(Slike/Ozadja/main.png);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
background-size: cover;
background-size:contain;}


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

#ddm li
{   margin: 0; 
    padding: 0;
    list-style: none;
    float: left;
    font: bold 14px arial}

#ddm li a
{   display: block;
    margin: 0 1px 0 0;
    padding: 4px 10px;
    width: 120px;
    background: green;
    color: #FFF;
    text-align: center;
    text-decoration: none;}

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

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

    #ddm div a
    {   position: static;
        display: block;
        margin: 0;
        padding: 5px 10px;
        width: auto;
        white-space: nowrap;
        text-align: center;
        text-decoration: none;
        background: yellow;
        color: #000;
        font: 12px arial}

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

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="default.css">

<script type="text/javascript">

var timeout         = 500;
var closetimer      = 0;
var ddmenuitem      = 0;

function mopen(id)
{   
    mcancelclosetime();

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

    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';    
}

function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

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

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

document.onclick = mclose;     

</script>

</head>
<body>

<ul id="ddm">
    <li><a class="prvi" href="#" onmouseover="mopen('m1')" onmouseout="mclosetime()">link1</a>
        <div id="m1" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">sublink11</a>
        <a href="#">sublink12</a>
        </div>
    </li>
    <li><a class="drugi" href="#" onmouseover="mopen('m2')" onmouseout="mclosetime()">link2</a>
        <div id="m2" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">sublink21</a>
        <a href="#">sublink22</a>
        </div>
    </li>
    <li><a class="tretji" href="#" onmouseover="mopen('m3')" onmouseout="mclosetime()">link3</a>
        <div id="m3" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">sublink31</a>
        <a href="#">sublink32</a>
        </div>
    </li>
    <li><a class="cetrti" href="#" onmouseover="mopen('m4')" onmouseout="mclosetime()">link4</a>
        <div id="m4" onmouseover="mcancelclosetime()" onmouseout="mclosetime()">
        <a href="#">sublink41</a>
        <a href="#">sublink42</a>
        </div>
    </li>
</ul>
<div style="clear:both"></div>

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

</body>
</html>
4

1 回答 1

1

更新

如果我明白你想要什么，这就是解决方案：

var myImages = {};
myImage['m1'] = 'image1.png';
myImage['m2'] = 'image2.png';
myImage['m3'] = 'image3.png';
myImage['m4'] = 'image4.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/main.png)';
}
于 2013-09-05T13:14:33.543 回答