在 JavaScript 中交换图像

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中交换图像

作者：迹忆客最近更新：2024/03/16 浏览次数：

本文将讨论如何使用 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';
  }
}