小學生做程序的夢 之 1.JavaScript圖片庫
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript圖片庫 2017 09 12</title>
<script>
//建立一個函數替換占位圖片
//whichPic代表指向某個圖片的<a>元素
function showPic(whichPic){
//分解圖片的路徑，通過whichPic調用getAttribute得到，把href作為參數傳給getAttribute（）
//獲得鏈接圖片
var source=whichPic.getAttribute("href");
//獲取占位符圖片
var placeholder=document.getElementById("placeholder");
//改變
placeholder.setAttribute("src",source);
//下行代碼不用DOM有同樣的效果
//placeholder.src=source;
}
</script>
</head>
<body>
<h1>Show photos</h1>
<ul>
<!--
onclic=""
showPic(this);把鏈接自身做參數
return false;這個語句給定這個鏈接的默認行為沒觸發，即跳轉到新的圖片頁面這個事件沒觸發而是執行showPic函數的內容
-->
<li>
<a href="img/1.jpg" title="a bike" onclick="showPic(this);return false;">bike</a>
</li>
<li>
<a href="img/2.jpg" title="a cat" onclick="showPic(this);return false;">cat</a>
</li>
<li>
<a href="img/4.jpg" title="a twin" onclick="showPic(this); return false;">twin</a>
</li>
<li>
<a href="img/6.jpg" title="a beer" onclick="showPic(this); return false;">beer</a>
</li>
</ul>
<img id="placeholder" src="img/7.jpg" alt="zhanweiphoto">
</body>
</html>
小學生做程序的夢 之 1.JavaScript圖片庫