ホームページ > 記事 > ウェブフロントエンド > とても単純な問題なので、解決を手伝ってください。ありがとうございます。 _html/css_WEB-ITnose
とても単純な問題なので、解決を手伝ってください。ありがとうございます。 _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:15:52885ブラウズ
CSS を使用してボタンの背景を設定したい:
つまり、通常クリックされていないときの背景は画像 1.png で、クリック後 (つまり、選択されたとき) の背景画像は 2.png になります。 。
何か良い解決策はありますか？ありがとうございます。
次のような解決策をオンラインで見つけました:
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var Arr=new Array("1.jpg", "2.jpg")
var i=0
function fun(){
aa.style. = "url( "+Arr[i]+ ") "
i=i+1
if(i> =2)i=0
}
2cacc6d41bbb37262a98f745aa00fbf0
c4d71d61f23b0af2958aca8eaca0253d f496b0587836593d5e057356702d9602
271cb3d2ff227ca6331ee41e81293d65 button " onclick= "fun() ">
ディスカッション (解決策) に返信
ボタンの代わりに div を使用します
デモンストレーション効果: http://job.dingso.com/crm/mail.php Meボタンのスタイルを記述します
.btn{background:url(images/td_bg.jpg) 0 0 no-repeat; }
.bton{background:url(images/td_bg) .jpg) 0 -34px 繰り返しなし; 行の高さ:33px;}
.btdown{ 背景:url(images/td_bg.jpg) 0 -67px 繰り返しなし; 行の高さ:33px;}
#button{ オーバーフロー:hidden;width:98px; height:33px; border:none;cursor:pointer;}
531ac245ce3e4fe3d50054a55f265927
dd4b421679ef4266bd8d701b9ef4e590
4ec11beb6c39d0703d1751d203c17053
$(document).ready(function(){
$('#button').mouseover(function(){
$(this).removeClass('btn');
$(this).removeClass('btdown');
$('#button'); .mouseout(function(){
$(this).removeClass('bton');
$(this).addClass('btn');
});
$('#button').mousedown(function( ){
$(this).addClass('btdown');
});
$('#button').mouseup(function(){
$(this).removeClass('btdown');
$( this).addClass('btn');
});
4a35cc856ddaa8939606e8ec0bb86eee bg1 bg2 の 2 つのクラスを定義する方法はありますか? 教える必要はありません
まず、投稿者のコードに id="aa"、i> などの不要なスペースがたくさんあることを指摘します。 2 など。これにより、プログラムが失敗します。また、aa.style.backgroundImage が定義されていないため、他に大きな問題はありません。以下に 2 つの詳細なコードを貼り付けました。同じフォルダー内にあると実行されます
<!DOCTYPE html><html><head><script> var Arr=new Array( "1.jpg", "2.jpg") var i=0 ;function fun(){ var aa=document.getElementById("aa"); aa.style.background="url("+Arr[i]+ ")"; i=i+1; if(i>=2) i=0;}</script> </head><body><table width=500 height=100 id= "aa" background="1.jpg" > <tr> <td> aaaa </td> </tr> </table> <input type="submit" value="Button" id="bb" onClick="fun();"/></body></html> < ;input name="" value="" type="text" class="bg1" onmouseover="this.className='bg2'" onmouseout="this.className ='bg1'" />
2 つのクラス bg1 bg2 の定義方法を教える必要はありません