0

私はこれを以前に行ったことがないので、これを行う方法について少し混乱していますが、私は3つの画像を持っています：

デフォルト状態としての1つの画像：1.png、ホバー状態としての2番目の画像：2.png、およびリンク/画像がクリックされたときの3番目の画像：3.png

これらの3つの画像をどのように設定しますか？

4

3 に答える 3

3

これは、cssクラスを介して行うことができます。例えば：

<div class="image"></div>

<style type="text/css">   
    .image {
      background: url(1.png) no-repeat top left;
    }
    .image:hover {
      background: url(2.png) no-repeat top left;
    }
    .image:active {
      background: url(3.png) no-repeat top left;
    }
</style>
于 2012-05-22T02:15:59.783 に答える
1

以下に説明するように、それらを3つの異なるイメージとして設定し、cssを介してそれらを制御できます。

#my-image {
    background: url("/1.png");
}

#my-image:hover {
    background: url("/2.png");
}

#my-image:active {
    background: url("/3.png");
}

しかし、一般的に使用される手法はcss-spritesです。これらの3つの画像を1つの画像に結合します。各画像画像が100x100pxであるとすると、100x300pxの画像を作成します。そして、あなたはを制御しbackground-positionます。これにより、ユーザーの応答性の欠如の問題が解消され、サーバーでの作業が容易になります。

于 2012-05-22T02:16:18.120 に答える
0

上記の2つのソリューションは、a：activeの場合、イメージが永続的に変更されないため、正しく機能しません。これにはjqueryを使用する必要があり、全員がこれも実行します。

                <html>
                 <head>
                  <script type="text/javascript" src="jquery-1.7.1.min.js"></script>
                  <script type="text/javascript">
                      $(document).ready(function(){
                        $("#my_link").hover(function(){
                          $(this).removeClass("class_1").addClass("class_2");
                          },function(){
                          $(this).removeClass("class_2").addClass("class_1"); 
                       });

                   $("#my_link").click(function(){
                        $(this).removeClass("class_1").addClass("class_3");
                   });
              });

             </script> 
             <style type="text/css">
                .class_1{background: url("/1.png") no-repeat top left;}
                .class_2{background: url("/2.png") no-repeat top left;}
                .class_3{background: url("/3.png") no-repeat top left;}  
             </style>
         </head>
         <body>
              <a id="my_link" class="class_1" href="#" >Click here</a>
         </body>
       </html>

これは私にとってはうまくいきます。うまくいくことを願っています！

于 2012-05-22T05:54:36.840 に答える