运行效果:
随便点一个图片
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="js/new_file.js"></script>
<title></title>
</head>
<body>
<h1>图片库</h1>
<ul>
<li>
<a href="img/parter3-01.png" title="手机越来越多样化" onclick="showpic(this); return false;">图片1</a>
</li>
<li>
<a href="img/parter3-02.png" title="篮球的热潮" onclick=" showpic(this);return false;">图片2</a>
</li>
<li>
<a href="img/parter3-03.png" title="最新鼠标" onclick="showpic(this);return false; ">图片3</a>
</li>
<li>
<a href="img/parter3-04.png" title="手机摄像头哦像素提高" onclick="showpic(this);return false; ">图片4</a>
</li>
<li>
<a href="img/parter3-05.png" title="儿时的玩具" onclick="showpic(this);return false; ">图片5</a>
</li>
<li>
<a href="img/parter3-06.png" title="度假好地方" onclick="showpic(this);return false; ">图片6</a>
</li>
</ul>
<img src="img/parter3-06.png" id="placeholder" />
<p id="description">选择图片的说明文字</p>
</body>
</html>
JS:
比原来增加三行 代码
function showpic(whichpic) {
var source = whichpic.getAttribute("href");
// 获取 传入参数 所在元素中 href 中的属性值
var placeholder = document.getElementById("placeholder");
// 获得占位符 图片的 找到img标签
placeholder.setAttribute("src", source);
// 对于img 标签的src 的值换成 source中的值
var Text = whichpic.getAttribute("title");
// 获取 传入参数 所在元素中 title 中的属性值
var description = document.getElementById("description");
// 找到 p 标签
description.firstChild.nodeValue = Text;
//设置P 标签的属性值
}
