简单的javascript问题-onMouseOver div背景更改

Question

我使用了此代码制作一个导航，其中 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 解决方案？我搜索了又搜索才找到了几十个相同div的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]);
}

并更新你的 标签来调用此函数传递预期的样式

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">
 
</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

你真的不需要写所有这些 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');
});

这就是您真正想要的，对吧？