HTML,CSS和Javascript综合练习-1

最新推荐文章于 2023-05-08 15:34:48 发布

端木奇影

最新推荐文章于 2023-05-08 15:34:48 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/qq_33756795/article/details/50740496

版权

Javascript 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

显示效果

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"  οnclick="showPic(this); return false;" title="A fireworks display">Fireworks</a>
		</li>
		<li>
			<a href="images/02.jpg" οnclick="showPic(this); return false;" title="A cup of black coffee">Coffee</a>
		</li>
		<li>
			<a href="images/03.jpg" οnclick="showPic(this); return false;" title="A red,red rose">Rose</a>
		</li>
		<li>
			<a href="images/04.jpg" οnclick="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;
}