用戶使用CSS或JavaScript進行操作時，更改html頁面上的圖標

Question

我是一個相當新手的Web開發，具有HTML CSS和JavaScript基本知識。 我有一個小的博客頁面，允許用戶添加博客文章的標題-類似於SoF在其問題上所具有的內容。

因此，我面臨的問題是，我不確定一旦用戶單擊該圖標，該如何更改該圖標（該圖標在sprite中具有）。 因此，簡而言之

(Page1) icon1.png --> User Clicks --> (Page1) icon2.png

我的sprites.png中的icon1.png和sprites.png

我認為JS是實現此目標的方法-但我想知道它是否（正在以某種方式進行AJAX嗎？）-任何方向都將不勝感激。

謝謝。

Answer 1

    $(function(){
    $('#SELECTOR').click(function(){
    $('#icon1').css('background-position','0px, 120px') //whtever bg position
     });
     })

Answer 2

您可以如下使用javascript。

在單擊上設置background圖像位置。

document.getElementById('SELECTOR').style.backgroundPosition='0px 150px';

其中SELECTOR是要在其上更改圖像位置的element's ID

正如您所說的， 您擁有精靈圖像，因此只需要相應地設置圖像位置即可。