js点击链接换图片

在JavaScript中，通过点击链接来更换图片是一种常见的交互操作。以下是实现这一功能的基础概念和相关步骤：

基础概念

DOM操作：JavaScript可以操作HTML文档对象模型（DOM），从而改变页面上的元素。
事件监听：可以为HTML元素添加事件监听器，以便在特定事件发生时执行JavaScript代码。
图像元素：HTML中的<img>标签用于显示图像。

实现步骤

HTML结构：创建一个链接和一个图像元素。
JavaScript代码：编写脚本来处理点击事件，并更换图像的src属性。

示例代码

以下是一个简单的示例，展示了如何通过点击链接来更换图片：

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Change Image on Click</title>
</head>
<body>
    <a href="#" id="changeImageLink">Click me to change the image</a>
    <br>
    <img id="myImage" src="image1.jpg" alt="Sample Image">

    <script src="script.js"></script>
</body>
</html>

JavaScript部分（script.js）

document.addEventListener('DOMContentLoaded', function() {
    var link = document.getElementById('changeImageLink');
    var image = document.getElementById('myImage');

    link.addEventListener('click', function(event) {
        event.preventDefault(); // 阻止链接的默认行为
        if (image.src.includes('image1.jpg')) {
            image.src = 'image2.jpg';
        } else {
            image.src = 'image1.jpg';
        }
    });
});