-1

我有一个带有背景图像的按钮。

HTML

<input name="" type="button" value=" " style="background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png)
 no-repeat center; width:13px; height:11px; border:none;">

js小提琴链接

我想补充的是，当我单击按钮时，背景图像应该会改变并变成另一个图像（深色图像）。这是该图像的链接，应该替换为什么。并再次单击深色图像回到浅色图像。

我想知道他可能吗？我不知道该怎么做。如果能做到这一点，那就太好了。

4

5 回答 5

4 
$('input:button').on('click',function(){
 $(this).css('background-image','url(http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png)');
})

演示--> http://jsfiddle.net/eCkGQ/5/

更新 ：

切换图像

CSS：

.light{
  background:url('http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png') no-repeat center;
}

.dark{
  background:url('http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png') no-repeat center;
}

html:

<input class='light' name="" type="button" value=" " style="width:13px; height:11px; border:none;">

JS：

$('input:button').on('click', function () {
    $(this).toggleClass('dark light');
});

演示--> http://jsfiddle.net/eCkGQ/14/

于 2013-05-23T12:59:39.877 回答
1

请在http://jsfiddle.net/eCkGQ/8/查看演示

<div style="Width:36px;">    
    <input name="" type="button" value=" " style="background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png) no-repeat center; width:13px; height:11px; border:none;" id='img'/>
</div>

$('#img').click(function(){
$(this).css('background','url(http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png)')
});
于 2013-05-23T13:02:02.287 回答
1

试试这个（OP在上面的评论中问了同样的问题）

HTML

<input name="" type="button" value=" " class="first" style="width:13px; height:11px; border:none;">

CSS

.first{
     background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png) no-repeat center;         
}

.second{
     background:url(http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png) no-repeat center;
}

jQuery

 $('input:button').on('click',function(){
    $(this).toggleClass("first second");
 });

工作小提琴

于 2013-05-23T13:09:58.903 回答
1

此代码无需使用新类即可工作，它基本上在两个给定图像之间切换：http: //jsfiddle.net/zPeD3/

HTML

<div style="Width:36px;">
    <input name="" type="button" value=" " style="background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png) no-repeat center; width:13px; height:11px; border:none;" />
</div>

Javascript：

$('input').click(function() {
    var imgs = ['http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png', 'http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png'];
    var current = $(this).css('background-image');
    $(this).css('background-image', 'url(' + (current.contains(imgs[1]) ? imgs[0] : imgs[1]) + ')');
});
于 2013-05-23T13:17:08.453 回答
0

添加定义默认值的 css 类

.default{
background:url(http://img259.imageshack.us/img259/1815/iconanalyticsaccessacce.png no-repeat center;
width:13px; 
height:11px; 
border:none;
}

.new{
background:url('http://img4.imageshack.us/img4/1815/iconanalyticsaccessacce.png') no-repeat center;
width:13px; 
height:11px; 
border:none;
}

查询：

$('input:button').on('click',function(){
 $(this).removeClass('default');
$(this).addClass('new');
})
于 2013-05-23T13:09:27.390 回答