在 JavaScript 中交换图像

Tahseen Tauseef 2023年1月30日 2022年5月10日
  1. 使用 JavaScript 中的 onclick 事件交换图像
  2. 在 JavaScript 中单击按钮交换图像
  3. 在 JavaScript 中单击鼠标时交换图像
  4. 使用 JavaScript 中的 onclick 事件交换多个图像
在 JavaScript 中交换图像

本文将讨论如何使用 onclick 事件和 JavaScript 中的其他方法交换图像。

使用 JavaScript 中的 onclick 事件交换图像

下面是使用 onclick 事件交换图像的完整代码。

<!DOCTYPE html>
<html>
<head>
    <title>swap image onclick javascript
</title>
<style type="text/css">
    h2 {
        text-align: center;
        font-size: 50px;
    }
    img#getImage {
        width: 300px;
        height: auto;
        border: 4px solid #a1a1a1;
    }
    div {
    text-align: center;
    }
</style>
</head>
<body>
    <div>
        <h2>Change image onClick event here...</h2>
        <img src="image1.jpg" id="getImage">
    </div>
    <div>
        <input type="button" onclick="imagefun()" value="Swap Image">
    </div>
    <script>
        function imagefun() {
            var Image_Id = document.getElementById('getImage');
            if (Image_Id.src.match("image1.jpg")) {
                Image_Id.src = "image2.jpg";
            }
            else {
                Image_Id.src = "image1.jpg";
            }
        }
    </script>
</body>
</html>

要使此代码为你工作,你需要在 Image_ID.src 中插入你的图像源链接。你可以使用此链接访问代码。

首先,在正文部分创建一个 HTML 代码结构、一个图像标签 img 和一个按钮。之后,添加图片源路径并输入 id 获取源代码; id 名称是 getImage,图像源名称是 image1

之后,在下面的代码中添加一个脚本并应用该函数。现在,在 onclick() 事件的帮助下,在按钮标签中添加功能,即 imagefun

在函数中,使用 JavaScript document.getElementById() 函数通过 id 获取图像 src。然后,为更改图像 onclick 事件添加 if...else 条件,因此两个定义的图像源代码随着 onclick 事件发生变化。

在这里,部分代码实现了多个图像的交换。首先,图像和输入按钮的可见代码在下面的部分。

<div>
    <h2>Swap image onClick event here...</h2>
    <img src="image1.jpg" id="getImage">
</div>
<div>
    <input type="button" onclick="imagefun()" value="Swap Image">
</div>

这里显示的是 JavaScript 代码。

<script>
    function imagefun() {
        var Image_Id = document.getElementById('getImage');
        if (Image_Id.src.match("image1.jpg")) {
            Image_Id.src = "image2.jpg";
        }
        else {
            Image_Id.src = "image1.jpg";
        }
    }
</script>

此外,你可以为设计结构创建一些实现,以更好地在前端显示图像和按钮。

<style type="text/css">
    h2 {
        text-align: center;
        font-size: 30px;
    }
    img#getImage {
        width: 300px;
        height: auto;
        border: 4px solid #a1a1a1;
    }
    div {
        text-align: center;
    }
</style>

在 JavaScript 中单击按钮交换图像

同样,你可以使用 JavaScript 在单击按钮时交换图像。下面提供了一个示例。

<div>
    <h2>Swap image onClick event here...</h2>
    <img src="image1.jpg" id="getImage">
</div>
<div>
    <button onclick="imagefun()">Image Swap</button>
</div>

仅更改 HTML 代码中的一行并将输入标记替换为按钮。这是主要的代码行。

将使用与上述(上一节)相同的代码。定义脚本代码,或添加带有函数的脚本标签。

在 JavaScript 中单击鼠标时交换图像

或者,你可以在 JavaScript 中通过鼠标单击交换图像。下面是一个示例代码。

<!DOCTYPE html>
<html>
<head>
    <title>javascript change image onclick event
</title>
<style type="text/css">
    h2 {
    text-align: center;
    font-size: 30px;
    }
    img#getImage {
    width: 300px;
    height: auto;
    border: 4px solid #a1a1a1;
    }
    div {
    text-align: center;
    }
</style>
</head>
<body>
    <div>
        <h2>Swap image onClick event here...</h2>
        <img src="image1.jpg" onmouseover="imagefun()" id="getImage">
    </div>
    <script>
        function imagefun() {
            var Image_Id = document.getElementById('getImage');
            if (Image_Id.src.match("image1.jpg")) {
                Image_Id.src = "image2.jpg";
            }
            else {
                Image_Id.src = "image1.jpg";
            }
        }
    </script>
</body>
</html>

在代码中添加鼠标悬停事件。当你单击并想通过鼠标将图像更改为另一个图像时,它会在鼠标单击事件上自动更改图像。

否则,仅添加此行并删除编辑器的旧输入和按钮代码。

<img src="image1.jpg" onmouseover="imagefun()" id="getImage">

使用 JavaScript 中的 onclick 事件交换多个图像

在这里,你可以实现两个图像交换。因此,可以使用 onclick 事件添加更多图像以交换多个图像。

现在,检查下面的代码示例以使用 onclick 事件更改多个图像。

function imagefun() {
    var Image_Id = document.getElementById('getImage');
    if (Image_Id.src.match("image1.jpg")) {
        Image_Id.src = "image2.jpg";
        Image_Id.src = "image3.jpg";
    }
    else {
        Image_Id.src = "image1.jpg";
    }
}

例如,添加了一个带有脚本代码的附加图像源。之后,可以从这些代码中显示多个图像。

你可以在页面中添加任意数量的图片。

相关文章 - JavaScript Image