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

我是一名网络开发新手，对

htmlcss

和

JavaScript

有基本的了解。我有一个小的博客页面，它允许用户向上投票一篇博客文章的标题——类似于软件对其问题的投票

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

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

其中icon1.png和icon2.png位于my

sprites.png

我认为JS是实现这一点的方法——但我想知道它是否是（是否正在做某种

AJAX

的方法？）——任何方向都将不胜感激

---

谢谢。

您可以按如下方式使用javascript

单击设置

背景

图像位置

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

其中，

选择器

是要更改图像位置的

元素ID

---

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

你可以使用javascript，如下所示

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

单击设置

背景

图像位置

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

其中，

选择器

是要更改图像位置的

元素ID

---

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

在按钮中有一个onclick事件处理程序。调用一个js函数来替换图像，因为你没有回发你不需要ajax，只需要一个合适的点击处理程序来更改sprite容器的css类名@Pete他可能不知道jQuery是什么

“我是一个相当新的web开发人员”

…这对他来说是一个学习的好机会！比单纯的学习容易得多js@Pete：非常感谢您的回答-我大约在一周前开始学习JQuery-因此，我能够理解您所说的。在按钮中使用onclick事件处理程序。调用一个js函数来替换图像，因为你没有回发你不需要ajax，只需要一个合适的点击处理程序来更改sprite容器的css类名@Pete他可能不知道jQuery是什么

“我是一个相当新的web开发人员”

…这对他来说是一个学习的好机会！比单纯的学习容易得多js@Pete：非常感谢您的回答-我大约一周前开始学习JQuery-所以，我能够理解你所说的。谢谢这个Dipesh：快速问题：正如其他人所建议的那样，在JQuery中也可以这样做吗？@user2152572是的，甚至JQuery也可以这样做，而且非常容易理解……谢谢这个Dipesh：快速问题：正如其他人所建议的那样，在JQuery中也可以这样做吗JQuery？@user2152572是的，即使是JQuery也能做到这一点，而且非常容易理解。。。

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