2

在“主页”页面上，我希望在 a #banner div（然后将在整个站点中都存在）上具有标识和菜单，并在 a#content" div上具有图像。所有这些divs 都在一个#container" div. 菜单有 3 个按钮。

我希望在mouseover事件中每个按钮显示相应#content div更改的图像。所以基本上，当 hover 时button1，图像#content会从background.jpg变为background1.jpg。mouseoveron事件button2会将其更改为background2.jpgetc。当按钮未悬停时，图像应恢复为原始background.jpg.

HTML：

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>E.S.T.</title>
  <link href="_css/layout.css" rel="stylesheet" type="text/css">
  <link href="SpryAssets/SpryMenuBarHorizontal.css" 
        rel="stylesheet" 
        type="text/css">
  <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>

<body>
  <div id="container">
    <div id="banner">
      <div id="logo">E.S.T.</div>
       <div id="menu">
         <ul id="MenuBar1" class="MenuBarHorizontal">
           <li id="button1"><a href="bio.html">Biography</a></li>
           <li id="button2"><a href="#">Albums</a></li>
           <li id="button3"><a href="#">Links</a></li>       
         </ul>
       </div>
     </div>
   <div id="content">
     <img id="back0" src="_img/background.jpg">
     <img id="back1" src="_img/back_bio.jpg">
   </div>
 </div>

<script type="text/javascript">
  var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1,
  {
    imgDown:"SpryAssets/SpryMenuBarDownHover.gif",
    imgRight:"SpryAssets/SpryMenuBarRightHover.gif"
  });
</script>
</body>
</html>

CSS：

@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;
}

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

4

3 回答 3

1

这可以完全用 CSS 解决，但首先让我给你一个提示：将background.jpg和合并background1.jpg到一个图像中，而不是改变背景位置。这样，从用户将鼠标悬停在菜单元素上到显示图片时不会有任何延迟，并且您需要跟踪的文件更少。

假设我们让#button1高度为 100 像素。我们制作了一个 200px 高的图像，顶部包含正常状态图像，底部包含悬停图像。这称为精灵。

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

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

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

于 2012-09-13T06:44:17.193 回答
0

为方便起见，我将使用jQueryjavascript 库来回答这个问题。

如果我理解正确，您希望#content包含一个在您将鼠标悬停在菜单项上时会发生变化的图像，并且该图像应该反映当前悬停的项目。

data我将尝试使用属性的方法，而不是将每个图像都包含在正文中。

HTML 相关部分

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

JavaScript

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

data-original所以现在我们在其属性中存储带有image标签的原始图像路径，并且图像的路径:hover与菜单元素一起存储。

请参阅此Fiddle进行演示！

于 2012-09-13T14:44:50.187 回答
0

在您的图像上提供一个 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>
于 2012-09-13T06:36:51.330 回答