弹出大图表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>a</title>
<style type="text/css">
ul#hovershow{
list-style-type: none;
margin: 50px;
float: left;
display: inline;
clear: both;
}
ul#hovershow li{
float: left;
display: inline;
width:64px;
height: 64px;
margin: 2px;
}
ul#hovershow li a {
display: block;width:64px;
height: 64px;
}
ul#hovershow li a img{
border:1px #666 solid;
width:100%;
height:100%;
}
ul#hovershow li a:hover{
position: absolute;
z-index:100;
margin: -32px 0 0 -32px;
}
ul#hovershow li a:hover img{
width:128px;
height:128px;
border:1px red solid;
}
</style>
</head>
<body>
<ul id="hovershow">
<li><a href="1#" title="test"><img src="../images/resource/code/20060906_001.jpg" width="128" height="128" alt="test" /></a></li>
<li><a href="2#" title="test"><img src="../images/resource/code/20060906_002.jpg" width="128" height="128" alt="test" /></a></li>
<li><a href="3#" title="test"><img src="../images/resource/code/20060906_003.jpg" width="128" height="128" alt="test" /></a></li>
<li><a href="4#" title="test"><img src="../images/resource/code/20060906_004.jpg" width="128" height="128" alt="test" /></a></li>
<li><a href="5#" title="test"><img src="../images/resource/code/20060906_005.jpg" width="128" height="128" alt="test" /></a></li>
<li><a href="6#" title="test"><img src="../images/resource/code/20060906_006.jpg" width="128" height="128" alt="test" /></a></li>
<li><a href="7#" title="test"><img src="../images/resource/code/20060906_007.jpg" width="128" height="128" alt="test" /></a></li>
</ul>
</body>
</html>
