javascript 表单提交更改提交按钮图像

Question

Here is my problem when i press the submit button in form the submit button change its image background css. however when i use mouseup to change its image again back to default it does not effect.

javascript code

window.onload = searchInit;

function searchInit(){

    document.getElementById('search_form').onsubmit = processForm;
    document.getElementById('submit_s').onmousedown = submitImageChange;
    document.getElementById('submit_s').onmouseup   = submitImageDefault;
}

function processForm(){

    var a = document.getElementById('search_text');

    if(a.value.length > 0){
        return true;
    }else{ 
        return false;
    }

}

function submitImageChange(){

    this.style.backgroundImage = 'url(\'../image/button_background.jpg\')';
}

function submitImageDefault(){

    this.style.backgroundImage = 'url(\'../image/button_background2.jpg\')';

}

I hope you can help me..

Thank you

Answer 1

use css to change the background on the active state of the button:

#submit_s {
  background: url('../image/button_background2.jpg');
}

#submit_s:active {
  background: url('../image/button_background.jpg');
}