Javascript圖片庫（1）

helloworlddm發表於2017-11-06
JavaScript

顯示效果如下圖
這裡寫圖片描述
程式碼如下：

<!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網頁的時候，應該使用第②種方法，儘可能的少使用或捨棄第①種方法。
再最初鞋程式碼的時候，寫成了

相關文章