JavaScript 使用<input>呈現與切換圖片

在html的部分宣告方式如下，將input宣告為image的型態，注意input預設滑鼠移入會變成可以點擊的手型

<input type="image" id="status1" src="images/ONbutton.jpg" value='1' onClick="ChangeImage(this.id);" />

在 onClick="ChangeImage(this.id);" 傳入的參數為自身元件的ID，然後我們可以在function中透過ID操作該元件

//透過ID找到元件，就可以變更src、value等屬性，也可以利用value判斷要執行什麼動作
function ChangeImage(id){
    var str = document.getElementById(id);
    if(str.value == 1){
        str.src = "../../images/OFFbutton.jpg";
        str.value = 2;
    }else if(str.value == 2){
        str.src = "../../images/ONbutton.jpg";
        str.value = 1;
    }
}