運行效果:
隨便點一個圖片
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="手機(jī)越來越多樣化" 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="最新鼠標(biāo)" onclick="showpic(this);return false; ">圖片3</a>
</li>
<li>
<a href="img/parter3-04.png" title="手機(jī)攝像頭哦像素提高" 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");
// 獲取 傳入?yún)?shù) 所在元素中? href 中的屬性值
var placeholder = document.getElementById("placeholder");
// 獲得占位符 圖片的? 找到img標(biāo)簽
placeholder.setAttribute("src", source);
// 對于img 標(biāo)簽的src 的值換成 source中的值
var Text = whichpic.getAttribute("title");
// 獲取 傳入?yún)?shù) 所在元素中? title 中的屬性值
var description = document.getElementById("description");
// 找到 p 標(biāo)簽
? ? description.firstChild.nodeValue = Text;
? ? //設(shè)置P 標(biāo)簽的屬性值
}
