-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;">

J:

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

デモ--> http://jsfiddle.net/eCkGQ/14/

于 2013-05-23T12:59:39.877 に答える
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

このコードは、新しいクラスを使用せずに機能します。基本的に、指定された 2 つのイメージを切り替えます: 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 に答える
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 に答える