Javascript 为另一个div上的按钮更改鼠标上方的图像

在“主页”上，我想在

#banner div

（将在整个网站上出现）和

#content”div

上有一个标识和一个菜单，以便有一个图像。所有这些

div

都在

#容器“div

中。菜单有3个按钮

我希望在

mouseover

事件中，

#content div

上显示的每个按钮图像都会相应地改变。因此，基本上，当悬停

按钮1

时，

#content

上的图像将从

background.jpg

更改为

background1.jpg

。

button2

上的

mouseover

事件会将其更改为

background2.jpg

等。当按钮未悬停在上方时，图像应恢复为原始的

background.jpg

HTML:

---

我尝试了几种不同的方法，但我只设法改变按钮本身的背景图像。通过在网络上搜索，我认为这应该用JS来完成，但我不知道怎么做。

在你的图像上给出一个id，比如：id=idimage 您可以像这样使用jQuery：

<script type="text/javascript">
$(document).ready(function(){
    $("#MenuBar1 li").mouseover(function(){
        var id=$(this).attr('id');
        var number = id[id.length-1];
        $("#id_image").attr("src","_img/background"+number+".jpg");
    });  
});  
</script>

$（文档）.ready（函数（）{
$（“#MenuBar1 li”）.mouseover（函数（）{
var id=$（this.attr（'id'）；
变量编号=id[id.length-1]；
$（“#id_image”）.attr（“src”，“_img/background”+number+”.jpg”）；
});  
});  

这可以通过CSS完全解决，但首先让我给你一个提示： 将

background.jpg

和

background1.jpg

组合成一幅图像，并更改背景位置。这样，从用户将鼠标悬停在菜单元素上到显示图片之间就不会有任何延迟，而且要跟踪的文件也会更少

假设我们让按钮1的高度为100像素。我们制作了一个200px高的图像，在顶部包含正常状态图像，在底部包含悬停图像。这被称为一个

---

这将移动背景图像，显示悬停版本。

为了方便起见，我将使用javascript库回答这个问题

如果我没有弄错，您希望

#content

包含一个图像，当您将鼠标悬停在菜单项上时，该图像会发生变化，并且该图像应反映当前悬停的项目

我将尝试一种使用

数据

属性的方法，而不是包含身体中的每个图像

HTML相关部分

因此，现在我们将原始图像路径与图像标记一起存储在其

data original

属性中，而

：hover

图像的路径与菜单元素一起存储

---

看这个演示

如果background.jpg是按钮的背景，这听起来很简单。背景图像不是按钮的背景（它是网站的背景）。图像和按钮位于不同的分区内。啊，对不起。我完全误解了你的问题（我相信@AlessandroMinoccheri也是如此）。我会在几分钟内提交一个新的答案，好吗？我应该把这个放在代码中的什么地方？我试过了，它看起来是一个聪明的解决方案，但它告诉我最后一行有一个语法错误，其中有“”（？！？），然后图像没有改变。我们是否需要事先加载图像？我在html代码中还有一些其他脚本。会有冲突吗？不会再有语法错误了！但是图像仍然没有改变！您的图像具有div id=“id\u image”？图像位于id=“content”的div中，我已将id=“id\u image”添加到代码中：我已再次修改并在我的服务器中工作。您必须在图像名称之前（在脚本中）输入您的img路径，在这种情况下：\u img try！这似乎就是我一直在寻找的。让我试试看。。。（我应该把JavaScript放在哪里？相同的代码？附加文件？）把它放在

中的

标记之间。哦您需要包括jQuery。可以像使用URL链接其他JavaScripts一样链接到它，也可以下载它并在本地链接到它。它不会给出任何错误，它显示“正常”图像，但当我悬停按钮时没有任何变化。在脚本中，当您编写“#back”时，它指的是什么？请查看我的代码。有一个id为

back

的图像。当然，你可以随便叫它什么。您记得在页面中包含jQuery吗？我在最初的问题中更新了代码，向您展示了它现在的样子。

@charset "UTF-8";
@import url("../_fonts/Days/fontstylesheet.css");

body {
  background-color:#CCC;
  font-family:Days;
  font-size:100%;
}

#container {
  width:850px;
  max-height: 650px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  overflow: hidden;
  font-family: Days;
}

#logo {
  position:relative;
  font-size: 4em;
  color:white;
  float:left;
}

#menu {
  float:right;
  margin-top:40px;
}

<script type="text/javascript">
$(document).ready(function(){
    $("#MenuBar1 li").mouseover(function(){
        var id=$(this).attr('id');
        var number = id[id.length-1];
        $("#id_image").attr("src","_img/background"+number+".jpg");
    });  
});  
</script>

#button1 {
    height: 100px;
    background-image: url("background.jpg");
}

#button1:hover {
    background-position: 0 -100px;
}

<ul id="MenuBar1" class="MenuBarHorizontal">
    <li id="button1" data-img="background.jpg"><a href="bio.html">Biography</a></li>
    <li id="button2" data-img="back_album.jpg"><a href="#">Albums</a></li>
    <li id="button3"><a href="#">Links</a></li>       
</ul>

<div id="content">
    <img id="back"
         src="_img/background.jpg"
         data-original="_img/background.jpg" 
         alt="e.s.t" />
</div>

$(document).ready(function() {
    $("#MenuBar1 li").mouseover(function() {
        $("#back").attr("src", $(this).data("img"));
    }).mouseout(function() {
        $("#back").attr("src", $("#back").data("original"));
    });
});​