html代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Gallery</title>
<script type="text/javascript" src="js/showPic.js" ></script>
</head>
<body>
<h1>Snapshots</h1>
<ul>
<li><a href="images/ad.jpg" οnclick="showPic(this);return false;" title="A fireworks display" >Fireworks</a></li>
<li><a href="images/ad2.jpg" title="A cup of black coffee" οnclick="showPic(this);return false;">coffee</a></li>
<li><a href="images/ad3.jpg" οnclick="showPic(this);return false;" title="A red, red rose">Rose</a></li>
<li><a href="images/ad4.jpg" title="the famous clock" οnclick="showPic(this);return false;">Big Ben</a></li>
<img id="placeholder" src="images/placeholder.jpg" alt="my img gallery"/>
</ul>
</body>
</html>JS代碼
function showPic(whichpic)
{
var source = whichpic.getAttribute("href");
var placeholder=document.getElementById("placeholder");
placeholder.setAttribute("src", source);
}
顯示結果如下：