<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. 题解 noip2019模拟赛Day1T3

    题面 运河计划 问题描述 水运在人类的交通运输史中一直扮演着重要的角色.借助河流.的便利,人们得以把大量的货物输送到天南海北不仅仅是自然界现成的河流,人工开凿的运河(如苏伊士运河.巴拿马运河.我国的京 ...

  2. CodeForces 839B - Game of the Rows | Codeforces Round #428 (Div. 2)

    血崩- - /* CodeForces 839B - Game of the Rows [ 贪心,分类讨论] | Codeforces Round #428 (Div. 2) 注意 2 7 2 2 2 ...

  3. vue上传大文件的解决方案

    众所皆知,web上传大文件,一直是一个痛.上传文件大小限制,页面响应时间超时.这些都是web开发所必须直面的. 本文给出的解决方案是:前端实现数据流分片长传,后面接收完毕后合并文件的思路. 实现文件夹 ...

  4. Win7下使用Visual Studio为WinXP编译可执行文件

    造冰箱的大熊猫@cnblogs 2019/8/5 2019/9/5补充:参见这里 1.问题 开发机是64位Win7,想开发能够运行在WinXP下的C程序,怎么办? 2.解决方法 一个简单粗暴的解决办法 ...

  5. [Luogu] 宝藏

    https://www.luogu.org/problemnew/show/P3959 模拟退火解法 发现prim求最小生成树是明显错误的 因为prim每次要取出边权最小的点 然而在这道T中这样做不一 ...

  6. jQuery的$符号

    jQuery使用$的原因是: 书写简洁, 相对于其他字符与众不同, 容易被记住. JQuery占用了两个变量: $ 和 jQuery. 当在代码中打印 $ 和 jQuery时: <script ...

  7. 在eclipse中查找一个类中的方法在其他哪个类中被调用了

    选中你所要查看的方法名,ctrl+shift+G就可以查看所有调用过该方法的地方了.在Search视图里面可以查看得到这个样子是可以的,你也可以按Ctrl+H全文检索一下

  8. Leetcode题目62.不同路径（动态规划-中等）

    题目描述: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). ...

  9. 前端知识点回顾——Javascript篇(五)

    DOM 常用的DOM获取方法: node.children 返回子元素节点,没有兼容性问题,动态获取 node.parentNode 获取父节点,没有兼容性问题 node.offsetParent 获 ...

  10. Go项目的测试代码2（项目运用）

    上一篇文章介绍了最基本的测试代码的写法.Go项目的测试代码(基础) 这里简单的共享一下我在项目中使用的方式. 项目结构 我们实际项目中, 结构简单地分了控制层controllers和模块层models ...