简单的图片库浏览页面

功能描述：

点击链接，使链接图片出现在页面下方。成为简单的图片库浏览页面。

代码实现：

//html代码



	
	  
    


  
   
Snapshots
   
	
   	

   	rose Image
   	

   	bird Image
   	
   	
shanghai Image
   	
   	
beautifulrose Image
   	
   	
    
Choose an image
   

 

CSS代码

body{ 
   font-family: "Helvetica","Arial",serif;
   color: #333;
   background-color: #ccc;
   margin: 1em 10%;
}

h1{
	color: #333;
	background-color: transparent;
}

a{
	color: #008000;
	background-color: transparent;
	font-weight: bold;
	text-decoration: none;
}

ul{
	padding: 0;
}

li{
	float: left;
	padding: 1em;
	list-style: none;
}

img{
    display: block;
    clear: both
}

JS代码

function showPic(whichPic){
	   
     	var num1=whichPic.getAttribute("href");
       	var placeholder=document.getElementById("placeholder");
       	placeholder.setAttribute("src",num1);
		
		var titleNume2=whichPic.getAttribute("title");
		var description=document.getElementById("description");
		
		/*
		  注:将titleNume2的值赋值给descriptionText
		  将titleNume2直接赋值给description.innerText
		  是不一样的
		*/
		//var descriptionText=description.innerText;
		//descriptionText=titleNume2;
		
		 // 下面这两种方式都可以实现P标签里的内容替换
		//description.innerText=titleNume2;
		
		description.firstChild.nodeValue=titleNume2;	
     }