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

如果想要两全其美，那我有一种方法，利用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. Linux下修改PATH路径

    1.#PATH=$PATH:/opt/lamp/mysql/bin       使用这种方法,只对当前会话有效,也就是说每当登出或注销系统以后,PATH 设置就会失效 2.#vi /etc/profi ...

  2. OpenProcess打开进程返回错误的问题

    问题描述 项目中需要做一个小功能:能够查看系统中当前正在运行的进程的内存信息,如内存块类型.分配状态.访问权限等.如下图所示: 需要的信息和上图相差无几.说起来也不算太难,毕竟现成的API已经提供了. ...

  3. Brute Force & STL --- UVA 146 ID Codes

     ID Codes  Problem's Link:http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&a ...

  4. 可拖拽的ListBox

    之前在写播放器的时候,遇到了一个问题,现在播放器无论是千千,KuGoo还是比较原始的MediaPlayer,它们的播放表都是可以拖拽的,直接把文件拖到播放表实现歌曲的添加那个先暂且不说,光是播放表里面 ...

  5. ASP.Net中Session失效的一种编程思路

    在写一个客户的B/S结构应用程序时,突然发现一个技巧,不知道是否是MS的一个BUG,给相关的有研究的朋友原先考虑写一个检查Session的类,Session失效后,必须转向登陆页面,可每一个调用该类的 ...

  6. csharp: Export DataSet into Excel and import all the Excel sheets to DataSet

    /// <summary> /// Export DataSet into Excel /// </summary> /// <param name="send ...

  7. 行转列一定要sum

    --SELECT 姓名 ,-- 课程 ,-- 分数--FROM tb UNPIVOT ( 分数 FOR 课程 IN ( [语文], [数学], [物理] ) ) t --)

  8. PHP simplexml_load_string 过滤<![CDATA[XXXX]]>

    首先说说过滤<![CDATA[XXXX]]>干嘛用的. 这东西主要是防止XML里面嵌套HTML标签导致XML样式错乱的. 过滤很简单: $response = str_replace( a ...

  9. 编写运行R脚本

    1.在后台运行R 1.1 创建file.R文件 1.2 在文件首行键入: #! /path/to/Rscript 1.3 在下面的行中,键入R代码 1.4 保存(记得有png(),jpeg(),... ...

  10. Android笔记——Android中数据的存储方式（三）

    Android系统集成了一个轻量级的数据库:SQLite,所以Android对数据库的支持很好,每个应用都可以方便的使用它.SQLite作为一个嵌入式的数据库引擎,专门适用于资源有限的设备上适量数据存 ...