JavaScript---事件(基础)

这里写图片描述

<!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>

猜你喜欢

转载自blog.csdn.net/zwhsoul/article/details/80500899