按下按钮可在单击时切换图像

Question

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

在mouseup上，它应该将图像切换回正常状态。 （请注意，图像具有相同的名称，除了鼠标向下.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";
}