Простая проблема с JavaScript - изменение фона div на onMouseOver

Question

Я использовал этот код, чтобы создать навигацию, в которой onMouseOver, фон соседнего div меняется на соответствующее изображение.

Однако я изменил код, чтобы отразить несколько необходимых мне кнопок навигации.Это, вероятно, где я ошибся.Кроме того, я работаю в среде ColdFusion на Sitemaker CMS.Это также может быть проблемой.

Вот код.

<script>
function changeStyle1() {
document.getElementById('banners').style.backgroundImage = url('images/banners/contractingbanner.jpg');
}
function changeStyle2() {
document.getElementById('banners').style.backgroundImage = url('images/banners/procurementbanner.jpg');
}
function changeStyle3() {
document.getElementById('banners').style.backgroundImage = url('images/banners/distributionbanner.jpg');
}
function changeStyle4() {
document.getElementById('banners').style.backgroundImage = url('images/banners/printingbanner.jpg');
}
function changeStyle5() {
document.getElementById('banners').style.backgroundImage = url('images/banners/custompacksbanner.jpg');
}
function changeStyle6() {
document.getElementById('banners').style.backgroundImage = url('images/banners/businessdevelopmentbanner.jpg');
}
function changeStyle7() {
document.getElementById('banners').style.backgroundImage = url('images/banners/sustainabilitybanner.jpg');
}
function changeStyleBack() {
document.getElementById('banners').style.backgroundImage = url('images/banners/laundrybanner.jpg');
}</script>

---

<div id="banners">
&nbsp;
</div>
<ul id="nav">
<li><a id="contractingservices" href="body.cfm?id=1" onmouseover="changeStyle1()"; onmouseout="changeStyleBack()">Contracting Services</a></li>
<li><a id="procurement" href="body.cfm?id=1" onmouseover="changeStyle2()"; onmouseout="changeStyleBack()" >Procurement &amp; Data Management</a></li>
<li><a id="distribution" href="body.cfm?id=1" onmouseover="changeStyle3()"; onmouseout="changeStyleBack()">Distribution</a></li>
<li><a id="printing" href="body.cfm?id=1" onmouseover="changeStyle4()"; onmouseout="changeStyleBack()" >Printing</a></li>
<li><a id="laundry" href="body.cfm?id=1">Laundry</a></li>
<li><a id="custompacks" href="body.cfm?id=1" onmouseover="changeStyle5()"; onmouseout="changeStyleBack()" >Custom Packs</a></li>
<li><a id="businessdevelopment" href="body.cfm?id=1" onmouseover="changeStyle6()"; onmouseout="changeStyleBack()" >Business Development</a></li>
<li><a id="sustainability" href="body.cfm?id=1" onmouseover="changeStyle7()"; onmouseout="changeStyleBack()" >Sustainability</a></li>

Как исправить этот код, чтобы он работал или нашел другое решение JavaScript или jQuery?Я искал и искал только для того, чтобы придумать десятки одинаковых JS-переключателей фона, которые можно легко скопировать с помощью CSS.

Answer 1

Вам действительно не нужно писать все эти строки JavaScript. Вы можете выполнить свою задачу всего за несколько строк кода CSS: Чтобы изменить фоновое изображение другого DIV, вы можете использовать код jQuery, как в разделе 2 этого ответа.

<style>
a#contractingservices{
     padding: 10px; /* Just to put the link in a big box */
     background-image : url('link/to/your/default/image');
}

a#contractingservices : hover {
     background-image : url('link/to/your/new/background/image');
}
</style>

Теперь добавьте:

<a id="contractingservices" href="body.cfm?id=1">Contracting Services</a>

Надеюсь, у вас есть идея.

Раздел 2: Измените BG-образ другого DIV, введя jQuery

$('a#contractingservices').mouseover(function(){
     $('#banner').css('background-image', 'link/to/new/image');
});
$('a#contractingservices').mouseout(function(){
     $('#banner').css('background-image', 'link/to/old/image');
});

Это то, что вы действительно хотели, верно?

Answer 2

Вы должны сделать одну сокращенную функцию:

var d = document.getElementById('banners');

function changeStyle(image) {
d.style.backgroundImage = "url('images/banners/" + image ;
}

function changeStyleBack() {
d.style.backgroundImage = "url('images/banners/laundrybanner.jpg')";
}

А затем назовите его для каждого из парящих изображений, как это:

<div id="banners">
&nbsp;
</div>
<ul id="nav">
<li><a id="contractingservices" href="body.cfm?id=1" onmouseover="changeStyle('contractingbanner.jpg');"; onmouseout="changeStyleBack();">Contracting Services</a></li>
</ul>

Или вы можете использовать функцию наведения jQuery, чтобы не использовать две отдельные функции с onmouseover и onmouseout для достижения этой цели. Подробнее об этом здесь .

Answer 3

Может быть, вы можете сделать что-то вроде этого (например, с помощью jQuery):

var styles = {
  'style-1': 'images/banner/....png',
  'style-2': 'images/banner/....png',
  // And so on...
}

function change_style(id)
{
  // Here you should check if 'id' is a valid style id
  // and if everything looks great,
  $('#banners').css('background-image', styles[id]);
}

И обновить свои теги <a />, чтобы вызывать эту функцию, передавая ожидаемый стиль