怎么用JS写产品相册？谁能发给我一份代码吗？

产品相册怎么写呢？我刚学JS，谁有代码发我研究研究。谢谢！上面有张大图，下面显示几个缩略图，鼠标滑过缩略图，显示对应的大图。
比如淘宝产品浏览页面，凡客产品浏览页面那样的。本来想传图片，但是网速超慢。JavaScript产品相册

解决方案 »

  1.   

    这样的？
    <!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>首页图片切换</title>
    <style type="text/css">
    /* Reset style */
    * { margin:0; padding:0; word-break:break-all; }
    body {
    background:#fff;
    color:#000000;
    font:12px/1.6em Helvetica, Arial, sans-serif;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    }
    h1, h2, h3, h4, h5, h6 { font-size:1em; }
    a { color:#0287CA; text-decoration:none; }
    a:hover { text-decoration:underline; }
    ul, li { list-style:none; }
    fieldset, img { border:none; }
    legend { display:none; }
    em, strong, cite, th { font-style:normal; font-weight:normal; }
    input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
    table { border-collapse:collapse; }
    html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*//* iFocus style */
    #ifocus { width:650px; height:245px; margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }
    #ifocus_pic { display:inline; position:relative; float:left; width:540px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
    #ifocus_piclist { position:absolute; }
    #ifocus_piclist li { width:550px; height:225px; overflow:hidden; }
    #ifocus_piclist img { width:550px; height:225px; }
    #ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }
    #ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
    #ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
    #ifocus_btn .current { background: url(img/ifocus_btn_bg.gif) no-repeat; opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
    #ifocus_opdiv { position:absolute; left:0; bottom:0; width:545px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
    #ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
    #ifocus_tx .normal { display:none; }
    </style><script type="text/javascript">
    function $(id) { return document.getElementById(id); }function addLoadEvent(func){
    var oldonload = window.onload;
    if (typeof window.onload != 'function') {
    window.onload = func;
    } else {
    window.onload = function(){
    oldonload();
    func();
    }
    }
    }function moveElement(elementID,final_x,final_y,interval) {
      if (!document.getElementById) return false;
      if (!document.getElementById(elementID)) return false;
      var elem = document.getElementById(elementID);
      if (elem.movement) {
        clearTimeout(elem.movement);
      }
      if (!elem.style.left) {
        elem.style.left = "0px";
      }
      if (!elem.style.top) {
        elem.style.top = "0px";
      }
      var xpos = parseInt(elem.style.left);
      var ypos = parseInt(elem.style.top);
      if (xpos == final_x && ypos == final_y) {
    return true;
      }
      if (xpos < final_x) {
        var dist = Math.ceil((final_x - xpos)/10);
        xpos = xpos + dist;
      }
      if (xpos > final_x) {
        var dist = Math.ceil((xpos - final_x)/10);
        xpos = xpos - dist;
      }
      if (ypos < final_y) {
        var dist = Math.ceil((final_y - ypos)/10);
        ypos = ypos + dist;
      }
      if (ypos > final_y) {
        var dist = Math.ceil((ypos - final_y)/10);
        ypos = ypos - dist;
      }
      elem.style.left = xpos + "px";
      elem.style.top = ypos + "px";
      var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
      elem.movement = setTimeout(repeat,interval);
    }function classNormal(iFocusBtnID,iFocusTxID){
    var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
    var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
    for(var i=0; i<iFocusBtns.length; i++) {
    iFocusBtns[i].className='normal';
    iFocusTxs[i].className='normal';
    }
    }function classCurrent(iFocusBtnID,iFocusTxID,n){
    var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
    var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
    iFocusBtns[n].className='current';
    iFocusTxs[n].className='current';
    }function iFocusChange() {
    if(!$('ifocus')) return false;
    $('ifocus').onmouseover = function(){atuokey = true};
    $('ifocus').onmouseout = function(){atuokey = false};
    var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
    var listLength = iFocusBtns.length;
    iFocusBtns[0].onmouseover = function() {
    moveElement('ifocus_piclist',0,0,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',0);
    }
    if (listLength>=2) {
    iFocusBtns[1].onmouseover = function() {
    moveElement('ifocus_piclist',0,-225,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',1);
    }
    }
    if (listLength>=3) {
    iFocusBtns[2].onmouseover = function() {
    moveElement('ifocus_piclist',0,-450,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',2);
    }
    }
    if (listLength>=4) {
    iFocusBtns[3].onmouseover = function() {
    moveElement('ifocus_piclist',0,-675,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',3);
    }
    }
    }setInterval('autoiFocus()',3500);
    var atuokey = false;
    function autoiFocus() {
    if(!$('ifocus')) return false;
    if(atuokey) return false;
    var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
    var listLength = focusBtnList.length;
    for(var i=0; i<listLength; i++) {
    if (focusBtnList[i].className == 'current') var currentNum = i;
    }
    if (currentNum==0&&listLength!=1 ){
    moveElement('ifocus_piclist',0,-225,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',1);
    }
    if (currentNum==1&&listLength!=2 ){
    moveElement('ifocus_piclist',0,-450,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',2);
    }
    if (currentNum==2&&listLength!=3 ){
    moveElement('ifocus_piclist',0,-675,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',3);
    }
    if (currentNum==3 ){
    moveElement('ifocus_piclist',0,0,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',0);
    }
    if (currentNum==1&&listLength==2 ){
    moveElement('ifocus_piclist',0,0,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',0);
    }
    if (currentNum==2&&listLength==3 ){
    moveElement('ifocus_piclist',0,0,5);
    classNormal('ifocus_btn','ifocus_tx');
    classCurrent('ifocus_btn','ifocus_tx',0);
    }
    }
    addLoadEvent(iFocusChange);
    </script>
    </head><body>
    <br />
    <div align="center">
    <div id="ifocus">
    <div id="ifocus_pic">
    <div id="ifocus_piclist" style="left:0; top:0;">
    <ul>
    <li><a href="http://u.xxx.cn/50sg/uport/u70608_26_0" target="_blank"><img src="/icon/18115/01.jpg" alt="武林三国" border="0" /></a></li>
    <li><a href="http://u.xxx.com/uport/u71859319_103_0" target="_blank"><img src="/icon/18115/02.jpg" alt="武林英雄" border="0" /></a></li>
    <li><a href="http://u.xxx.com/pc555/gamebto/" target="_blank"><img src="/icon/18115/03.jpg" alt="商业大亨" border="0" /></a></li>
    <li><a href="http://u.xxx.com/pc555/dgyz/" target="_blank"><img src="/icon/18115/04.jpg" alt="帝国远征" border="0" /></a></li>
    </ul>
    </div>
    <div id="ifocus_opdiv"></div>
    <div id="ifocus_tx">
    <ul>
    <li class="current">武林三国</li>
    <li class="normal">英雄主义 </li>
    <li class="normal">商业大亨</li>
    <li class="normal">帝国远征</li>
    </ul>
    </div>
    </div>
    <div id="ifocus_btn">
    <ul>
    <li class="current"><img src="/icon/18115/btn_01.jpg" alt="" /></li>
    <li class="normal"><img src="/icon/18115/btn_02.jpg" alt="" /></li>
    <li class="normal"><img src="/icon/18115/btn_03.jpg" alt="" /></li>
    <li class="normal"><img src="/icon/18115/btn_04.jpg" alt="" /></li>
    </ul>
    </div>
    </div>
    </div>
    </body>
    </html>
      

  2.   

    现在好长时间不弄那些特效了
    我这个电脑还没有以前的东西http://www.17173.com/
    这个网站上的特效是你想要的？我建议去弄个jquery现成的特效，比较炫，JQ上的这样的特效非常常见我再去找找
      

  3.   

    http://js.alixixi.com/demo/718/718.rar给个下载地址，不知道是不是这个特效？
      

  4.   

    再提供一个
    <style>
    BODY {
     PADDING-RIGHT: 0px; PADDING-LEFT: 0px; FONT-SIZE: 12px; BACKGROUND: #000; PADDING-BOTTOM: 0px; MARGIN-LEFT: auto; COLOR: #f6f6ee; MARGIN-RIGHT: auto; PADDING-TOP: 0px; FONT-FAMILY: 宋体; HEIGHT: 490px; TEXT-ALIGN: center
    }
    A {
     COLOR: #fff; TEXT-DECORATION: none
    }
    A:hover {
     COLOR: #fff; TEXT-DECORATION: underline
    }
    .fpic {
     BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; Z-INDEX: 3; BACKGROUND: #000;  BORDER-BOTTOM-WIDTH: 0px; WIDTH: 476px; POSITION: relative; HEIGHT: 330px; BORDER-RIGHT-WIDTH: 0px;BORDER: #dddddd 1px solid;
    text-align:center
    }
    .bpic {
     FLOAT: left; MARGIN: 0px; WIDTH: 244px; POSITION: relative; HEIGHT: 243px
    }
    #focpic {
     BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; LEFT: 1px; BORDER-BOTTOM-WIDTH: 0px; POSITION: absolute; TOP: 1px; BORDER-RIGHT-WIDTH: 0px
    }
    .thubpic {
     PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px
    }
    .thubpiccur {
     PADDING-RIGHT: 0px; PADDING-LEFT: 4px; Z-INDEX: 20; PADDING-BOTTOM: 0px; WIDTH: 63px; CURSOR: pointer; PADDING-TOP: 4px; TOP: 10px; HEIGHT: 49px
    }
    .thubpiccur {
     Z-INDEX: 30; BACKGROUND: url(icon/images20071220/arrow3.gif) no-repeat left 50%
    }
    .thubpic IMG {
     BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px
    }
    .thubpiccur IMG {
     BORDER-RIGHT: #666 3px solid; BORDER-TOP: #666 2px solid; BORDER-LEFT: #666 3px solid; WIDTH: 56px; BORDER-BOTTOM: #666 2px solid; HEIGHT: 42px
    }
    .thubpiccur IMG {
     BORDER-LEFT-COLOR: #fff; BORDER-BOTTOM-COLOR: #fff; BORDER-TOP-COLOR: #fff; BORDER-RIGHT-COLOR: #fff
    }
    -->
    </style>
    <SCRIPT language=javascript>
    // welcome to www.jz123.cn
    var currslid = 0;
    var slidint;
    function setfoc(id){
     document.getElementById("focpic").src = picarry[id];
     document.getElementById("foclnk").href = lnkarry[id];
     document.getElementById("fttltxt").innerHTML = '<a href="'+lnkarry[id]+'" target="_blank">'+ttlarry[id]+'</a>';
     currslid = id;
     for(i=0;i<6;i++){
      document.getElementById("tmb"+i).className = "thubpic";
     };
     document.getElementById("tmb"+id).className ="thubpiccur";
     focpic.style.visibility = "hidden";
     focpic.filters[0].Apply();
     if (focpic.style.visibility == "visible") {
      focpic.style.visibility = "hidden";
      focpic.filters.revealTrans.transition=23;
     }
     else {
      focpic.style.visibility = "visible";
      focpic.filters[0].transition=23;
     }
     focpic.filters[0].Play();
     stopit();
    }function playnext(){
     if(currslid==5){
      currslid = 0;
     }
     else{
      currslid++;
     };
     setfoc(currslid);
     playit();
    }
    function playit(){
     slidint = setTimeout(playnext,4500);
    }
    function stopit(){
     clearTimeout(slidint);
     }
    window.onload = function(){
     playit();
    }
    </SCRIPT>
    </head><body>
    <DIV class=fpic>
    <A id=foclnk href="http://www.jz123.cn/" target=_blank><IMG id=focpic style="FILTER: RevealTrans ( duration = 1，transition=23 ); VISIBILITY: visible; POSITION: absolute" height=300 alt="" src="http://www.qpsh.com/icon/images20071220/01.jpg" width=400></A> 
    <DIV id=fttltxt 
    style="MARGIN-TOP: 305px; FLOAT: left; WIDTH: 400px; TEXT-ALIGN: center"><A 
    href="http://www.jz123.cn/" target=_blank>梦：牧场小屋</A></DIV>
    <DIV style="MARGIN-LEFT: 402px; WIDTH: 65px">
    <DIV class=thubpiccur id=tmb0 onmouseover=setfoc(0); onmouseout=playit();><A 
    href="http://www.jz123.cn/" target=_blank><IMG 
    src="http://www.qpsh.com/icon/images20071220/01.jpg" alt="" width=56 height=42 border="0"></A></DIV>
    <DIV class=thubpic id=tmb1 onmouseover=setfoc(1); onmouseout=playit();><A 
    href="http://www.jz123.cn/" target=_blank><IMG height=45 alt="" 
    src="http://www.qpsh.com/icon/images20071220/02.jpg" width=56></A></DIV>
    <DIV class=thubpic id=tmb2 onmouseover=setfoc(2); onmouseout=playit();><A 
    href="http://www.jz123.cn/" target=_blank><IMG height=45 alt="" 
    src="http://www.qpsh.com/icon/images20071220/03.jpg" width=56></A></DIV>
    <DIV class=thubpic id=tmb3 onmouseover=setfoc(3); onmouseout=playit();><A 
    href="http://www.jz123.cn/" target=_blank><IMG height=45 alt="" 
    src="http://www.qpsh.com/icon/images20071220/04.jpg" width=56></A></DIV>
    <DIV class=thubpic id=tmb4 onmouseover=setfoc(4); onmouseout=playit();><A 
    href="http://www.jz123.cn/" target=_blank><IMG height=45 alt="" 
    src="http://www.qpsh.com/icon/images20071220/05.jpg" width=56></A></DIV>
    <DIV class=thubpic id=tmb5 onmouseover=setfoc(5); onmouseout=playit();><A 
    href="http://www.jz123.cn/" target=_blank><IMG height=45 alt="" 
    src="http://www.qpsh.com/icon/images20071220/06.jpg" width=56></A></DIV>
    <SCRIPT language=javascript type=text/javascript>
    var picarry = {};
    var lnkarry = {};
    var ttlarry = {};
    picarry[0] = "http://www.qpsh.com/icon/images20071220/01.jpg";
    lnkarry[0]  = "http://www.jz123.cn/";
    ttlarry[0] = "梦：牧场小屋";
    picarry[1] = "http://www.qpsh.com/icon/images20071220/02.jpg";
    lnkarry[1]  = "http://www.jz123.cn/";
    ttlarry[1] = "碎玉：回眸";
    picarry[2] = "http://www.qpsh.com/icon/images20071220/03.jpg";
    lnkarry[2]  = "http://www.jz123.cn/";
    ttlarry[2] = "飞狐：豆花档";
    picarry[3] = "http://www.qpsh.com/icon/images20071220/04.jpg";
    lnkarry[3]  = "http://www.jz123.cn/";
    ttlarry[3] = "牛说不哭：烈日下的建筑工人";
    picarry[4] = "http://www.qpsh.com/icon/images20071220/05.jpg";
    lnkarry[4]  = "http://www.jz123.cn/";
    ttlarry[4] = "新疆瓦格：哈萨克族搭建毡房";
    picarry[5] = "http://www.qpsh.com/icon/images20071220/06.jpg";
    lnkarry[5]  = "http://www.jz123.cn/";
    ttlarry[5] = "松间明月：汽车文化";
    </SCRIPT>
    </DIV></DIV>
      

  5.   

    你这是焦点图哦，
    功能类似。我希望小图和大图是相同的。去掉自动切换的话，把autoiFocus()去掉就OK了？ 谢谢
      

  6.   

    给你提个说思路 最简单的是你使用UI LI 触发onmousemove事件 获得下标值 更换图片之不过特效没有
    家特效的话  就用left right来实现了
      

  7.   

    <!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>
    <title>淘宝网图片预览效果</title>
    <meta http-equiv="content-type" content="text/html;charset=gb2312">
    <style type="text/css">
    div#PreviewBox{
      position:absolute;
      padding-left:6px;
      display: none;
      Z-INDEX:2006;
    }
    div#PreviewBox span{
      width:7px;
      height:13px;
      position:absolute;
      left:0px;
      top:9px;
      background:url() 0 0 no-repeat;
    }
    div#PreviewBox div.Picture{
      float:left;
      border:1px #666 solid;
      background:#FFF;
    }
    div#PreviewBox div.Picture div{
      border:4px #e8e8e8 solid;
    }
    div#PreviewBox div.Picture div a img{
      margin:19px;
      border:1px #b6b6b6 solid;
      display: block;
      max-height: 250px;
      max-width: 250px;
    }
    </style>
    </head>
    <body>
    <script language="javascript" type="text/javascript">
    var maxWidth=250;
    var maxHeight=250;
    function getPosXY(a,offset) {
           var p=offset?offset.slice(0):[0,0],tn;
           while(a) {
               tn=a.tagName.toUpperCase();
               if(tn=='IMG') {
                  a=a.offsetParent;continue;
               }
              p[0]+=a.offsetLeft-(tn=="DIV"&&a.scrollLeft?a.scrollLeft:0);
              p[1]+=a.offsetTop-(tn=="DIV"&&a.scrollTop?a.scrollTop:0);
              if(tn=="BODY")
                    break;
              a=a.offsetParent;
          }
          return p;
    }
    function checkComplete() {
         if(checkComplete.__img&&checkComplete.__img.complete)
                  checkComplete.__onload();
    }
    checkComplete.__onload=function() {
             clearInterval(checkComplete.__timeId);
             var w=checkComplete.__img.width;
             var h=checkComplete.__img.height;
             if(w>=h&&w>maxWidth) {
                  previewImage.style.width=maxWidth+'px';
             }
            else if(h>=w&&h>maxHeight) {
                  previewImage.style.height=maxHeight+'px';
            }
            else {
                  previewImage.style.width=previewImage.style.height='';
            }
           previewImage.src=checkComplete.__img.src;previewUrl.href=checkComplete.href;checkComplete.__img=null;
    }
    function showPreview(e) {
             hidePreview (e);
             previewFrom=e.target||e.srcElement;
             previewImage.src=loadingImg;//More:www.codefans.net
             previewImage.style.width=previewImage.style.height='';
             previewTimeoutId=setTimeout('_showPreview()',500);
             checkComplete.__img=null;
    }
    function hidePreview(e) {
            if(e) {
                var toElement=e.relatedTarget||e.toElement;
                while(toElement) {
                      if(toElement.id=='PreviewBox')
                              return;
                      toElement=toElement.parentNode;
                }
           }
           try {
                clearInterval(checkComplete.__timeId);
                checkComplete.__img=null;
                previewImage.src=null;
           }
           catch(e) {}
           clearTimeout(previewTimeoutId);
           previewBox.style.display='none';
    }
    function _showPreview() {
            checkComplete.__img=new Image();
            if(previewFrom.tagName.toUpperCase()=='A')
                   previewFrom=previewFrom.getElementsByTagName('img')[0];
            var largeSrc=previewFrom.getAttribute("large-src");
            var picLink=previewFrom.getAttribute("pic-link");
            if(!largeSrc)
                 return;
            else {
                 checkComplete.__img.src=largeSrc;
                 checkComplete.href=picLink;
                 checkComplete.__timeId=setInterval("checkComplete()",20);
                 var pos=getPosXY(previewFrom,[106,26]);
                 previewBox.style.left=pos[0]+'px';
                 previewBox.style.top=pos[1]+'px';
                 previewBox.style.display='block';
            }
    }
    </script>
    <div id="PreviewBox" onmouseout="hidePreview(event);">
      <div class="Picture" onmouseout="hidePreview(event);">
       <span></span>
       <div>
        <a id="previewUrl" href="javascript:void(0)" target="_blank"><img oncontextmenu="return(false)" id="PreviewImage" src="about:blank" border="0" onmouseout="hidePreview(event);" /></a>
       </div>
      </div>
    </div>
    <script language="javascript" type="text/javascript">
    var previewBox = document.getElementById('PreviewBox');
    var previewImage = document.getElementById('PreviewImage');
    var previewUrl = document.getElementById('previewUrl');
    var previewFrom = null;
    var previewTimeoutId = null;
    var loadingImg = 'loading.gif';
    </script>
    <a href="####" onmouseover='showPreview(event);' onmouseout='hidePreview(event);'>
    <img src="wall_s8.jpg" alt="" large-src="wall8.jpg" pic-link="/"  border="0" width="100"/></a>
    </body>
    </html>这个可以的
      

  8.   

    自己写了一个，好简单啊，呵呵
    <!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>Test</title>
    <style type="text/css">
    .thumbnail
    {
    float: left;
    margin: 10px;
    }
    ul li
    {
    list-style: none;
    }
    #box
    {
    width: 400px;
    height: 400px;
    }
    #large
    {
    width: 400px;
    height: 400px;
    border: 1px solid red;
    }
    </style>
    <script type="text/javascript">
    function display(image)
    {
    window.largeimage.src = image.src;
    }</script>
    </head>
    <body>
    <div id="large">
    <img name ="largeimage" src="1.jpg" width="400" />
    </div><div id="box">
    <ul>
    <li><div class="thumbnail"><a href="javascript: void(0)"><img src="1.jpg" width="80" height="80" onmouseover="javascript: display(this);" /></a></div></li>
    <li><div class="thumbnail"><a href="javascript: void(0)"><img src="2.jpg" width="80" height="80" onmouseover="javascript: display(this);" /></a></div></li>
    <li><div class="thumbnail"><a href="javascript: void(0)"><img src="3.jpg" width="80" height="80" onmouseover="javascript: display(this);" /></a></div></li>
    </ul>
    </div>
    </body>
    </html>