使用css或javascript在用户操作时更改html页面上的图标

Question

我是一个具有HTML CSS和JavaScript基础知识的新手网络开发。我有一个小博客页面，允许用户提升博客标题的标题 - 类似于SoF在其问题上的标题。

所以，我面临的问题是，一旦用户点击它，我不确定如何更改图标（我在精灵中）。所以，在坚果壳中

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

其中icon1.png和icon2.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

按照你说的你有精灵图像所以你只需要相应地设置图像位置。