css代码：
<style type="text/css">代码：
#info {position:relative; height:660px;}
#adsie {position:absolute; bottom:0; left:0;}
#info b {font-size:14px; font-style:italic;}#magnifier {display:inline; position:relative; width:640px; height:40px; z-index:100; float:left; margin:0 20px 10px 15px; background:url(fade_in.gif) no-repeat;}
#cover1 {position:absolute; top:0; left:0; width:24px; height:30px; background:transparent;}
#cover2 {position:absolute; top:0; left:48px; width:240px; height:30px; background:transparent;}
#description {position:absolute; top:40px; z-index:-1;}
#magnifier img {position:absolute; width:640px; height:460px; top:30px; left:-9999px; opacity:0;}#magnifier ul {padding:0; border:0; margin:0; list-style-type:none;}
#magnifier li {display:block; width:24px; height:24px; position:absolute; left:24px; top:0; background:transparent;}#magnifier li.one {left:0;}
#magnifier li:hover {width:24px; height:24px; left:0;}
#magnifier li.ten:hover {width:24px; height:24px; left:24px;}#magnifier li.one:hover img {width:640px; height:460px; left:-240px; opacity:0.1; z-index:100;}
#magnifier li.two:hover img {width:640px; height:460px; left:-216px; opacity:0.2; z-index:100;}
#magnifier li.three:hover img {width:640px; height:460px; left:-192px; opacity:0.3; z-index:100;}
#magnifier li.four:hover img {width:640px; height:460px; left:-168px; opacity:0.4; z-index:100;}
#magnifier li.five:hover img {width:640px; height:460px; left:-144px; opacity:0.5; z-index:100;}
#magnifier li.six:hover img {width:640px; height:460px; left:-120px; opacity:0.6; z-index:100;}
#magnifier li.seven:hover img {width:640px; height:460px; left:-96px; opacity:0.7; z-index:100;}
#magnifier li.eight:hover img {width:640px; height:460px; left:-72px; opacity:0.8; z-index:100;}
#magnifier li.nine:hover img {width:640px; height:460px; left:-48px; opacity:0.9; z-index:100;}
#magnifier li.ten:hover img {width:640px; height:460px; left:-48px; opacity:1.0; z-index:100;}
#magnifier li.eleven:hover img {width:640px; height:460px; left:-24px; opacity:0}</style>
<!--[if IE 7]>
<style type="text/css">#magnifier img {left:-9999px; filter: alpha(opacity=0);}
#magnifier li {height:20px;}
#magnifier li.one:hover img {width:640px; height:460px; left:-240px; filter: alpha(opacity=10); z-index:100;}
#magnifier li.two:hover img {width:640px; height:460px; left:-216px; filter: alpha(opacity=20); z-index:100;}
#magnifier li.three:hover img {width:640px; height:460px; left:-192px; filter: alpha(opacity=30); z-index:100;}
#magnifier li.four:hover img {width:640px; height:460px; left:-168px; filter: alpha(opacity=40); z-index:100;}
#magnifier li.five:hover img {width:640px; height:460px; left:-144px; filter: alpha(opacity=50); z-index:100;}
#magnifier li.six:hover img {width:640px; height:460px; left:-120px; filter: alpha(opacity=60); z-index:100;}
#magnifier li.seven:hover img {width:640px; height:460px; left:-96px; filter: alpha(opacity=70); z-index:100;}
#magnifier li.eight:hover img {width:640px; height:460px; left:-72px; filter: alpha(opacity=80); z-index:100;}
#magnifier li.nine:hover img {width:640px; height:460px; left:-48px; filter: alpha(opacity=90); z-index:100;}
#magnifier li.ten:hover img {width:640px; height:460px; left:-48px; filter: alpha(opacity=100); z-index:100;}
#magnifier li.eleven:hover img {width:640px; height:460px; left:-24px; filter: alpha(opacity=0);}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style type="text/css">
#magnifier table {border:0; padding:0; margin:0; border-collapse:collapse;}#magnifier li {position:static;}
#magnifier img {position:absolute; width:640px; height:460px; top:30px; left:-9999px;filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);}#magnifier li {height:20px;}
#magnifier a {display:block; width:24px; height:24px; left:24px; top:0; position:absolute; background:transparent;}#magnifier a:hover {border:0;width:24px; height:24px; left:0;}
#magnifier a.aten:hover {border:0; width:24px; height:20px; left:24px;}
#magnifier a.aone:hover img {width:640px; height:460px; left:-240px;filter: alpha(opacity=10);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=10); z-index:100;}
#magnifier a.atwo:hover img {width:640px; height:460px; left:-216px;filter: alpha(opacity=20);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=20); z-index:100;}
#magnifier a.athree:hover img {width:640px; height:460px; left:-192px;filter: alpha(opacity=30);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=30); z-index:100;}
#magnifier a.afour:hover img {width:640px; height:460px; left:-168px;filter: alpha(opacity=40);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40); z-index:100;}
#magnifier a.afive:hover img {width:640px; height:460px; left:-144px;filter: alpha(opacity=50);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); z-index:100;}
#magnifier a.asix:hover img {width:640px; height:460px; left:-120px;filter: alpha(opacity=60);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=60); z-index:100;}
#magnifier a.aseven:hover img {width:640px; height:460px; left:-96px;filter: alpha(opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70); z-index:100;}
#magnifier a.aeight:hover img {width:640px; height:460px; left:-72px;filter: alpha(opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); z-index:100;}
#magnifier a.anine:hover img {width:640px; height:460px; left:-48px;filter: alpha(opacity=90);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); z-index:100;}
#magnifier a.aten:hover img {width:640px; height:460px; left:-48px;filter: alpha(opacity=100);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); z-index:100;}
#magnifier a.aeleven:hover img {width:640px; height:460px; left:-24px;filter: alpha(opacity=0);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); z-index:-1;}</style>
<![endif]-->
<div id="magnifier">
<ul>
<li class="one"><!--[if lte IE 6]><a class="aone" href="#nogo1"><table><tr><td><![endif]-->
<ul>
<li class="two"><!--[if lte IE 6]><a class="atwo" href="#nogo2"><table><tr><td><![endif]-->
<ul>
<li class="three"><!--[if lte IE 6]><a class="athree" href="#nogo3"><table><tr><td><![endif]-->
<ul>
<li class="four"><!--[if lte IE 6]><a class="afour" href="#nogo4"><table><tr><td><![endif]-->
<ul><li class="five"><!--[if lte IE 6]><a class="afive" href="#nogo5"><table><tr><td><![endif]-->
<ul>
<li class="six"><!--[if lte IE 6]><a class="asix" href="#nogo6"><table><tr><td><![endif]-->
<ul>
<li class="seven"><!--[if lte IE 6]><a class="aseven" href="#nogo7"><table><tr><td><![endif]-->
<ul>
<li class="eight"><!--[if lte IE 6]><a class="aeight" href="#nogo8"><table><tr><td><![endif]-->
<ul>
<li class="nine"><!--[if lte IE 6]><a class="anine" href="#nogo9"><table><tr><td><![endif]--><ul>
<li class="ten"><!--[if lte IE 6]><a class="aten" href="#nogo10"><table><tr><td><![endif]-->
<ul>
<li class="eleven"><!--[if lte IE 6]><a class="aeleven" href="#nogo11"><table><tr><td><![endif]-->
<img src="http://file.wbgxw.com/UpLoadPic/2007-4/20074115459834.jpg" alt="" title="" />
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul><!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
</ul>
<div id="cover1"></div>
<div id="cover2"></div>
效果预览：
设置字体大小，即可让图片全部覆盖文字，预览中并未设置。如果上面的代码不正确。请在效果预览页面打开源文件，直接复制代码。
