JavaScript---事件（基础）_html事件基础-优快云博客

这是一个简单的图片画廊网页，通过点击不同的图片链接可以显示对应的大图。该页面使用了HTML、CSS和JavaScript技术来实现基本的图片展示功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这里写图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Image Gallery</title>

<style>

</style>

</head>
<body>

    <h1>SnapShots</h1>
    <ul>
        <li>
            <a href="C:\Users\zwh\Desktop\simple\images\1.jpg"
               onclick="showPicture(this); return false;"
               title="A fireworks display">Fireworks</a>
        </li>
        <li>
            <a href="C:\Users\zwh\Desktop\simple\images\2.jpg"
               onclick="showPicture(this); return false;" 
               title="A cup of black coffee">Coffee</a>
        </li>
        <li>
            <a href="C:\Users\zwh\Desktop\simple\images\3.jpg"
               onclick="showPicture(this); return false;"
               title="A red, red rose">Rose</a>
        </li>
        <li>
            <a href="C:\Users\zwh\Desktop\simple\images\4.jpg"
               onclick="showPicture(this); return false;"
               title="The famous clock">Big Ben</a>
        </li>
    </ul>
    <img id="placeholder" src="C:\Users\zwh\Desktop\simple\images\default.jpg" alt="my image gallery">

    <script>

        //点击链接把img图片替换给链接的图片
        function showPicture (whichPicture) {
            //whichPicture代表一个元素节点
            var source = whichPicture.getAttribute("href");
            var placeholder = document.getElementById("placeholder");

            placeholder.setAttribute("src", source);
        }

    </script>

</body>
</html>