<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" href="layout.css" media="screen"/>
</head>

<body onload="countBodyChildren()">
<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"/>
<p id="description">Choose an image</p>
<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);
    var text=whichpic.getAttribute("title");
    var description=document.getElementById("description");
    description.firstChild.nodeValue=text;
}

layout.css

@charset "utf-8";
/* CSS Document */

body{
    font-family:Arial, Helvetica, sans-serif;
    color:#333;
    font-family:"新宋体";
    background-color:#ccc;
}
h1{
    color:#333;
    background-color:transparent;
}
a{
    color:#c60;
    background-color:transparent;
    font-weight:bold;
    text-decoration:none;
}
ul{
    padding:0;
}
li{
    float:left;
    padding:1em;
    list-style:none;
}
img{
    display:block;
    clear:both;
}

javascript图片库威力增强版的更多相关文章

  1. JavaScript星级评分，仿百度，增强版

    JavaScript星级评分,仿百度,增强版 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

  2. js原生设计模式——4安全的工厂方法模式之oop编程增强版

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. jQuery 1.4版本的15个新功能（现在已经发布到jquery1.8,特别是增强版的live事件，支持 submit ， change ， focus 和 blur 事件）

    1.jQuery()创建DOM元素:支持传参设置属性 之前,jQuery可以通过 attr 方法设置元素的属性,既可传属性的名和值,也可以是包含几组特定 属性名值对 的 对象.在 jQuery 1.4 ...

  4. 将表里的数据批量生成INSERT语句的存储过程 增强版

    将表里的数据批量生成INSERT语句的存储过程 增强版 有时候,我们需要将某个表里的数据全部或者根据查询条件导出来,迁移到另一个相同结构的库中 目前SQL Server里面是没有相关的工具根据查询条件 ...

  5. 最新GHOST XP系统下载旗舰增强版 V2016年

    系统来自:系统妈:http://www.xitongma.com 深度技术GHOST xp系统旗舰增强版 V2016年3月 系统概述 深度技术ghost xp系统旗舰增强版集合微软JAVA虚拟机IE插 ...

  6. 最新深度技术GHOST XP系统旗舰增强版 V2016年

    来自系统妈:http://www.xitongma.com 深度技术GHOST xp系统旗舰增强版 V2016年 系统概述 深度技术ghost xp系统旗舰增强版集合微软JAVA虚拟机IE插件,增强浏 ...

  7. WinNTSetup v3.8.7 正式版绿色增强版

    最强系统安装利器:WinNTSetup 现已更新至 v3.8.7 正式版!这次更新修复调整了诸多问题,新版非常好用接近完美!WinNTSetup 现在已经自带BCDBoot 选项,并且完全支持Wind ...

  8. 将表里的数据批量生成INSERT语句的存储过程 继续增强版

    文章继续 桦仔兄的文章 将表里的数据批量生成INSERT语句的存储过程 增强版 继续增强... 本来打算将该内容回复于桦仔兄的文章的下面的,但是不知为何博客园就是不让提交!.... 所以在这里贴出来吧 ...

  9. CentOS6.5安装Tab增强版:bash-completion

    CentOS6.5安装Tab增强版:bash-completion,可补全命令参数: 因为CentOS官方源并不带有bash-completion的包,所以,为了可用yum安装,增加epel的源, 首 ...

随机推荐

  1. sqlserver 插入语句

    //--创建事务 Create PROC [dbo].[proc_XXXXX] ) AS BEGIN BEGIN TRAN BEGIN TRY .....................插入 COMM ...

  2. Cogs 604.方程（排列组合+高精度）

    方程 ★☆ 输入文件:equationz.in 输出文件:equationz.out 简单对比 时间限制:1 s 内存限制:128 MB [题目描述] hyc 碰到了一个难题,请你来帮忙解决. 对于不 ...

  3. [笔记]C++拷贝构造和移动构造

    一.拷贝构造 如果一个构造函数的第一个参数是自身类类型的引用,且任何额外参数都没有默认值,则此构造函数是拷贝构造函数.(<C++Primer,第五版>) class Foo { publi ...

  4. AD域渗透总结

    域渗透总结 学习并做了一段时间域网络渗透,给我直观的感受就是思路问题和耐心,这个不像技术研究,需要对一个点进行研究,而是遇到问题后要从多个方面思考,寻找"捷径"思路,只要思路正确, ...

  5. linux环境中关闭tomcat，通过shutdown.sh无法彻底关闭--线程池

    最近测试环境上测试的项目通过shutdown.sh始终无法彻底关闭. 之前临时解决方法两种: 第一:通过ps -ef|grep tomcat查看到tomcat的进程直接使用kill来杀死进程. 第二: ...

  6. 提交本地文件至gitlab已有的项目中（更新gitlab）

    gitlab代码更新 gitlab官网 1.安装git git官网 官网下载安装,安装过程一直next即可(路径自己选) 2.clone至本机 格式:git clone url(可转到指定目录克隆) ...

  7. 【深入nodejs开发】一、将node项目结合nginx部署到Centos7服务器

    一.安装nginx服务器环境 1.使用ssh工具连接服务器 2.安装宝塔面板,方便服务器管理 yum install -y wget && wget -O install.sh htt ...

  8. Java端使用Batik将SVG转为PNG

    在上篇中,我们需要将Highcharts生成的图通过后台保存到pdf文件中,就需要对SVG进行转换. 这里就介绍一下使用Batik处理SVG代码的方法. 首先是jar包的获取地址,https://xm ...

  9. Windows10系统python环境下安装Dlib库(转载,蔡军帅亲测可用)

    Dlib是一个很优秀的机器学习库,最近做人脸识别要用到这个库,简要记录一下配置过程,准备工作: 1.python环境 2.安装好pip(这里有个简单的安装教程) 3.Dlib包,贴一个我安装的版本,链 ...

  10. python解析模块(ConfigParser)使用方法

    python解析模块(ConfigParser)使用方法 很多软件都有配置文件,今天介绍一下python ConfigParser模块解析配置文件的使用方法 测试配置文件test.conf内容如下: ...