在 JavaScript 中交換影象
-
使用 JavaScript 中的
onclick事件交換影象 - 在 JavaScript 中單擊按鈕交換影象
- 在 JavaScript 中單擊滑鼠時交換影象
-
使用 JavaScript 中的
onclick事件交換多個影象
本文將討論如何使用 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';
}
}
例如，新增了一個帶有指令碼程式碼的附加影象源。之後，可以從這些程式碼中顯示多個影象。
你可以在頁面中新增任意數量的圖片。