首頁 > 開發者 > JavaScript
標籤：
將圖片發布到網上的辦法很多，可以簡單地把所有圖片都放在一個網頁中，但是會導致這個網頁過於龐大。為每張圖片分別建立一個網頁的解決辦法值得考慮，但是製作過程需要花費非常多的時間和精力。
如果想要兩全其美，那我有一種方法，利用JavaScript製作一個圖片庫，把整個圖片庫的瀏覽連結到圖片庫首頁，使用者點擊某個連結時，那張圖片才會且在本頁面顯示。
html檔案的編寫
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="Blue hills.jpg" onclick="showPic(this);return false;" title="the mountain of blue">山巒</a></li>
<li><a href="Sunset.jpg" onclick="showPic(this);return false;" title="red enjoy it">日出</a></li>
<li><a href="Water lilies.jpg" onclick="showPic(this);return false;" title="a summer flower">荷花</a></li>
<li><a href="Winter.jpg" onclick="showPic(this);return false;" title="a white world">雪林</a></li>
</ul>
<img id="placeholder" src="gallery.JPG" alt="my image gallery"/>
<script type="text/javascript" src="showPic.js"></script>
</body>
</html>
showPic.js
function showPic(whichpic){
var source=whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
javascript圖片庫
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
