如何讓菜單鏈接上的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改變背景圖片？

回答

相關問題