主函數(shù)main.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Image Gallery</title>
</head>
<body>
<!-- 測(cè)試onclick函數(shù) -->
<!-- <a onclick="return false">click me</a> -->
<h1>Snapshots</h1>
<ul>
<li><a href="images/Fireworks.jpg" onclick="showPic(this); return false;">Fireworks</a> </li>
<li><a href="images/Coffee.jpg" onclick="showPic(this); return false;">Coffee</a></li>
<li><a href="images/Rose.jpg" onclick="showPic(this); return false;">Rose</a></li>
<li><a href="images/Big Ben.jpg" onclick="showPic(this); return false;">Big Ben</a></li>
</ul>
<img id="placeholder" src="images/placeholder.jpg" alt="my imge Gallery">
<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>
JS代碼showPic.js代碼
function showPic(whichpic){
var sSource = whichpic.getAttribute("href");
var oPlaceholder = document.getElementById("placeholder");
oPlaceholder.setAttribute("src", sSource)
}
說下對(duì)onclick函數(shù)的理解，這個(gè)函數(shù)的返回值默認(rèn)為 true，因此在這里加入return false；用以解決頁(yè)面跳轉(zhuǎn)
學(xué)習(xí)使用childNode方法
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Image Gallery</title>
<link rel="stylesheet" type="text/css" href="css/layout.css" media="screen">
</head>
<body>
<!-- 測(cè)試onclick函數(shù) -->
<!-- <a onclick="return false">click me</a> -->
<h1>Snapshots</h1>
<ul>
<li><a href="images/Fireworks.jpg" title="A fireworks display" onclick="showPic(this); return false;">Fireworks</a> </li>
<li><a href="images/Coffee.jpg" title="A cup of black Coffee" onclick="showPic(this); return false;">Coffee</a></li>
<li><a href="images/Rose.jpg" title="A red, red rose" onclick="showPic(this); return false;">Rose</a></li>
<li><a href="images/Big Ben.jpg" title="The famous clock" onclick="showPic(this); return false;">Big Ben</a></li>
</ul>
<img id="placeholder" src="images/placeholder.jpg" alt="my imge Gallery">
<p id="description" class="lable" title="images"> Choose an image</p>
<script type="text/javascript" src="scripts/showPic.js"></script>
</body>
</html>
JS代碼部分
function showPic(whichpic){
var sSource = whichpic.getAttribute("href");
var sText = whichpic.getAttribute("title");
var oDescription = document.getElementById("description");
var oPlaceholder = document.getElementById("placeholder");
oPlaceholder.setAttribute("src", sSource);
oDescription.firstChild.nodeValue = sText;
}
CSS代碼部分
body{
font-family: "Hevetica","Arial",sans-serif;
color: #333;
background-color: #ccc;
margin: 1em 10%;
}
h1{
color: #333;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
a{
color: #c60;
background-color: transparent;
font-weight: bold;
text-decoration: none;
}
ul{
padding: 0;
}
li{
float: left;
padding: 1em;
list-style: none;
}
p{
float: left;
}
#placeholder{
float: left;
}
使用nodeValue獲取到的是文本節(jié)點(diǎn)的文本值
