如何让菜单链接上的onmouseover改变背景图片？

我想将图像»main.png«更改为图像»background.png«当光标在链接1上时，您可以在下面的链接中看到。我还有3张图片，菜单的每个链接（链接2，链接3和链接4）都有一个打开的抽屉。如何让菜单链接上的onmouseover改变背景图片？

main

changed background

我有工作已经菜单代码，这将打开子菜单子链路，当光标在链路1或链路2或链路3或链路4.此子菜单继续开放直到计时器耗尽。所以我想将新代码整合到旧代码中，所以只要子菜单1打开并且新的背景2停留在那里，只要子菜单2打开并且以其他两个子菜单打开，新的背景1就停留在那里。我在互联网上搜索了解决方案，但找不到任何东西。这里有很多类似的东西，但不仅仅是这样，而且我还不足以知道如何整合它。我尝试了一些，但没有工作。

这是我的工作菜单代码：

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>

来源

2013-09-05 Strubsi

您应该显示您尝试解决的问题。也许你应该刷新你的基本JavaScript技巧 –

我会，但我删除了所有这些。你说得对，从我开始的JavaScript课程开始的三年，所以是的，我忘了它的大部分。 – Strubsi

修订

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

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-05 13:14:33 melancia

谢谢。你只是嘲弄主要和背景图像。但这绝对是一大进步，但现在，我不知道该如何为菜单中的其他三个链接做些什么。现在发生的事情是，从一到四的每个链接都会被光标所指，同样的变化也会发生。我想为其他背景的每个链接。 – Strubsi

我已经更新了答案。 – melancia

它的工作原理！非常感谢你，你做了我的一天。 – Strubsi

如何让菜单链接上的onmouseover改变背景图片？

回答

相关问题