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

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";
}