点击按钮即可切换图像

Making a button switch out an image on click

本文关键字：图像 按钮      更新时间：2023-09-26

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

在mouseup上，应将图像切换回正常。（请注意，除了鼠标按下外，图像的名称相同。.png与ed.png切换，document.mouseup则相反。但document.mousoup甚至不起作用）。

$.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;
    });
}

当鼠标被举起到单击区域之外时，不会更改图像
否则它会起作用。：（

你真正想要什么？

<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";
}
相关文章：