您的位置：首页 > Web前端 > JavaScript

HTML,CSS和Javascript综合练习-1

2016-02-25 21:09 621 查看

显示效果

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

相关文章推荐

新的分享

章节导航