javascript - 使按钮在单击时切换出图像

Question

可能有一种更简单的方法可以做到这一点，我认为，比如使用 CSS、伪类或其他任何东西，但无论如何，由于某种原因，我已经编写了这个函数。

在mouseup它应该将图像切换回正常。（请注意，图像具有相同的名称，除了 mouse down.png是切换的，ed.png而 document.mouseup 则相反。但 document.mouseup 甚至不起作用）。

$.fn.buttonify = function () {
    console.log("buttonification successful");
    var that;
    var source;
    this.mousedown(function (event) {
        var top_value;
        var left_value;
        that = this;
        if (event.which == 1) { //if it is a left click
            source = this.src.substring(0, this.src.length - 4);
            source += "ed.png";
            this.src = source;
            console.log(this.src);
        }
    });

    $(document).mouseup(function () {
        if (that == null) {
            console.log("returninurnging");
            return;
        }
        console.log(source);
        source = source.substring(0, source.length - 6); //very questionable code
        source += ".png";
        that.src = source;
        console.log(that.src);
        that = null;
    });
}

当鼠标移到点击区域之外时，它不会改变图像。
否则它工作。:(

Answer 1

你真正想要什么？

<img src="image1.jpg" id="image">
<input type="button" value="whatever" onMouseDown="change()" onMouseUp="undochange()">

JAVASCRIPT

function change()
{
image = document.getElementById ("image");
image.src="image2.jpg";
}

function undochange()
{
image = document.getElementById ("image");
image.src="image1.jpg";
}