It's a very simple problem, please help me solve it, thank you. _html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:15:52
Original
884 people have browsed it

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:
<script> <br> var Arr=new Array( "1.jpg ", "2.jpg ") <br> var i=0 <br> function fun(){ <br> aa.style.backgroundImage= "url( " Arr[i] ") " <br> i=i 1 <br> if(i> =2)i=0 <br> } <br> </script>




aaaa
< /td>


Reply to discussion (solution)

Use div instead of button

Demonstration effect: http://job.dingso.com/crm/mail.php I wrote a button Style





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?



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>
Copy after login



How to define two classes bg1 bg2 You don’t need me to teach you

Thank you, yes, this method compares good.

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template