JavaScript dynamic Change button style __java

Mainly used to button onmouseover, onmouseout, onclick events, the mouse moved to the button, the transparency of the button changes, remove the button transparency recovery. Click the button, the button is clicked background color change, click the Next button the button background color change, the previous button background color recovery. The effect is as above, the code is as follows. For more information, see Code Comments:

Place the following code in the head area:

<script language=javascript>
var prebuttonid= "null"; variable is used to store the ID of the last button being clicked and to define the initial value as null

function Buttonmouseover (ButtonID) {
document.getElementById (ButtonID). filters.alpha.opacity=60;
Change the transparency of the corresponding ID button when you move the mouse
}
function Buttonmouseout (ButtonID) {
document.getElementById (ButtonID). filters.alpha.opacity=100;
Change the transparency of the corresponding ID button when the mouse moves out
}
function Buttonmouseclick (ButtonID) {
if (prebuttonid!= "null") {//If the ID of the previous button is not an initial value null, the background color of the previous push is restored
document.getElementById (Prebuttonid). style.backgroundcolor= "#CCCCCC";
}
document.getElementById (ButtonID). style.backgroundcolor= "#FF0000";
Change the background color of the clicked button
PREBUTTONID=BUTTONID;//assigns the ID of the clicked button to the "Previous button" variable
}
</script>
<style type= "Text/css" >
. myinput{
Filter:alpha (opacity=100); * * This sentence can not be deleted, if not, JS can not control the transparency of the button * *
border:0px;
Background-color: #CCCCCC;
Font-family:sans-serif, Arial, Helvetica;
}
</style>

The following code is placed in the body area:

<input Type=button value=button1 name=button1 id=button1 class=myinput "onclick= (ButtonMouseClick)" Onmouseover= "Buttonmouseover (this.id)" onmouseout= "Buttonmouseout (this.id)" >
<input Type=button value=button2 name=button2 id=button2 class=myinput "onclick= (ButtonMouseClick)" Onmouseover= "Buttonmouseover (this.id)" onmouseout= "Buttonmouseout (this.id)" >
<input Type=button value=button3 name=button3 id=button3 class=myinput "onclick= (ButtonMouseClick)" Onmouseover= "Buttonmouseover (this.id)" onmouseout= "Buttonmouseout (this.id)" >
<input Type=button value=button4 name=button4 id=button4 class=myinput "onclick= (ButtonMouseClick)" Onmouseover= "Buttonmouseover (this.id)" onmouseout= "Buttonmouseout (this.id)" >
<input Type=button value=button5 name=button5 id=button5 class=myinput "onclick= (ButtonMouseClick)" Onmouseover= "Buttonmouseover (this.id)" onmouseout= "Buttonmouseout (this.id)" >

You can manually set the transparency and click on the background color, is a good effect.