主函数main.html
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>Image Gallery</title>
</head>
<body>
<!-- 测试onclick函数 -->
<!-- <a href="http://www.baidu.com" 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)
}
说下对onclick函数的理解，这个函数的返回值默认为 true，因此在这里加入return false；用以解决页面跳转
学习使用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>
<!-- 测试onclick函数 -->
<!-- <a href="http://www.baidu.com" 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获取到的是文本节点的文本值
网友评论