简单的图片显示

最新推荐文章于 2018-11-12 17:47:36 发布

我上小小学

最新推荐文章于 2018-11-12 17:47:36 发布

阅读量161

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/cgdogn/article/details/79932569

版权

javascript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOTA2</title>
<script type="text/javascript" src="js/showPic.js"></script>
<link rel="stylesheet" href="css/showPic.css" type="text/css"/>
<body>
<h1>英雄介绍</h1>
<p title="a gentle">请选择喜欢的英雄</p>
<ul id="ul_btn">
<li><a href="images/kr.jpg" title="this is a invoker" οnclick="showPic(this);return false;"> 卡尔</a></li>
<li><a href="images/sf.jpg" title="this is a nevermore" οnclick="showPic(this);return false;">影魔</a></li>
<li><a href="images/js.jpg" title="this is a jsh" οnclick="showPic(this);return false;">剑圣</a></li>
<li><a href="images/fw.jpg" title="this is a fw" οnclick="showPic(this);return false;">斧王</a></li>
<li><a href="images/tf.jpg" title="this is a invoker" οnclick="showPic(this);return false;">屠夫</a></li>
</ul>
<img id="my_pic" width="640px" height="530px" src="images/my_pic.gif" >
<p id="description">Choose an image.</p>

</body>

</html>

showPic.js文件

function showPic(whichPic){
var source = whichPic.getAttribute("href");
var my_pic = document.getElementById("my_pic");
my_pic.setAttribute("src",source);
var text = whichPic.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue=text;
}
function countBodyChildren(){
var body_element = document.getElementsByTagName("body")[0];
}

window.onload = countBodyChildren;

css文件

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

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

}
a{
color:#c60;
background-color:transparent;
font-weight:bold;
text-decoration:none;
}
ul{
padding:0px;
}
li{
float:left;
padding:1em;
list-style:none;
}
img{
display:block;
clear:both;