1

ユーザーがどのページにいるかに基づいて、画像ファイルにある別のサブ画像を画像スプライトに表示させたいです。JavaScript でページを識別し、css スプライトを正しく表示できます。現在、アンカー タグも含む順序付けられていないリストの li タグ内にあります。

これが私のcssの例です

<style type="text/css">
#theList{position:relative;}
#theList li{margin:0;padding:0;list-style:none;position:absolute;}
#theList li, #navlist a{height:40px;display:block;}


#one{left:-10px;top:-55px;width:200px;}
#one{background:url('../../images/dashboardNavigationMasterSprite.jpg') 0px 0px;}
#one a:hover{background: url('../../images/dashboardNavigationMasterSprite.jpg') 0px -40px;}

#two{left:193px;top:-55px;width:200px;}
#two{background:url('../../images/dashboardNavigationMasterSprite.jpg') -202px 0px;}
#two a:hover{background: url('../../images/dashboardNavigationMasterSprite.jpg') -202px -40px;}
</style>

そして、ここに私のhtmlがあります

<ul id="theList">
<li id="one"><a href="http://bert2007sql64/sites/budgettool/FIDs/Pages/Dashboards/Dashboard_Exec_Home.aspx"></a></li>
  <li id="two"><a href="http://bert2007sql64/sites/budgettool/FIDs/Pages/Dashboards/Dashboard_Budget_Controls.aspx"></a></li>

基本的に私が疑問に思っているのは、おそらくjavascriptまたはjqueryを使用してxposおよびypos属性にアクセスして変更する方法です。私が操作しようとしている xpos と ypos の値は、以下の行にリストされているものです

#one{background:url('../../images/dashboardNavigationMasterSprite.jpg') 0px 0px;}

ありがとうございました。

4

3 に答える 3

1

同じタグの異なるクラス (またはその他の CSS セレクター基準) がスプライト内の異なる位置を指すように、スタイリングを拡張します。次に、Javascript でタグのクラスを変更して、別の画像を取得します。

于 2012-06-28T20:15:21.040 に答える
1

このようにプログラムで変更できます（JQueryを使用）

$('#id').css( {backgroundPosition: "0 0"} )

ここに素晴らしい例があります

あなたが試すことができる何か（テストされていません）：

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('#one').css( {backgroundPosition: "20px 10px"} )
    });
</script>
于 2012-06-28T20:15:32.423 に答える
1

これは、jQuery を使用するとうまくいくはずです。

$('#one').css( 'backgroundPosition', '0px 0px' );
于 2012-06-28T20:18:32.590 に答える