码迷,mamicode.com
首页 > 编程语言 > 详细

javascript图片库

时间:2015-09-22 00:01:16      阅读:803      评论:0      收藏:0      [点我收藏+]

标签:

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

如果想要两全其美,那我有一种方法,利用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图片库

标签:

原文地址:http://www.cnblogs.com/daochong/p/4827661.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!