<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" onclick="showPic(this);return false;"> 卡尔</a></li>
<li><a href="images/sf.jpg" title="this is a nevermore" onclick="showPic(this);return false;">影魔</a></li>
<li><a href="images/js.jpg" title="this is a jsh" onclick="showPic(this);return false;">剑圣</a></li>
<li><a href="images/fw.jpg" title="this is a fw" onclick="showPic(this);return false;">斧王</a></li>
<li><a href="images/tf.jpg" title="this is a invoker" onclick="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;
}
显示效果，点击可以切换图片并且将该图片的title文字替换到下面。
