이미지 위에 이미지 올리는법?

 
밑에 소스가 위에서 왼쪽 그림입니다.

그런데... 위에서 오른쪽 처럼 이미지 위에 이미지를 올리려면 어떻게 해야하죠?

오른쪽이 정성모습인데...

도저히 어려워서.... ㅠㅠ

===================================================================================

        
        <div class="box2"  onmouseout="boxOut();" onmouseover="boxOver();">
         <p class="rollbtn">
          <a href="#" onfocus="blur()"   onclick="javascript:return false;" onmouseover="javascript:_DISPLAY1_etc(1); return false;"><img name="tabetc1" id="tabetc1"   src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12a.gif" width="12" height="12" alt="현재 이미지" /></a>
          <a href="#" onfocus="blur()"  onclick="javascript:return false;" onmouseover="javascript:_DISPLAY1_etc(2); return false;"><img name="tabetc2" id="tabetc2"  src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12.gif" width="12" height="12" alt="" /></a>
          <a href="#" onfocus="blur()"  onclick="javascript:return false;" onmouseover="javascript:_DISPLAY1_etc(3); return false;"><img name="tabetc3" id="tabetc3"   src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12.gif" width="12" height="12" alt="" /></a>
          <a href="#" onfocus="blur()"  onclick="javascript:return false;" onmouseover="javascript:_DISPLAY1_etc(4); return false;"><img name="tabetc4" id="tabetc4"   src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12.gif" width="12" height="12" alt="" /></a>
         </p>
         <script language="JavaScript" type="text/javascript">
          function _DISPLAY1_etc(id) {
           boxval=id;
           boxval++;
           if (boxval>4)
           {
            boxval=1;
           }
           var max = 4;  //맥스숫자
            for (var i = 1; i <= max; i++) {
             var obj = document.getElementById("DISPLAY_etc" + i);
             var img = document.getElementById("tabetc" + i);
            if (i == id) {
             obj.style.display = "";
             img.src = "http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12a.gif"; //원본
            } else {
             obj.style.display = "none";
             img.src = "http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/sq_12x12.gif"; //변할꺼
            }
           }
          }
 
         </script>
         <div id="DISPLAY_etc1">
         <p>
          <!-- 이미지 사이즈 고정 width="238" height="160" -->
          <a href='/shop/detail.asp?prdid=1066844'><img src='http://img.halfclub.com/images_Ogage/used/200911/Ogage200911131943566441.jpg'     alt='1' /></a></a>
         </p>
         <!-- today sale tag s -->
         <p style="position:absolute; top:-2px; left:-2px;"><img src='http://img.halfclub.com/images_Ogage/used/200909/Ogage20090901501208477.gif'  alt='1'     /></p>
         <!-- today sale tag e -->
         </div>
         <div id="DISPLAY_etc2" style="display:none">
         <p>
          <!-- 이미지 사이즈 고정 width="238" height="160" -->
          <a href='/shop/detail.asp?prdid=1064682&FP=BR'><img src='http://img.halfclub.com/images_Ogage/used/200911/Ogage200911131337123977.jpg'     alt='2' /></a></a>
         </p>
         <!-- today sale tag s -->
         <p style="position:absolute; top:-2px; left:-2px;"><!--img src="http://img.halfclub.com/images_Ogage/Common/v09/images/bullet/tag_ititem.gif" width="62" height="62" alt="today sale" /-->
         <img src='http://img.halfclub.com/images_Ogage/used/200909/Ogage20090909983310536.gif'  alt='2'     />
         </p>
         <!-- today sale tag e -->
         </div>
         <div id="DISPLAY_etc3" style="display:none">
         <p>
          <!-- 이미지 사이즈 고정 width="238" height="160" -->
          <a href='/shop/detail.asp?prdid=1066731'><img src='http://img.halfclub.com/images_Ogage/used/200911/Ogage200911131023888280.jpg'     alt='3' /></a></a>
         </p>
         <!-- today sale tag s -->
         <p style="position:absolute; top:-2px; left:-2px;"><img src='http://img.halfclub.com/images_Ogage/used/200909/Ogage200909091163037636.gif'  alt='3'     /></p>
         <!-- today sale tag e -->
         </div>
         <div id="DISPLAY_etc4" style="display:none">
         <p>
          <!-- 이미지 사이즈 고정 width="238" height="160" -->
          <a href='/shop/detail.asp?prdid=1031307'><img src='http://img.halfclub.com/images_Ogage/used/200911/Ogage20091113699463109.jpg'     alt='4' /></a></a>
         </p>
         <!-- today sale tag s -->
         <p style="position:absolute; top:-2px; left:-2px;"><img src='http://img.halfclub.com/images_Ogage/used/200909/Ogage200909011117824522.gif'  alt='4'     /></p>
         <!-- today sale tag e -->
         </div>
        </div>
       </div>
       <script>
        // Box 3초롤링
        var boxInterval =document.getElementById('DISPLAY_etc1');
        var boxval = 1
        function boxOver()
        {
          clearInterval(boxInterval.move);
        }
        function boxOut()
        {
 
         boxInterval.move = setInterval(function () {
         _DISPLAY1_etc(boxval);
         },3000);
 
        }
        boxOut();

       </script>


===================================================================================