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

如果想要两全其美，那我有一种方法，利用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图片库的更多相关文章

  1. 平稳退化，JS和HTML标记分离，极致性能的JavaScript图片库

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  2. JavaScript DOM编程艺术第四章 — JavaScript图片库案例研究

    这一章通过JavaScript图片库案例,学习了一些DOM属性. HTML代码 <!DOCTYPE html> <html> <head> <meta cha ...

  3. JavaScript图片库(简单的应用案例)

    这个图片库小例子的效果如图所示,点击网页上某个图片链接时你将看到两种效果:占位符图片呗替换成这个链接所指向的图片,同时描述性文字也被替换为这个链接的title属性值.     利用一个简单的图片库应用 ...

  4. javascript+dom 做javascript图片库

    废话不多说 直接贴代码 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  5. javascript图片库威力增强版

    <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Con ...

  6. 读书笔记：JavaScript DOM 编程艺术（第二版）

    读完还是能学到很多的基础知识,这里记录下,方便回顾与及时查阅. 内容也有自己的一些补充. JavaScript DOM 编程艺术(第二版) 1.JavaScript简史 JavaScript由Nets ...

  7. 《JavaScript Dom编程艺术》（第二版）

    第一章<JavaScript简史> 1.JavaScript是一种脚本语言,通常只能通过Web浏览器去完成一些操作而不能像普通意义上的程序那样独立运行,它需要由Web浏览器进行解释和执行. ...

  8. JavaScript DOM编程艺术读书笔记(一)

    第一章,第二章 DOM:是一套对文档的内容进行抽象和概念化的方法. W3C中的定义:一个与系统平台和编程语言无关的接口,程序和脚本可以通过这个接口动态的访问和修改文档的内容,结构和样式. DHTML( ...

  9. JavaScript DOM 编程艺术（第2版）读书笔记（4）

    案例研究:JavaScript 图片库 改变图片的src属性的两种方式: 1,setAttribute方法是“第1级DOM”的组成部分,它可以设置元素节点的任意属性. 2,element.src = ...

随机推荐

  1. Python+Selenium进行UI自动化测试项目中，常用的小技巧2：读取配置文件（configparser，.ini文件）

    在自动化测试项目中,可能会碰到一些经常使用的但 很少变化的配置信息,下面就来介绍使用configparser来读取配置信息config.ini 读取的信息(config.ini)如下: [config ...

  2. [团队项目]expat不兼容BUG

    本周五软工团队项目的第一次前后端全部对接时,出了一个蛋疼的错误. 最初起因是小丽叔出于安全的考虑,使用守护进程来跑Web服务器.守护进程(Daemon)是运行在后台的一种特殊进程,如果服务器用root ...

  3. js页面跳转整理（转载未整理）

    js方式的页面跳转1.window.location.href方式    <script language="JavaScript" type="text/java ...

  4. SeaJS 模块化加载框架使用

    SeaJS 是一个遵循 CMD 规范的模块化加载框架 CommonJS,CMD,AMD等规范后文会提到,这里主要先了解如何在代码中使用. 如果你有使用过nodejs ,那么理解起来就容易多了. 我们通 ...

  5. 2015 Multi-University Training Contest 1 - 10010 Y sequence

    Y sequence Problem's Link: http://acm.hdu.edu.cn/showproblem.php?pid=5297 Mean: 有连续数列A={1,2,3,4,5,6, ...

  6. ASP.NET几种页面数据绑定的用法及区别: <%#、 <%=、 <% 、<%@

    < %#... %>: 是在绑定控件DataBind()方法执行时被执行,用于数据绑定 如: < %# Container.DataItem("tit") %&g ...

  7. 比较偏门的JVM语言Quercus - PHP on JVM

    其实,我不确定Quercus是否可以被认定为一门JVM语言:其次Quercus这个东东分开源版与商业版,开源版只能解释执行.而商业版能编译成Java字节码. 但我知道国内,阿里巴巴很早就在使用它,当然 ...

  8. 缓存技术比拼：Redis与Memcached的同与不同

    转至:http://developer.51cto.com/art/201603/507980.htm 在今天的文章中,我们将探讨Redis(REmote DIctionary Server).Red ...

  9. 七年IT生涯的经验教训

     七年IT生涯的经验教训[转]我在IT界也拼打了有好几年了,但是现在和别人比较起来不是很如意．从天分上来说,我在属于智商不低的人:从技术上说,几乎没有我拿不下的:从见解上看,我是很有点子看法的人． ...

  10. 管理系统的前端解决方案：Pagurian V1.3发布

    Pagurian 一个管理系统的前端解决方案, 致力于让前端设计,开发,测试,发布更简单. 功能简介 Pagurian 适用于Web管理级的项目 基于Sea.js遵循CMD规范,友好的模块定义,使业务 ...