function text_button_mouseover_image() {
    //preload
    im = new Image();
    im.src='/templates/cuonline-soar/images/button_tall_hover.jpg';
    return im;
}

function text_button_mouseover_by_id(id) {
    im = text_button_mouseover_image();
    text_button_mouseover_setup_one(document.getElementById(id), im.src);
}

function text_button_mouseover_setup(max_num) {
    im = text_button_mouseover_image();
    // getElementsByClassName function, or jquery selector function would be more elegant, but I don't want to bother including a framework for just this file
    for (i = 1; i <= max_num; i++) {
        text_button_mouseover_setup_one(document.getElementById('text_button_'+i), im.src);
    }
}

function text_button_mouseover_setup_one(element, url) {
    orig_image_url = element.style.backgroundImage;
    element.onmouseover = function() {
        this.style.backgroundImage='url('+url+')';
    }
    element.onmouseout = function() {
        this.style.backgroundImage=orig_image_url;
    }
}