Javascript图片库（1）_javascript里自带的图片-CSDN博客

本文链接：https://blog.csdn.net/helloworlddm/article/details/78462292

本文展示了一个简单的HTML页面，该页面使用JavaScript实现了一个图片库的功能。点击链接时，图片不会打开新的网页，而是替换页面上的占位符图片，并且图片下方的文字也会更新为所选图片的描述。

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

显示效果如下图
这里写图片描述
代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <title >image gallery </title>
</head>
<body>
    <h1>SnapShots</a>
    <ul>
        <li>
            <a href="images/1.jpg" onclick="showpic(this);return false;" title="picture one">picture one</a>
        </li>
        <li>
            <a href="images/2.jpg" onclick="showpic(this);return false;" title="picture two">picture two</a>
        </li>
        <li>
            <a href="images/3.jpg" onclick="showpic(this);return false;" title="picture three">picture three</a>
        </li>
        <li>
            <a href="images/4.jpg" onclick="showpic(this);return false;" title="picture four">picture four</a>
        </li>
    </ul>
    <img src="images/5.jpg" id="placeholder" alt="sf"/>
    <p id="description" >choose a picture</p> 
    <script type="text/javascript">
        function showpic(whichpic)
        {
            //alert("Hello world");
            var source = whichpic.getAttribute("href");
            var holder = document.getElementById("placeholder");
            holder.setAttribute("src",source);
            var text = whichpic.getAttribute("title");
            var desc = document.getElementById("description");
            desc.firstChild.nodeValue = text;



        }
    </script>

</body>
</html>

点击链接时，图片不会打开一个新的网页。图片下面的文字点击图片时会变为图片的title中的属性。
一般情况下，JS引用方式为：

第①种
<script language="Javascript"></script>
第②种
<script type="text/javascript"></script>

那么，这两种引用的区别在哪里呢？
在HTML网页里插入Javascript语句，应使用HTML的；其内部的代码为Javascript语句。
比如：

<script type="text/javascript">
document.write("Welcome to www.yiqixue.net!");
</script>

但是在参考别人的Javascript代码时，却看到里写的不是 type="text/javascript"，而是language="Javascript"。
里的代码是Javascript。然而，language这个属性在W3C的HTML标准中，已不再推荐使用。
虽然这两种引用都没有错，但是，今后我们在制作Web网页的时候，应该使用第②种方法，尽可能的少使用或舍弃第①种方法。
再最初鞋代码的时候，写成了