当鼠标经过图片时，图片放大显示带超链接的文本的实现

我想实现www.lenovo.com.cn 联想官网的首页下面图片的显示效果，用javascript该怎样实现？最好给一些代码？
谢谢了

解决方案 »

  1.   

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>BODY { background-color: #FFFFFF; font-size: 12px; color: #333333; font-family: 宋体, Arial; }
    TD { font-size: 12px; color: #333333; font-family: 宋体, Arial; }a:link, a:active, a:visited { color: #666666; font-family: 宋体, Arial; text-decoration: none; }
    a:hover { color: #0000FF; font-family: 宋体, Arial; text-decoration: underline;}a.top:link, a.top:active, a.top:visited { font-size: 13px; color:#FFFF00; }
    a.top:hover { font-size: 13px; color:#0000FF;   }a.topr:link, a.topr:active, a.topr:visited { color:#666666; }
    a.topr:hover { color:#0000FF; }a.topb:link, a.topb:active, a.topb:visited { color:#FFFFFF; }
    a.topb:hover { color:#FFFF00; }a.sort:link, a.sort:active, a.sort:visited { font-weight: bold; font-size: 13px; color:#0328c1; }
    a.sort:hover { font-weight: bold; font-size: 13px; }a.nsort:link, a.nsort:active, a.nsort:visited { color:#666666 }
    a.nsort:hover { color:#0000FF; }a.title:link, a.title:active, a.title:visited { }
    a.title:hover { }.topf   { color:#FFFFFF; }
    .top4 { Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute; }
    .topk1 { width:322; }
    .topk2 { width:394; }
    .topk3 { width:609; }
    </style>
    </head>
    <script language="javascript">
    function MM_findObj(n, d) { //v4.0
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && document.getElementById) x=document.getElementById(n); return x;
    }
    function MM_showHideLayers() { //v3.0
    var i,p,v,obj,args=MM_showHideLayers.arguments;
    for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
        if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
        obj.visibility=v; }
    }</script>
    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
        <td align="center" onmouseover="MM_showHideLayers('Layer_00', '', 'show')" onmouseout="MM_showHideLayers('Layer_00', '', 'hide')" >
    <a href="#">品牌导航</a></td>
    </tr>
    </table><DIV id=Layer_00 onmouseover="MM_showHideLayers('Layer_00','','show')" onmouseout="MM_showHideLayers('Layer_00','','hide')" class="top4"><table border="0" cellpadding="0" cellspacing="0"><tr><td class="topk2"></td><td><table border="0" cellspacing="0" cellpadding="5" class="top3"><tr><td height="23" width="120" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#EDF5FA'"><img border="0" src="Skin/blue/dot.gif" align="absmiddle"> <a href="pinpai.asp?pinpai_id=1" class="nsort">凡人网络</a></td><td height="23" width="120" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#EDF5FA'"><img border="0" src="Skin/blue/dot.gif" align="absmiddle"> <a href="pinpai.asp?pinpai_id=2" class="nsort">凡人网络</a></td><td height="23" width="120" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#EDF5FA'"><img border="0" src="Skin/blue/dot.gif" align="absmiddle"> <a href="pinpai.asp?pinpai_id=3" class="nsort">DELL（戴尔）</a></td><td height="23" width="120" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#EDF5FA'"><img border="0" src="Skin/blue/dot.gif" align="absmiddle"> <a href="pinpai.asp?pinpai_id=4" class="nsort">三星</a></td></tr><tr><td height="23" width="120" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#EDF5FA'"><img border="0" src="Skin/blue/dot.gif" align="absmiddle"> <a href="pinpai.asp?pinpai_id=5" class="nsort">联想</a></td><td height="23" width="120" onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#EDF5FA'"><img border="0" src="Skin/blue/dot.gif" align="absmiddle"> <a href="pinpai.asp?pinpai_id=6" class="nsort">惠普笔记本</a></td><td></td><td></td></tr></table></td></tr></table></DIV>
    </body>
    </html>
      

  2.   

    做一个浮动的DIV.设置display:none;把它先隐藏.鼠标移到图片,也就是当图片触发onmousemove事件的时候.让这个div显示.当鼠标离开图片,DIV隐藏就行了