쇼핑몰 같은데 보면 아래 작은 이미지들이 있고
그 이미지에 마우스를 갖다대면 위에 큰 이미지가 나오잖아요.
그걸하고 싶어서 소스 갖다가 보는데 자바스크립트의 구조를 모르니
도통 이해하기가 어렵네요.

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}


<table border="0" cellspacing="0" cellpadding="0" height=77>
        <tr>
                <td align="center" style="background-position: 0px -20px;" background="/UPLOAD/LG-SV42001.jpg" width="59"><img onmouseover="MM_swapImage('boxsu1','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture'+ '+ ','/UPLOAD/LG-SV42001.jpg');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu1"></td>
                <td width="2"></td><td align="center" style="background-position: 100px 100px;" background="/UPLOAD/LG-SV42002.jpg" width="59"><img onmouseover="MM_swapImage('boxsu2','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture','/UPLOAD/LG-SV42002.jpg');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu2"></td>
                <td width="2"></td><td align="center" style="background-position: 100px 200px;" background="/UPLOAD/LG-SV42003.jpg" width="59"><img onmouseover="MM_swapImage('boxsu3','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture','/UPLOAD/LG-SV42003.jpg');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu3"></td>
                <td width="4"></td><td align="center" style="background-position: 100px 0px;" background="/UPLOAD/LG-SV42004.jpg" width="59"><img onmouseover="MM_swapImage('boxsu4','','/images/pro_bboxss.gif',1);style.cursor='hand';roll('picture','/UPLOAD/LG-SV42004.jpg'+ ');" onmouseout="MM_swapImgRestore();style.cursor=''" onerror="this.style.display='none'" src="/images/pro_bboxs.gif" width="62" height="77" border="0" name="boxsu4"></td>
        </tr>
</table>

자바스크립트 부분과 테이블에서 쓰인 부분을 따왔는데...
이거 설명 좀 해주실수 있나요?
그리고 네이버에 네모라는게 있습니다.
그거 보면 이미지 양옆으로 화살표가 있고
그 화살표를 누르면 이미지가 바뀌는데
네이버의 네모는 플래쉬를 이용했는데
그걸 자바스크립트로 비슷한 효과는 못하나요?