HTML,CSS和Javascript综合练习-1

显示效果

HTML,CSS和Javascript综合练习-1_第1张图片

HTML,CSS和Javascript综合练习-1_第2张图片


HTML代码页

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Javascript图片链接库</title>
	<link rel="stylesheet" href="layout.css" media="screen" />
</head>
<body>
	<h1>Snapshots</h1>
	<ul>
		<li>
			<a href="images/01.jpg"  onclick="showPic(this); return false;" title="A fireworks display">Fireworks</a>
		</li>
		<li>
			<a href="images/02.jpg" onclick="showPic(this); return false;" title="A cup of black coffee">Coffee</a>
		</li>
		<li>
			<a href="images/03.jpg" onclick="showPic(this); return false;" title="A red,red rose">Rose</a>
		</li>
		<li>
			<a href="images/04.jpg" onclick="showPic(this); return false;" title="The famous clock">Big Ben</a>
		</li>
		<p></p>
		<img id="placeholder" src="images/05.jpg" alt="my image gallery" />
		<p id="description">Choose an image.</p>
		<script type="text/javascript" src="scripts/showPic.js">
			
		</script>

	</ul>
</body>
</html>

CSS代码页

body {
	font-family: "Helvetica","Arial",serif;
	color: #333;
	background-color: #ccc;
	margin: 1em 15%;
}
a:link,a:visited{
    color: #c60;
    text-decoration: none;
    background-color: transparent;
	font-weight: bold;
}
a:hover{
    color:red;
    text-decoration:underline;
    background-color: transparent;
	font-weight: bold;
}
h1 {
	color: #333;
	background-color: transparent;
}
ul {
	padding: 0;	
}
li{
	float: left;
	padding: 1em;
	list-style: none;
}
img{
	display: block;
	clear: both;
	border: 1px solid black;
}

Javascript代码页

function showPic(whichpic){
	var source = whichpic.getAttribute("href");
	var placeholder = document.getElementById("placeholder");
	placeholder.setAttribute("src",source);
	var text = whichpic.getAttribute("title");
	var description = document.getElementById("description");
	description.firstChild.nodeValue = text;
}


你可能感兴趣的:(JavaScript,html,css)