html点击图片切换图片
时间: 2023-07-18 08:07:01 浏览: 63
可以使用JavaScript来实现图片的点击切换。
首先,在HTML中,需要给图片添加一个id和一个onclick事件,代码如下:
```html
<img id="myImage" src="image1.jpg" onclick="changeImage()">
```
然后,需要在JavaScript中定义一个函数,用来切换图片。在这个函数中,我们可以使用if语句来判断当前显示的图片,然后根据判断结果来切换图片。代码如下:
```javascript
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("image1")) {
image.src = "image2.jpg";
} else {
image.src = "image1.jpg";
}
}
```
这个函数会获取图片元素,然后判断当前显示的图片是不是image1.jpg,如果是,则将图片的src属性设置为image2.jpg,否则将其设置为image1.jpg。
完整的HTML和JavaScript代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击图片切换图片</title>
<script>
function changeImage() {
var image = document.getElementById("myImage");
if (image.src.match("image1")) {
image.src = "image2.jpg";
} else {
image.src = "image1.jpg";
}
}
</script>
</head>
<body>
<img id="myImage" src="image1.jpg" onclick="changeImage()">
</body>
</html>
```
这样,当点击图片时,就会切换显示的图片。