Как сделать onmouseover на ссылке меню изменить фоновое изображение?

Я хочу изменить изображение »main.png« в изображение »background.png« когда мой курсор находится по ссылке 1, как вы можете видеть по ссылкам ниже. И у меня есть 3 изображения больше, для каждой ссылки меню (ссылка 2, ссылка 3 и ссылка 4) один открытый ящик.Как сделать onmouseover на ссылке меню изменить фоновое изображение?

main

changed background

Я получил рабочий код меню уже, который открывает подменю с sublinks, когда курсор находится на ссылку 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>

источник

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

Спасибо. Вы просто набрали основные и фоновые изображения. Но это окончательно большой шаг вперед, но теперь я не знаю, что делать для других трех ссылок в меню. То, что heppens теперь - это каждая ссылка от одного до четырех, находится на курсоре, то же самое происходит с помощью heppens. Я хочу, чтобы для каждой ссылки был другой фон. – Strubsi

Я обновил ответ. – melancia

Это работает! Большое вам спасибо, вы сделали мой день. – Strubsi

Как сделать onmouseover на ссылке меню изменить фоновое изображение?

ответ

Смежные вопросы