在 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";
}
}
例如,新增了一個帶有指令碼程式碼的附加影象源。之後,可以從這些程式碼中顯示多個影象。
你可以在頁面中新增任意數量的圖片。