用html语言实现点击不同的文字切换不同图片
时间: 2024-02-26 15:56:32 浏览: 24
可以使用以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<title>点击文字切换图片</title>
<script>
function changeImage(imgName) {
var image = document.getElementById('image');
image.src = imgName;
}
</script>
</head>
<body>
<p>点击下面的文字切换不同的图片:</p>
<p><a href="#" onclick="changeImage('image1.jpg')">图片1</a></p>
<p><a href="#" onclick="changeImage('image2.jpg')">图片2</a></p>
<p><a href="#" onclick="changeImage('image3.jpg')">图片3</a></p>
<img id="image" src="image1.jpg" alt="图片">
</body>
</html>
```
在上面的代码中,我们首先定义了一个 `changeImage` 函数,用于切换图片。该函数接受一个参数 `imgName`,代表要显示的图片的文件名。
然后,我们在 HTML 页面中增加了三个链接,每个链接都有一个 `onclick` 事件,当点击链接时,会调用 `changeImage` 函数,并传入对应的图片文件名。
最后,我们在页面中添加了一个 `<img>` 标签,用于显示图片。初始时,该标签的 `src` 属性指向默认图片的文件名,当点击链接时,该属性会被修改为对应的图片文件名,从而实现图片的切换。