javascript图片库

最新推荐文章于 2024-09-11 15:33:18 发布

dejz8829

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量72

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/daochong/p/4827661.html

版权

将图片发布到网上的办法很多，可以简单地把所有图片都放在一个网页中，但是会导致这个网页过于庞大。为每张图片分别创建一个网页的解决办法值得考虑，但是制作过程需要花费非常多的时间和精力。

如果想要两全其美，那我有一种方法，利用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" οnclick="showPic(this);return false;" title="the mountain of blue">山峦</a></li>
<li><a href="Sunset.jpg" οnclick="showPic(this);return false;" title="red enjoy it">日出</a></li>
<li><a href="Water lilies.jpg" οnclick="showPic(this);return false;" title="a summer flower">荷花</a></li>
<li><a href="Winter.jpg" οnclick="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);
}

转载于:https://www.cnblogs.com/daochong/p/4827661.html