案例介绍：
将图片发布有很多方法，可以将所有图片直接统一放在网页里，但是这样加载网页就会十分缓慢。我们也可以为每一张图片设计一个像网页，就不存在加载缓慢的问题，但是这对于设计人员来说是繁琐的，这个时候我们可以考虑创建一个图片库：
把整个图片库的浏览链接集中放在图片库主页里，只在用户点击了这个主页的链接时才把相应的链接发送给他：
设计要求：
1.设置HTML和CSS样式
2.将图片展示在网页中
3.在点击链接后将网页中的图片替换，而不是网页跳转
4.点击链接伴随着图片下方文字的替换
HTML结构
在hml部分，设计十分简单，我们只要求能够将超链接，图片，文字展示即可，布局如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="photo gallery.css">
<script src="photo gallery.js"></script>
</head>
<body>
<h1>Photo Gallery</h1>
<ul>
<li><a href="images/1.png" onclick="showPic(this);return false;" title="基普乔格1">基普乔格1</a></li>
<li><a href="images/2.png" onclick="showPic(this);return false;" title="基普乔格2">基普乔格2</a></li>
<li><a href="images/3.png" onclick="showPic(this);return false;" title="基普乔格3">基普乔格3</a></li>
<li><a href="images/4.png" onclick="showPic(this);return false;" title="贝克勒1">贝克勒1</a></li>
<li><a href="images/5.png" onclick="showPic(this);return false;" title="贝克勒2">贝克勒2</a></li>
<li><a href="images/6.png" onclick="showPic(this);return false;" title="贝克勒3">贝克勒3</a></li>
</ul>
<div id="box">
<img id="placeholder" src="images/7.png" height="300" width="400" alt="my image gallery"/>
<p id="description">Choose a image</p>
</div>
</body>
</html>
这个时候的框架如下：
CSS样式
将超链接横向排列，并且间列表的标识消除：
设置li为左浮动，list-style-type为none无标识符.
li{
float: left;
padding: 1em;
list-style-type: none;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration:none;
}
以下是所有CSS样式：
body{
font-family: "Helvetica","Arial",serif;
color:#C0C0C0 ;
background-color:#483D8B;
margin: 1em 10%;
}
#box{
width: 400px;
height: 300px;
border:1px solid #8A2BE2;
margin: 8em 8px;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration:none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style-type: none;
}
img{
display: block;
clear: both;
}
p{
color:#C0C0C0 ;
}
设置CSS后的效果：
JS部分——对DOM进行操作
设置好HTML和CSS部分之后，问题任然没有解决，在点击链接后要将网页中的图片替换，而不是网页跳转，点击链接要伴随着图片下方文字的替换。那么我们一起来实现这两个部分：
（1）在点击链接后要将网页中的图片替换
如何实现？对DOM进行操作，每次点击，onclick得到一个元素节点信息this，我们对this进行处理，获取this的href属性值，然后将这个属性值添加覆盖到展示区域的img属性上。
为了方便调用，我们给这个过程设置一个函数，在函数内部进行处理，增强代码的可读性，更加简洁。
function showPic(element){
var source=element.getAttribute("href");//获取元素节点的src属性值
var placeholder=document.getElementById("placeholder");//查找placeholder元素
placeholder.setAttribute("src",source);//设置placeholder的src属性值为
}
这个时候可以顺利将属性添加到展示区域了，但是网页仍然会跳转，这个时候用到事件处理函数：
| 函数 | 描述 |
|---|---|
| onmouseover | 鼠标悬停在某个元素上时触发 |
| onmouseout | 鼠标离开某一个元素时触发 |
| onclick | 鼠标点击一个元素时触发 |
我们在onclick内部返回一个false，onclick函数就会认为没有点击过元素，这个时候就能达到点击的效果了：
<a href="images/1.png" onclick="showPic(this);return false;"
title="基普乔格1">基普乔格1</a>
（2）在点击链接后要将图片下方的文字替换
要实现文本的属性修改，和（1）中的操作基本类似，先获取到超链接的title属性值，然后利用element.innerHTML可以对标签之间的文字进行修改：
function showPic(element){
var description=document.getElementById("description");//获取元素节点description
var text=element.getAttribute("title");//获取element的title属性值
description.innerHTML=text;//对description的文本内容进行修改
}
这样一来就达到了修改文本的目的，另外引入一种修改文本的方法：
函数text部分的另外一种写法：
function showPic(element){
var text=element.getAttribute("title");
description.firstChild.nodeValue=text;
}
代码汇总：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Photo Gallery</title>
<link rel="stylesheet" type="text/css" href="photo gallery.css">
<script src="photo gallery.js"></script>
</head>
<body>
<h1>Photo Gallery</h1>
<ul>
<li><a href="images/1.png" onclick="showPic(this);return false;" title="基普乔格1">基普乔格1</a></li>
<li><a href="images/2.png" onclick="showPic(this);return false;" title="基普乔格2">基普乔格2</a></li>
<li><a href="images/3.png" onclick="showPic(this);return false;" title="基普乔格3">基普乔格3</a></li>
<li><a href="images/4.png" onclick="showPic(this);return false;" title="贝克勒1">贝克勒1</a></li>
<li><a href="images/5.png" onclick="showPic(this);return false;" title="贝克勒2">贝克勒2</a></li>
<li><a href="images/6.png" onclick="showPic(this);return false;" title="贝克勒3">贝克勒3</a></li>
</ul>
<div id="box">
<img id="placeholder" src="images/7.png" height="300" width="400" alt="my image gallery"/>
<p id="description">Choose a image</p>
</div>
</body>
</html>
CSS
body{
font-family: "Helvetica","Arial",serif;
color:#C0C0C0 ;
background-color:#483D8B;
margin: 1em 10%;
}
#box{
width: 400px;
height: 300px;
border:1px solid #8A2BE2;
margin: 8em 8px;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration:none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style-type: none;
}
img{
display: block;
clear: both;
}
p{
color:#C0C0C0 ;
}
function showPic(element){
var source=element.getAttribute("href");//获取元素节点的src属性值
var placeholder=document.getElementById("placeholder");//查找placeholder元素及诶8I节点
placeholder.setAttribute("src",source);//设置placeholder的src属性值为
var description=document.getElementById("description");//获取元素p
var text=element.getAttribute("title");
description.firstChild.nodeValue=text;
}
效果如下：
