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

如果想要两全其美，那我有一种方法，利用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. ACM中的浮点数精度处理

    在ACM中,精度问题非常常见.其中计算几何头疼的地方一般在于代码量大和精度问题,代码量问题只要平时注意积累模板一般就不成问题了.精度问题则不好说,有时候一个精度问题就可能成为一道题的瓶颈,让你debu ...

  2. Android --- 斗地主 [牌桌实现源码]

    1.主Activity <span style="font-size:18px;color:#3333ff;">package com.bison; import an ...

  3. Winform开发框架主界面设计展示

    做了好多年Winform的程序的开发,主窗口的界面设计一般都要求做的更好一些,可以根据不同的系统功能模块进行归类整合,能使客户迅速寻找到相关功能的同时,也能感觉到整体性的美观大方,因此主窗口的界面设计 ...

  4. petapoco-SQLServer模型增加注释

    petapoco是个基于T4模板的轻量级ORM,好用效率高,具体介绍略了 获取注释基本原理是调用数据库::fn_listextendedproperty函数,获取扩展属性MS_Description ...

  5. Windows Azure开发者任务之五：配置虚拟机的“规模”

    指定虚拟机的“规模”是怎么一回事? 我们可以指定角色将要部署于其上的虚拟机的“规模”.虚拟机的“规模”是指: 1,CPU核心数 2,内存容量 3,本地文件系统的体积 我们可以针对具体的角色来指定虚拟机 ...

  6. 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数据转换

    [源码下载] 重新想象 Windows 8 Store Apps (52) - 绑定: 与 Element Model Indexer Style RelativeSource 绑定, 以及绑定中的数 ...

  7. PHP使用SnowFlake算法生成唯一ID

    前言:最近需要做一套CMS系统,由于功能比较单一,而且要求灵活,所以放弃了WP这样的成熟系统,自己做一套相对简单一点的.文章的详情页URL想要做成url伪静态的格式即xxx.html 其中xxx考虑过 ...

  8. 不变(Invariant), 协变(Covarinat), 逆变(Contravariant) : 一个程序猿进化的故事

    阿袁工作的第1天: 不变(Invariant), 协变(Covarinat), 逆变(Contravariant)的初次约 阿袁,早!开始工作吧. 阿袁在笔记上写下今天工作清单: 实现一个scala类 ...

  9. web技术人员-推荐书籍

    学习是技术人员成长的基础,本次分享20本技术方面的书籍,这些书不是每一本都是经典,但是每一本都有其特点.以下20本大部分本人都看过,因此推荐给大家.(本次推荐的20本只是一个参考,比如像Head Fi ...

  10. ADO.NET 实体类和数据访问类

    SQL数据库字符串注入攻击:需要使用cmd.Parameters这个集合占位符: @key 代表这个位置用这个占位符占住了 Parameters这个集合中将此占位符所代表的数据补全 cmd.Param ...