Question

我使用this代码制作导航，其中onMouseOver，相邻div的背景变为相应的图像。

但是，我修改了代码以反映我需要的多个导航按钮。这可能是我出错的地方。此外，我在Sitemaker CMS上的ColdFusion环境中工作。这也可能是个问题。

这是代码。

<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

也许你可以做这样的事情（比如使用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 />代码，调用此函数传递预期的样式

Answer 2

~~你真的不需要写所有这些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节：通过使用jQuery

更改另一个DIV的BG图像

$('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 3

你应该制作一个速记功能：

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两个单独的函数来实现此目的。详细了解here。

简单的javascript问题 - onMouseOver div后台更改

3 个答案:

第2节：通过使用jQuery