是否有可能改變我的css精靈顯示javascript的子圖像？

我希望我的圖像精靈根據用戶所在的頁面顯示我的圖像文件中的另一個子圖像。我可以在javascript中識別頁面，並讓我的css精靈正確顯示，當前位於無標列表中的li標籤中，其中也包含錨標籤。是否有可能改變我的css精靈顯示javascript的子圖像？

這裏是我的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>

基本上我想知道是我如何可以訪問和修改XPOS和ypos使用JavaScript屬性或jQuery可能。該XPOS和ypos值我試圖操縱低於

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

Thankyaverymuch該行列出的，

來源

2012-06-28 John

您可以（使用JQuery）編程修改它像這樣

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

Here你有一個很好的例子

東西（未測試），你可以嘗試：

<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-28 20:15:32 jperelli

謝謝，我會試試 – John

這個答案暗示只有一個圖像URL屬性，並且每個li實例的位置都會移位。應該不需要重複背景圖片網址。然後，您的CSS可以包含正常狀態下的ID列表以及處於懸停狀態的相同列表。 – mtf

MTF我相信我明白你的意思，所以有三個html無序列表，然後從那裏處理visibilty？ – John

展開你的造型，使目前存在的類（或其他一些CSS選擇器的標準）的相同的標籤指向你的精靈中的不同位置。然後在Javascript中，更改標籤的類以獲取不同的圖像。

來源

2012-06-28 20:15:21 n8wrl

這應該爲你使用jQuery：

$('#one').css('backgroundPosition', '0px 0px');

來源

2012-06-28 20:18:32 j08691

是否有可能改變我的css精靈顯示javascript的子圖像？

回答

相關問題