在 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