在 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 中跟踪鼠标位置
发布时间:2024/03/16 浏览次数:188 分类:JavaScript
-
在本教程中,我们将了解如何在 JavaScript 中使用鼠标事件跟踪鼠标位置。
使用 JavaScript 将 SVG 转换为 PNG
发布时间:2024/03/16 浏览次数:121 分类:JavaScript
-
本教程教授如何从 SVG 创建 PNG 图像。我们将使用 Canvg JavaScript 库和 toDataURL 方法。
在 JavaScript 中更改悬停图像
发布时间:2024/03/16 浏览次数:88 分类:JavaScript
-
在悬停时更改图像在 UI 上添加了一种很酷的氛围。此任务可以通过基本的 JavaScript 函数操作执行,也可以通过 jQuery 的 .hover() 函数执行。
在 JavaScript 中从 URL 加载图像
发布时间:2024/03/16 浏览次数:112 分类:JavaScript
-
在今天的文章中,我们将学习如何在 JavaScript 中从指定的 URL 加载图像。
使用 JavaScript 淡入图像
发布时间:2024/03/16 浏览次数:101 分类:JavaScript
-
可以借助某些方法和属性来淡入图像以制作具有视觉吸引力的 UI。requestAnimationFrame 方法和 className 属性是淡入图像的首选方式。
使用 HTML Canvas 在 JavaScript 中裁剪图像
发布时间:2024/03/16 浏览次数:100 分类:JavaScript
-
在本文中,我们将看到如何使用 HTML 5 canvas 元素在 JavaScript 中裁剪图像。
在 JavaScript 中使用 Onclick 重定向页面
发布时间:2024/03/16 浏览次数:78 分类:JavaScript
-
本教程将教你如何在用户单击 HTML 按钮时创建 JavaScript 重定向。我们将使用 onclick 函数来监听事件。如果用户单击该按钮,它将重定向到另一个页面。