<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta charset="gb2312" />
<style type="text/css">
body{
background-color:pink;
}
#div{
/*border:1px solid green;*/
margin:40px auto;
width:900px;
}
#ul li{
float:left;
margin-right:10px;
list-style-type:none;
}
p{
background-color:silver;
width:50%;
margin:0 auto;
top:10px;
text-align:center;
}
#divShow{
/*border:1px solid red;*/
width:640px;
height:400px;
margin:10px auto;
clear:both;
}
</style>
</head>
<body>
<div id="div">
<ul id="ul">
<li>
<a href="imgs/0.jpg">
<img src="imgs_small/0.jpg" title="圖片111"></img>
</a>
</li>
<li>
<a href="imgs/1.jpg">
<img src="imgs_small/1.jpg" title="圖片222"></img>
</a>
</li>
<li>
<a href="imgs/2.jpg">
<img src="imgs_small/2.jpg" title="圖片333"></img>
</a>
</li>
<li>
<a href="imgs/6.jpg">
<img src="imgs_small/6.jpg" title="圖片444"></img>
</a>
</li>
<li>
<a href="imgs/4.jpg">
<img src="imgs_small/4.jpg" title="圖片555"></img>
</a>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript">
//創建一個div節點
var divShow = document.createElement("div");
//設置div的id屬性
divShow.setAttribute("id","divShow");
//創建一個img節點
var img = document.createElement("img");
//設置img的id屬性
img.setAttribute("id","img");
//設置img的src屬性
img.setAttribute("src","imgs/face.jpg");
//將img節點添加到div下
divShow.appendChild(img);
//創建文本說明標簽p
var p = document.createElement("p");
p.setAttribute("id","p");
p.appendChild(document.createTextNode("說明"));
//得到HTML中的body節點
var body = document.getElementsByTagName("body")[0];
//將div添加到body節點下
body.appendChild(divShow);
body.appendChild(p);//把p添加到body下
//為元素添加單擊事件
//節點對象.事件名 = new function(){};
//得到所有的<a>標簽
var alist = document.getElementById("div").getElementsByTagName("a");
for(var i = 0;i < alist.length; i++){
//當鼠標點擊時切換圖片
alist[i].onclick = function(){
//this就表示當前被點擊的節點
//點誰獲得誰的href和title的值
var href = this.getAttribute("href");
var img = this.getElementsByTagName("img")[0];
var title = img.getAttribute("title");
//修改img標簽的src屬性
var img = document.getElementById("img");
img.setAttribute("src",href);
//修改p標簽的文本
var p = document.getElementById("p");
p.firstChild.nodeValue=title;
//取消<a>標簽的跳轉
return false;
}
//當鼠標稱上去的時候切換圖片
alist[i].onmousemove = function(){
//this就表示當前被點擊的節點
//點誰獲得誰的href和title的值
var href = this.getAttribute("href");
var img = this.getElementsByTagName("img")[0];
var title = img.getAttribute("title");
//修改img標簽的src屬性
var img = document.getElementById("img");
img.setAttribute("src",href);
//修改p標簽的文本
var p = document.getElementById("p");
p.firstChild.nodeValue=title;
//取消<a>標簽的跳轉
return false;
}
}
</script>
