2

「ホーム」ページには、ロゴタイプとメニュー#banner div(サイト全体に表示されます) と#content" div画像を表示するためのメニューが必要です。これらdivはすべて の中にあり#container" divます。メニューには 3 つのボタンがあります。

mouseoverイベントで各ボタンに表示される画像#content divがそれに応じて変化することを望みます。基本的に、ホバーbutton1すると の画像が からに#content変わります。onのイベントはそれを etc に変更します。ボタンがホバーされていない場合、画像は元の に戻ります。background.jpgbackground1.jpgmouseoverbutton2background2.jpgbackground.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;
}

いくつかの異なることを試しましたが、ボタン自体から背景画像を変更することしかできませんでした。Web を検索すると、これは JS で行うべきだと思いますが、その方法がわかりません。

4

3 に答える 3

1

これは CSS で完全に解決できますが、最初にヒントを教えてください。background.jpgとbackground1.jpgを 1 つの画像に結合し、むしろ背景の位置を変更します。これにより、ユーザーがメニュー要素にカーソルを合わせてから画像が表示されるまでの遅延がなくなり、追跡するファイルが少なくなります。

#button1高さを 100pxにするとします。上に通常状態の画像、下にホバー画像を含む高さ 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とともに保存し、画像へのパスを menu 要素とともに保存します。

デモについては、この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 に答える