在 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";
}
}
例如,添加了一个带有脚本代码的附加图像源。之后,可以从这些代码中显示多个图像。
你可以在页面中添加任意数量的图片。