Home >Web Front-end >HTML Tutorial >It's a very simple problem, please help me solve it, thank you. _html/css_WEB-ITnose
It's a very simple problem, please help me solve it, thank you. _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:15:52904browse
I want to use CSS to set the background of a button:
That is, the background is picture 1.png when not clicked, and the background picture is 2.png after clicking (that is: when selected).
Is there any good solution? Thank you.
I found a solution online like this:
3f1c4e4b6b16bbbd69b2ee476dc4f83a
var Arr=new Array( "1.jpg ", "2.jpg ")
var i=0
function fun(){
aa.style.backgroundImage= "url( " Arr[i] ") "
i=i 1
if(i> =2)i=0
}
2cacc6d41bbb37262a98f745aa00fbf0
c49123a56962f44562f26bd53539f75a
a34de1251f0d9fe1e645927f19a896e8 b6c5a531a458a2e790c1fd6421739d1c
aaaa
4f8426b303fd482c2b5cad5323c6ce0d fd273fcf5bcad3dfdad3c41bd81ad3e5
f16b1740fad44fb09bfe928bcc527e08
660750fc64e5997e7f16716bc54fcbcd
Reply to discussion (solution)
Use div instead of button
Demonstration effect: http://job.dingso.com/crm/mail.php I wrote a button Style
c9ccee2e6ea535a969eb3f532ad9fe89
.btn{ background:url(images/td_bg.jpg) 0 0 no-repeat; line-height:33px; }
.bton{ background:url( images/td_bg.jpg) 0 -34px no-repeat; line-height:33px;}
.btdown{ background:url(images/td_bg.jpg) 0 -67px no-repeat; line-height:33px;}
#button{ overflow:hidden;width:98px; height:33px; border:none;cursor:pointer;}
531ac245ce3e4fe3d50054a55f265927
ece0fade53027fa39c0f770ed05b94aa
4ec11beb6c39d0703d1751d203c17053
$(document).ready(function (){
$('#button').mouseover(function(){
$(this).removeClass('btn');
$(this).removeClass('btdown');
$(this).addClass('bton');
});
$('#button').mouseout(function(){
$(this).removeClass('bton ');
$(this).addClass('btn');
});
$('#button').mousedown(function(){
$(this).addClass ('btdown');
});
$('#button').mouseup(function(){
$(this).removeClass('btdown');
$(this ).addClass('btn');
});
2cacc6d41bbb37262a98f745aa00fbf0
Yes, use DIV, and this does not require JS to control at all, it can be written directly with CSS www.seo7ye.com
Yes, use DIV, and this does not require JS to control at all, it can be written directly with CSS www.seo7ye.com
Please give me some advice:
How to control without JS? Write?
fa6ce1ae093b95c50b2f2aa81f9d6c08
I don’t need to teach you how to define two classes bg1 bg2
First of all, point out a few mistakes. There are many unnecessary spaces in the original poster’s code, such as id="aa " , i> =2, etc. This is a reason why the program cannot run. In addition, aa.style.backgroundImage, aa is not defined, and there are no other big problems. I have posted the detailed code below and put it in the same folder. Just two pictures can be run
<!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> c03b6b90ae77a88c8877bd12e1c492fe
How to define two classes bg1 bg2 You don’t need me to teach you
Thank you, yes, this method compares good.