<style type="text/css">
body {
margin: 0;
padding: 40px;
background: #fff;
font: 80% Arial, Helvetica, sans-serif;
color: #555;
line-height: 180%;
}
img {
border: none;
}
ul, li {
margin: 0;
padding: 0;
}
li {
list-style: none;
float: left;
display: inline;
margin-right: 10px;
border: 1px solid #AAAAAA;
}
/* tooltip */
#tooltip {
position: absolute;
border: 1px solid #ccc;
background: #333;
padding: 2px;
display: none;
color: #fff;
}
</style>
<script src="Script/jquery-1.3.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("li a").mousemove(function(){
var src=$(this).attr("href");
//alert(src);
var str=src.split('/Images');
var big="images"+str[1];
$("#big").show().attr("src",big);
})
$("li a").mouseout(function(){
$("#big").hide().attr("src",big);
})
})
</script>
</head>
<body>
<ul>
<li>
<a href="/Images/bxgz_big.jpeg" class="tooltip" title="白雪公主">
<img src="Images/bxgz.jpg" alt="白雪公主" />
</a>
</li>
<li>
<a href="/Images/sj_big.jpeg" class="tooltip" title="妖精">
<img src="Images/sj.jpg" alt="妖精" />
</a>
</li>
<li>
<a href="/Images/kn_big.jpeg" class="tooltip" title="柯南">
<img src="Images/kn.jpg" alt="柯南" />
</a>
</li>
<li>
<a href="/Images/pdx_big.jpeg" class="tooltip" title="蜡笔小新">
<img src="Images/pdx.png" alt="蜡笔小新" />
</a>
</li>
</ul>
<img src="/Images/pdx_big.jpeg" id="big"/>
</body>
</html>