淘宝网图片放大的问题

          我想实现淘宝网那种，鼠标悬停弹出一个放大图片。 
            看了一下淘宝网的网页源代码，好象用的CSS。 
            我查了一些代码，都不理想。 
            下面这个代码放大图片不错，但加不入链接。 
            希望高手指教，谢谢！！！ 附放大图片代码： 
<!DOCTYPE   html   PUBLIC   "-//W3C//DTD   XHTML   1.0   Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   
<html   xmlns="http://www.w3.org/1999/xhtml">   
<head>   
<meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"   />   
<title> www.52css.com </title>   
<style   type="text/css">   /*   common   styling   */   a   {color:#000;}   
a:hover   {text-decoration:none;}   
a:visited   {color:#000;}   /*   slides   styling   */   .photo   {padding:20px;   background:#222;   width:600px;   height:330px;   text-align:left;}   
.photo   h1   {font-size:14px;   font-weight:normal;   color:#fc0;   margin:0   0   0   5px;   padding:0;}   
.photo   ul   {list-style:none;   padding:0;   margin:0;   width:216px;   background:#333;   border:1px   solid   #666;   position:relative;   height:144px;}   
.photo   ul   li   {display:inline;   width:24px;   height:24px;   float:left;   margin:6px;}   
.photo   ul   li   a   {display:block;   width:24px;   height:24px;   cursor:default;   background:url(pics/arrow.gif)   no-repeat;}   
.photo   ul   li   a   b   {display:none;}   
.photo   ul   li   a   img   {display:block;   width:22px;   height:22px;   border:1px   solid   #666;   border-top-color:#ccc;}   .photo   ul   li   a:hover   {white-space:normal;position:relative;}   .photo   ul   li   a.vert:hover   img   {position:absolute;   left:-12px;   top:-20px;   width:48px;   height:64px;   border-color:#fc0;}   
.photo   ul   li   a.hor:hover   img   {position:absolute;   left:-20px;   top:-12px;   width:64px;   height:48px;   border-color:#fc0;}   .photo   ul   li   a:active,   .photo   ul   li   a:focus   {position:static;   outline:0;}   .photo   ul   li   a:focus.vert   img,   .photo   ul   li   a:active.vert   img   {background-color:#000;   position:absolute;   left:260px;   top:0;   width:240px;   height:320px;   border:1px   solid   #fc0;   padding:5px   45px;}   
.photo   ul   li   a:focus.hor   img,   .photo   ul   li   a:active.hor   img   {background-color:#000;   position:absolute;   left:260px;   top:0;   width:320px;   height:240px;   border:1px   solid   #fc0;   padding:45px   5px;}   
.photo   ul   li   a:focus   b,   .photo   ul   li   a:active   b   {display:block;   position:absolute;   width:204px;   height:150px;   border:1px   solid   #666;   top:165px;   left:0;   color:#ddd;   font-weight:normal;   padding:6px;}   
</style>   
</head>   <div   class="photo">   
<ul>   <li> <a   href="#nogo1"   class="hor"> <img   src="logo.gif"   alt=""   title=""   /> <b> Snow   capped   mountains </b> </a> </li>   </ul>   
</div>   </body>   
</html> 

解决方案 »

  1.   

    <!--#include file="command.asp" -->
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>ͼƬ</title>
    <style type="text/css">
    <!--
    * {
    margin: 0;
    padding: 0;
    }
    body {
    margin: 0;
    padding: 30px;
    background: #FFF;
    color: #666;
    text-align: center;
    }
    h1 {
    font: bold 16px Arial, Helvetica, sans-serif;
    }
    p {
    margin: 15px 0;
    font: 11px Arial, Helvetica, sans-serif;
    }
    a {
    color: #900;
    text-decoration: none;
    font-weight: bold;
    }
    a:hover {
    background: #900;
    color: #FFF;
    }
    hr {
    margin: 24px 0;
    _margin: 0; /*IE Sucks*/
    clear: both;
    }
    #page-container {
    margin: 0 auto;
    width: 557px;
    text-align: left;
    }
    .pg {
    width: 557px;
    list-style: none none;
    }
    .pg:after {
    clear: both;
    display: block;
    content: ".";
    height: 0;
    visibility: hidden;
    }
    .pg li {
    list-style: none none;
    display: inline;
    }
    .pg li a {
    margin: 2px;
    border: 1px solid #CCC;
    padding: 4px;
    position: relative;
    float: left;
    display: block;
    width: 110px;
    height: 128px;
    }
    .pg li a:hover {
    font-size: 100%;
    z-index: 2;
    }
    .pg li a img {
    border: 0 none;
    position: absolute;
    width: 110px;
    height: 128px;
    }
    .pg li a:hover img,.pg li a:active img,.pg li a:focus img {
    width: 220px;
    height: 256px;
    left: -50px;
    top: -37px;
    z-index: 1;
    }
    -->
    </style>
    </head>
    <body>
    <div id="page-container">
    <hr />
    <ul class="pg">
                        <% rs.open "select * from products where recommend=1 and delpro=0 order by top",conn,1,1
      do while not rs.eof or err
      %>
       <li><a href="showproduct.asp?id=<%=rs("id")%>" target="_blank"><img width="110" height="128" src="products/s/<%=rs("imgpath")%>" border="0"></a></li>
                           <%rs.movenext
    loop
    rs.close
    %>
    </ul>
    <ul class="pg">
    <li>sdaf</li><li>sdaf</li>
    </ul>
    <hr />
    </div>
    </body>
    </html>