다음 예제는 쇼핑몰에서 많이 사용되는 썸네일 이미지클릭시 해당이미지로 디스플레이되는 자바스크립트입니다

<table cellspacing="0" cellpadding="0" width="100%" border="0">

 <tbody><tr>

  <td valign="top">

   <div id="HangerID" style="FILTER: blendTrans(duration=1); WIDTH: 100%">

   <a href="상품링크주소"><img src="/upload/review/1014_1.jpg" width="567" height="352" border="0"></a></div>

  </td>

 </tr>

</tbody></table>

<script language="javascript">

var n = Math.round(Math.random() * 2);

var interval = 5000;

//이미지 배열

var aHtmls = new Array (

"<a href=상품링크주소><img src=1014_1.jpg border=0 width=567 height=352></a>" 

,"<a href=상품링크주소0><img src=1014_2.jpg border=0 width=567 height=352></a>" 

,"<a href=상품링크주소><img src=1014_3.jpg border=0 width=567 height=352></a>"

,"<a href=상품링크주소><img src=1014_5.jpg border=0 width=567 height=352></a>" 

);

function rotate(){

 setHanger();

 (n==(aHtmls.length-1))?n=0:n++;

 setTimeout("rotate()",interval);

}

function changeHanger(nGotoNo){

 n = nGotoNo;

 setHanger();

}

function setHanger(){

 //document.all.HangerID.filters.blendTrans.apply();

 //document.all.HangerID.style.filter="blendTrans(duration=1)";

 document.all.HangerID.filters.blendTrans.apply();

 if(navigator.appName=="Netscape" && document.getElementById) {

  document.getElementById("HangerID").innerHTML=aHtmls[n];

 } else {

  document.all.HangerID.innerHTML=aHtmls[n];

 }

 document.all.HangerID.filters.blendTrans.play();

 //document.all.HangerID.style.Filters.blendTrans.play();

 //document.all.HangerID.blendTrans.play();

}

rotate();

</script>

<map name="main">

    <area shape="RECT" coords="0,0,160,81" href="javascript:changeHanger(0)" onfocus="this.blur()">

    <area shape="RECT" coords="0,80,160,162" href="javascript:changeHanger(1)" onfocus="this.blur()">

    <area shape="RECT" coords="0,160,160,243" href="javascript:changeHanger(2)" onfocus="this.blur()">

    <area shape="RECT" coords="0,240,160,324" href="javascript:changeHanger(3)" onfocus="this.blur()">

   </map><table height="352" border="0" cellpadding="0" cellspacing="0">

 <tbody><tr>

  <td height="352" valign="bottom">

<img src="1014_4.jpg" width="160" height="326" usemap="#main" border="0"></td>

   </tr>

  </tbody>

</table>