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

Question

我是一个相当新手的 web 开发，具有HTML CSS和JavaScript. 我有一个小博客页面，它允许用户对博客文章的标题进行投票——类似于 SoF 对其问题的看法。

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

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

其中 icon1.png 和 icon2.png 在我的sprites.png

我认为 JS 是解决这个问题的方法 - 但我想知道它是否是（正在做某种AJAX方式来做到这一点？） - 任何方向都将不胜感激。

谢谢。

score 1 · Accepted Answer

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

score 0 · Accepted Answer

您可以使用 javascript，如下所示。

单击设置background图像位置。

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

您要更改图像位置SELECTOR的位置在哪里element's ID

正如你所说，你有精灵图像，所以你只需要相应地设置图像位置。

2 回答 2