在 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';
  }
}

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

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

上一篇：使用 JavaScript 旋转图像

下一篇：在 JavaScript 中操作图像

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间：2025/02/21 浏览次数：178 分类：JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间：2025/02/21 浏览次数：150 分类：JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

jQuery 中的日期选择器

发布时间：2024/03/24 浏览次数：99 分类：JavaScript

本文将讨论使用 jQuery UI 库的 jQuery 中的 Datepicker。

用 jQuery 检查复选框是否被选中

发布时间：2024/03/24 浏览次数：102 分类：JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 中的 $.Ajax 数据类型

发布时间：2024/03/24 浏览次数：133 分类：JavaScript

本教程演示了在 jQuery 中使用 $.ajax 数据类型。

在 jQuery 中检查字符串是否包含子字符串

发布时间：2024/03/24 浏览次数：106 分类：JavaScript

本教程演示了如何在 jQuery 中使用 contains() 方法。

在 jQuery 中检查和取消检查复选框

发布时间：2024/03/24 浏览次数：94 分类：JavaScript

本文演示了如何使用 jQuery 选中和取消选中复选框。

jQuery 中的 Window.onload 与 $(document).ready

发布时间：2024/03/24 浏览次数：180 分类：JavaScript

本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。

迹忆客专注技术分享