实现效果：点击图片链接，可以在当前网页显示图片，并且显示图片标题。

Html代码

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"

 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 <head>

 <meta http-equiv="content-type" content="text/html; charset=utf-8" />

 <title>Image Gallery</title>

 </head>

 <body>

   <h1>Snapshots</h1>

   <ul>

     <li><a href="images/fireworks.jpg" onclick="showPic(this);return false" title="A fireworks display"> Fireworks</a></li>

     <li><a href="images/coffee.jpg" onclick="showPic(this);return false" title="A cup of black coffee">Coffee</a></li>

     <li><a href="images/rose.jpg" onclick="showPic(this);return false" title="A red, red rose">Rose</a></li>

     <li><a href="images/bigben.jpg" onclick="showPic(this);return false" title="The famous clock"> Big Ben</a></li>

   </ul>

   <img id="placeholder" src="data:images/placeholder.gif"alt="my image gallery" />

   <p id="description">Choose an image.</p>

 </body>

 </html>

思路：

1、为每张图片分别创建一个网页，如果都放在一个网页里，数据量大，下载速度会变慢。

2、当点击某个连接时，可以留在这个网页而非转到另一个窗口。并且可以看到原有的图片清单。

3、为了实现第二条效果，需要增加一个“占位符”图片。“占位符”在这个主页上为图片预留一个浏览区域。在点击某个链接时，要拦截其默认行为。在点击某个链接时，把“占位符”图片替换为与那个连接相对应的图片。

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;

 }

1、  此方法的两个参数：（1）打算对之进行设置的属性（src）。（2）这个属性的新属性值（保存在source中）。

2、  Whichpic代表了一个元素节点。即某个图片的<a>元素。

3、  为什么不用placeholder.src=source（老方法）.setAttribute（）方法是“第一级DOM”的组成部分之一，这个方法可以对任意元素节点的任意属性进行设置，并且可移植性好，老方法只适用于web文档，DOM适用于任何一种标记语言。（DOM是一种适用于多种环境和多种程序设计语言的通用型API）.

4、  对js函数进行功能扩展，使得在点击相应的图片链接时，图片对应的文本也可以改变。同样，设置含有两个参数的函数（1）打算对之进行设置的属性（p的文本节点的内容）。（2）这个属性的新属性值（保存在text中）。用到的属性：childNodes;nodeType;nodeValue;firstChild;lastChild。

　　

《DOM Scripting》学习笔记-——第四章 案列分析 JS美术馆（点击链接到图片）的更多相关文章

  1. [Python学习笔记][第四章Python字符串]

    2016/1/28学习内容 第四章 Python字符串与正则表达式之字符串 编码规则 UTF-8 以1个字节表示英语字符(兼容ASCII),以3个字节表示中文及其他语言,UTF-8对全世界所有国家需要 ...

  2. o'Reill的SVG精髓（第二版）学习笔记——第四章

    第四章:基本形状 4.1线段 SVG可以使用<line>元素画出一条直线段.使用时只需要指定线段起止点的x和y坐标即可.指定坐标时可以不带单位,此时会使用用户坐标,也可以带上单位,如em. ...

  3. 《metasploit渗透测试魔鬼训练营》学习笔记第四章—web应用渗透

    继续来学习metasploit...记好笔记是很重要的,下面开始正文: 二.WEB应用渗透技术     1.WEB应用渗透基础知识        先介绍WEB应用攻击的主要类型(大致介绍,具体请自行查 ...

  4. Java 学习笔记 ------第四章 认识对象

    本章学习目标: 区分基本类型与类类型 了解对象与参考的关系 从打包器认识对象 以对象观点看待数组 认识字符串的特性 一."=" 和 "==" 当=用于基本类型时 ...

  5. The Road to learn React书籍学习笔记(第四章)

    高级React组件 本章将重点介绍高级 React 组件的实现.我们将了解什么是高阶组件以及如何实现它们.此外,我们还将深入探讨 React 中更高级的主题,并用它实现复杂的交互功能. 引用 DOM ...

  6. c语言学习笔记第四章——字符串和格式化输入、输出

    B站有视频演示 本章学习printf函数的输入输出,字符串的定义与实用. 字符串 字符串(character string)是一个或多个字符的序列,如下所示: "Zing went the ...

  7. javascript dom 编程艺术笔记 第四章：图片库

    首先先建立一个html文件,建立一个图片库 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  8. [core java学习笔记][第四章对象与类]

    4.3 用户自定义类 4.3.1 类数组的声明 需要两次new Employee[]=staff=new Employedd[3]; staff[0]=new Employedd(参数列表); sta ...

  9. 【数据分析 R语言实战】学习笔记 第四章 数据的图形描述

    4.1 R绘图概述 以下两个函数,可以分别展示二维,三维图形的示例: >demo(graphics) >demo(persp) R提供了多种绘图相关的命令,可分成三类: 高级绘图命令:在图 ...

随机推荐

  1. 2019年3月更新 技术分享 WPF基本界面制作

    1.制作流程1.在vs中建立一个wpf程序2.建立一个主页面(.cs)(注:C#程序每一个页面都由两个文件构成一个xaml一个cs,一个前端文件一个后台文件)3.在主页面中添加按钮,按钮中嵌入图片,这 ...

  2. WebApi Owin OAuth

    Microsoft.Owin.Host.SystemWeb    Owin    Microsoft.Owin Microsoft.Owin.Diagnostics    Owin    Micros ...

  3. Linux下MySQL编码的修改

    默认登录mysql之后可以通过SHOW VARIABLES语句查看系统变量及其值. mysql> show variables like '%character%';   说明:以下是在Cent ...

  4. python基础知识13---函数对象、函数嵌套、名称空间与作用域、装饰器

    阅读目录 一 函数对象 二 函数嵌套 三 名称空间与作用域 四 闭包函数 五 装饰器 六 练习题 一 函数对象 1 函数是第一类对象,即函数可以当作数据传递 #1 可以被引用 #2 可以当作参数传递 ...

  5. JavaBean找到项目下的文件这里是\WEB-INF\classes\下面的属性文件

    String baseinfo="/com/Bean/DBhelp.properties"; filename=getClass().getClassLoader().getRes ...

  6. Oracle 外键级联更新

    Oracle数据库中,外键约束只允许级联删除,不允许级联更新,因此,如果想要实现主表数据更新后,子表外键自动更新,只能取消外键关系,通过前端程序来维护实现完整引用,一个代替的解决方案是使用延迟约束和触 ...

  7. subprocess模块 sys模块

    常用模块学习—subprocess模块详解 要通过Python去执行一条系统命令或脚本,系统的shell命令是独立于你的python进程之外的,每执行一条命令,就是发起一个新进程,通过python调用 ...

  8. VirtualBox内Linux系统怎样与Windows共享文件夹

    Windows本机用虚拟机安装Linux系统(前提其他已配置好) 1. 双击无法安装,需要在扩展里添加:管理->全局设定->扩展 ->添加 或者 打开虚拟机进入Ubuntu系统,首先 ...

  9. python之路——17

    王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 复习 1.迭代器2.生成器3.内置函数 1.学习55个 2.带key的,max min filter map ...

  10. js判断是否安装某个android app，没有安装下载该应用(websocket通信，监听窗口失去焦点事件)

    现在经常有写场景需要提示用户下载app, 但是如果用户已经安装,我们希望是直接打开app. 实际上,js是没有判断app是否已经安装的方法的,我们只能曲线救国. 首先,我们需要有call起app的sc ...