0

このコードを不器用にする方法があるかどうかを調べていますか？ホバーしてクリックすると、2つ以上のボタンの状態を切り替える2つのボタンを作成するためのよりエレガントな方法があるはずだと思います。

ありがとう！

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript">

    img1 = "images/buy1.png"; 
    img2 = "images/buy2.png"; 
    function chng(c_img) { 
    if (c_img.src.indexOf(img1)!= -1) c_img.src = img2; 
    else c_img.src = img1; 
    }  
    img3 = "images/sell1.png"; 
    img4 = "images/sell2.png"; 
    function chng2(c_img) { 
    if (c_img.src.indexOf(img3)!= -1) c_img.src = img4; 
    else c_img.src = img3; 
    } 
    </script>

  <title></title>
</head>

<body>
  <div class="container">
    <div id="sell">
      <a href="#"><img src="images/buy1.png" onclick="chng(this)" name="img" width="115"
      border="0" height="50" id="img" /></a>
    </div><a href="#"><img src="images/sell1.png" onclick="chng2(this)" name="img2"
    width="115" border="0" height="50" id="img2" /></a>
  </div>
</body>
</html>
4

5 に答える 5

1

jQueryトグルイベントの使用

ノート

このコードは、リンクと画像のIDが何らかの一致を持っているリンクと画像を処理します。これはdata、html5以外のブラウザでも実行可能ですが、互換性もあります。異なる画像ごとに画像またはクラス名を指定する必要がありますが、トグルスクリプトは修正されています。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">

    var icons = {
        buy:{ 
          on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png", 
         off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
        },
        sell:{ 
          on:"http://ev9.evenue.net/evenue/linkID=global-fargo/images/buy-tickets.png", 
         off:"http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"
        }
    } 
    $(document).ready(function() {
        $(".toggleLink").toggle(
          function() {
            var id = $(this).attr("id");
            $("#"+id+"Img").attr("src",icons[id].on);
            // OR change the className of the link 
            // OR use data-toggle - but no need to test the image src
          },
          function() {
            var id = $(this).attr("id");
            $("#"+id+"Img").attr("src",icons[id].off);
          }
        );
    });
    </script>

  <title></title>
</head>

<body>
  <div class="container">
    <div id="sell">
      <a href="#" id="buy" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"  id="buyImg" width="115"
      border="0" height="50" /></a>
      <a href="#" id="sell" class="toggleLink"><img src="http://ev8.evenue.net/evenue/linkID=global-sandler/images/buyTickets.png"  id="sellImg" width="115"
      border="0" height="50" /></a>
  </div>
</body>
</html>

UPDATEデータ属性を使用してポイントを証明する

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">

      $(document).ready(function() {
        $(".toggleLink").toggle(
          function() {
            var img = $(this).find("img");
            img.attr("src",img.data('toggleon'));
          },
          function() {
            var img = $(this).find("img");
            img.attr("src",img.data('toggleoff'));
          }
        );
    });
    </script>

  <title></title>
</head>

<body>
  <div class="container">
    <div id="buy">
      <a href="#" class="toggleLink"><img src="images/buy1.png" 
      data-toggleon="images/buy1.png" 
      data-toggleoff="images/buy2.png"  
      width="115" border="0" height="50" id="img" /></a>
  </div>
</body>
</html>

PS：素晴らしいバージョンをここで見てください

ホバーのある要素をクリックしてからクリックするとホバー効果が削除され、もう一度クリックするとグレッグペティットのフィドルでホバーが追加されます

于 2012-04-23T06:04:12.907 に答える
1

これは、CSSの背景スプライトを使用するのに最適なようです。両方の状態が垂直に積み重ねられた画像を作成します。

----------------------
|      "on" image    |
----------------------
----------------------
|     "off" image    |
----------------------

リンクにクラスを与え、background-imageプロパティを使用して要素に画像を適用します（以下の省略表記を使用）。

<a href="#" class="buy1"></a>

.buy1 {
   display: block;
   width: 115px;
   height: 50px;
   background: transparent url(images/buy1.png) left bottom no-repeat;
}

.buy1.on { background-position: left top; }

次に、JavaScriptを使用すると、クラスを簡単に切り替えることができます。

$(document).ready(function(){
    $("#sell a").on('click',function(){
        $(this).toggleClass('on');
    });
});

このアプローチには多くの利点があります。

  • サーバーリクエストが少ない（すべての画像を1つのスプライトシートにまとめることができ、1つのリクエストでロードされます）ということは、パフォーマンスが向上することを意味します
  • 「オン」状態がすでにロードされているため、ホバーに遅れはありません。
  • メンテナンスがはるかに簡単

編集追加します。スクリーンリーダーのユーザーが操作できるものを提供するために、リンクに実際のコンテンツを配置する必要があります。私は通常、そのために画像置換技術を使用します：

<a href="#" class="buy1"><span>Buy Now</span></a>

.buy1 span {
    position: absolute;
    display: block;
    top: -10000px;
    left: -10000px;
    font-size: 1px;
}
于 2012-04-23T06:07:04.987 に答える
0

CSSセレクターを使用します-ここに記載されているように： http ：//www.w3schools.com/cssref/sel_hover.asp

于 2012-04-23T05:07:37.157 に答える
0

あなたがよりスタイリッシュなことを意味するなら、cssまたはjqueryによる方法があります

http://www.webreference.com/programming/css_stylish/index.html

http://speckyboy.com/2009/05/27/22-css-button-styling-tutorials-and-techniques/

于 2012-04-23T05:07:41.680 に答える
0

結構そうです。jQueryを使用して、よりエレガントな方法を考えることができます。

まず、要素のそれぞれにtoggleImgクラスを与えます。次に、各ボタンに属性data-toggleonとを指定しdata-toggleoffます。id必要に応じてとを削除しnameます。

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" rel="stylesheet" href="style.css" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
     $(".toggleImg").on('click',function(){
      if($(this).attr('src')==$(this).data('toggleon')){
       $(this).attr('src',$(this).data('toggleoff'))
      }else{
       $(this).attr('src',$(this).data('toggleon'))
      }
    });

    });
    </script>

  <title></title>
</head>

<body>
  <div class="container">
    <div id="sell">
      <a href="#"><img src="images/buy1.png" class=toggleImg data-toggleon="images/buy1.png" data-toggleoff="images/buy2.png"  width="115" border="0" height="50" /></a>
    </div><a href="#"><img src="images/sell1.png" class=toggleImg data-toggleon="images/sell1.png" data-toggleoff="images/sell2.png" width="115" border="0" height="50"  /></a>
  </div>
</body>
</html>

したがって、コードは簡単に拡張できimgます。適切なクラス/属性を使用して、必要な場所に新しいsを追加するだけで、新しいJSを追加する必要はありません。

于 2012-04-23T05:16:09.617 に答える