레이어를 세개 만들어
첫번째 레이어엔 그림의 리스트를 뿌려줍니다.
       이 레이어의 그림 리스트에 마우스 왼쪽 버튼을 누르면 그 그림이 선택 되어
       두번째 레이어창에 그림이름이 써지구요
       마우스 오른쪽 버튼을 누르면 그 그림이 세번째 레이어창에 뜹니다.
두번째 레이어엔 선택된 그림 리스트가 뿌려집니다.
       이 그림 리스트에 마우스를 대고 버튼을 누르면 해당 그림이
       세번째 레이어에 뿌려집니다.
덤으로 여러 버튼을 이용한 슬라이드 기능, 앞 뒷 그림 보기가 있습니다.


나보다 못 생긴 사람도 이 소스를 쓸수 있습니다.
그림이 좀(ㅡ.ㅡ;;;;) 야할수도 있습니다.

미리 보기 : http://allzza.net/ver1/aboard/aboard.php?id=free_pds&dbf=18&mode=source




<style type='text/css'>
body   {font-size :9pt;color:#ffffff; }
    A:link { text-decoration:none;font-size:9pt; color:  #ffffff; font-weight:bold;}
    A:visited { text-decoration:none;font-size:9pt; color: #ffffff;font-weight:bold;}
    A:active { text-decoration:none;font-size:9pt; color: #ffffff;font-weight:bold;}
    A:hover {color: 8888bb;font-size:9pt; text-decoration:none;font-weight:bold;}  
    
body {
    scrollbar-face-color:#ffffff;scrollbar-shadow-color:#Ffffff;
    scrollbar-highlight-color:000000;scrollbar-3dlight-color:ffffff;
    scrollbar-darkshadow-color:000000;scrollbar-track-color: #ffffff;
    scrollbar-arrow-color:000000;
    }
div    {
             scrollbar-face-color:#ffffff;scrollbar-shadow-color:#Ffffff;
             scrollbar-highlight-color:000000;scrollbar-3dlight-color:ffffff;
             scrollbar-darkshadow-color:000000;scrollbar-track-color: #ffffff;
             scrollbar-arrow-color:000000;
             }    
button  {                            
     color:#ffffff; font-size: 9pt;  
     background-color:#000000;  
     border-width:1pt; border-style:solid;border-color:#ffffff;  
     width:60px;height:20px;  
     filter: Alpha(Opacity=100);                                    
    }
</style>

<script>

/***********************
제작 : 미친개
이멜 : maddog07@korea.com
홈피 : http://allzza.net/maddog
날짜 : 2003.2.20
*************************/

var i = -2;
var sel_list = new Array();
var lay_str = "<font color=ff33ff size=2><b>선택된 그림</b></font>";
var maddog_timmer = false;


var pic_list = new Array(

      //-- 그림을 추가할땐 '그림이름','그림주소', 의 형태이어야 합니다.
      //-- 그림주소 뒤엔 그것이 맨 뒤엣것이 아니라면 콤마(,)를 꼭 붙여주어야 합니다.
      //-- 그림이름이나 그림 주소에 따옴표(' ") 를 넣고 싶다면 '  또는 " 의 형태로 넣어주세요
      
      '그림1'+ ',       'http://members.tripod.co.kr/THEKINGDOMOFTHEWINDS/html/wind4_1.jpg',
      '그림2',       'http://members.tripod.co.kr/THEKINGDOMOFTHEWINDS/html/twn_4c01.jpg',
      '그림3',       'http://members.tripod.co.kr/THEKINGDOMOFTHEWINDS/image3/sister3.jpg',
      '그림4',       'http://members.tripod.co.kr/THEKINGDOMOFTHEWINDS/image3/sister2.jpg',
      '그림5',       'http://members.tripod.co.kr/THEKINGDOMOFTHEWINDS/image3/hodong-8.jpg',
      '그림6',       'http://is.lycos.co.kr/16224/278398_2.jpg',
      '그림7',       'http://is.lycos.co.kr/16224/283683_2.jpg',
      '그림8',       'http://members.tripod.co.kr/THEKINGDOMOFTHEWINDS/image3/heaven-2.jpg',
      '그림9',       'http://azumanga.new21.net/bbs/data/gallery/az.1.jpg',
      '그림10',      'http://my.dreamwiz.com/dyjs1/HOME/rei/eva_bd2.jpg',
      '그림11',      'http://my.dreamwiz.com/dyjs1/HOME/rei/01rei.jpg',
      '그림12',      'http://is.lycos.co.kr/14738/307816_2.jpg',
      '그림13',      'http://busy.x-y.net/images/10.jpg',
      '그림14',      'http://home.megapass.co.kr/~lmj5849/images/hat&conan.jpg',
      '그림15',      'http://www.gachon.ac.kr/~jykwon/images/galler25.gif',
      '그림16',      'http://www.gachon.ac.kr/~jykwon/images/galler15.gif',
      '그림17',      '+ 'http://my.netian.com/~stastarc/Images/me02-t.gif',
      '그림18',      '+ 'http://is.lycos.co.kr/16653/298450_2.jpg',
      '그림19',      'http://user.chollian.net/~km8829/kodomo2.gif',
      '그림20',      'http://www.ecomic.co.kr/data6/images/ysims.jpg',
      '그림21',      'http://polymer.chungnam.ac.kr/~anima295/images/bung1.gif',
      '그림22',      'http://is.lycos.co.kr/9581/292072_2.jpg',
      '그림23',      'http://cospre.com/main/gallery/japan/tokyo02/011.jpg',
      '그림24',      'http://is.lycos.co.kr/14738/303278_2.jpg',
      '그림25',      'http://naruki31.hihome.com/b031.jpg',
      '그림26',      'http://mystic.x-y.net/gallery/lovehina5.jpg',
      '그림27',      'http://bbs51.adwars.com/data/gallery/files/20020728111658/comiccazy_9.jpg',
      '그림28',      'http://is.lycos.co.kr/8362/204241_2.jpg',
      '그림29',      'http://is.lycos.co.kr/12796/142236_2.jpg',
      '그림30',      'http://is.lycos.co.kr/8024/181626_2.jpg'

      );
function on_load()   {
    var aaa = '<font color=ff33ff size=2><b>그림 list</b></font><br>';

    for(k=0;k<pic_list.length;k+=2)  {
       str = pic_list[k];
       aaa += '<a href='javascript:sel_pic(' + k + ')' oncontextmenu='view_pic(' + k + ');return false'>' + str + '</a><br>';
       document.all.list.innerHTML = aaa;
       }
    }

function sel_pic(num)  {
   lay_str += '<br>' + '<a href='javascript:view_pic(' + num + ')'>' + pic_list[num] + '</a>';
   sel_list.push(pic_list[num], pic_list[num +1]);
   document.all.mlist.innerHTML = lay_str;
   }
  
function view_pic(maddog)  {
   document.all.scre.innerHTML = '<center><font size=2 color=#ffffff><b>' + pic_list[maddog] + '</b></font></center><br><img src=' + pic_list[maddog + 1] + '+ ' width=640 height=430>'
   }
  

function sel_all()  {
  for(m=0;m<pic_list.length;m+=2)  sel_pic(m)
  }

function view()  {
  document.all.scre.innerHTML ='<center><font size=2 color=#ffffff><b>' + sel_list[i] + '</b></font></center><br><img src=' + sel_list[i + 1] + ' width=640 height=435>';
   }

function nex_pic() {
  if(i >= sel_list.length - 2  && sel_list.length != 0) alert('+ '다 보여줬는데유');
  else if(sel_list.length == 0)     {
        alert('선택한 그림이 엄쓔'); i = -2;
        }
  else   {
         i += 2;
         view();
         }
  }

function bef_pic()  {
  if(i <= 0 && sel_list.length != 0)  alert('엄는데유');
  else if(sel_list.length == 0)   {
         alert('선택한 그림이 엄쓔'); i = -2;
         }      
  else   {
         i -= 2;
         view();
         }
  }

function autoview()  {
  if(i>= sel_list.length - 2)  {
        alert('다에유');i = -2;autoview();
        }
  else  {
       auto();
       maddog_timmer = setTimeout('autoview()', 2000);
  }    }

function auto()   {
  i += 2;
  if(i < sel_list.length) document.all.scre.innerHTML = '<center><font size=2 color=#ffffff><b>' + sel_list[i] + '</b></font></center><br><img src=' +  sel_list[i + 1] + ' width=640 height=435>';
  }

function stop()  {
if(maddog_timmer)   {
      clearTimeout(maddog_timmer);
      maddog_timmer = false;
      }
  }
  
</script>


<body style='font-size:9px;color:red' onload='on_load()' bgcolor=$fcf57f>
<center>
<table>
<tr>
<td colspan=2 align=center height=30>
<button onclick='sel_all()' onFocus="this.blur()" onMouseOver="this.style.backgroundColor= '#ababab'"; onMouseOut="this.style.backgroundColor= '#000000'";><b>전체선택</b></button>
<button onclick='parent.location="javascript:location.reload()"' onFocus="this.blur()" onMouseOver="this.style.backgroundColor= '#ababab'"; onMouseOut="this.style.backgroundColor= '#000000'";><b>다시</b></button>
<button onclick='bef_pic()'onFocus="this.blur()" onMouseOver="this.style.backgroundColor= '#ababab'"; onMouseOut="this.style.backgroundColor= '#000000'";><b>이전</b></button>
<button onClick="nex_pic()" onFocus="this.blur()" onMouseOver="this.style.backgroundColor= '#ababab'"; onMouseOut="this.style.backgroundColor= '#000000'";><b>다음</b></button>
<button onClick="autoview()" onFocus="this.blur()" onMouseOver="this.style.backgroundColor= '#ababab'"; onMouseOut="this.style.backgroundColor= '#000000'";><b>자동</b></button>
<button onClick="stop()" onFocus="this.blur()" onMouseOver="this.style.backgroundColor= '#ababab'"; onMouseOut="this.style.backgroundColor= '#000000'";><b>stop</b></button>
</td></tr>
</table>
</center>
<div style='position:absolute;left:80;top:50;width:870;height:500;'>

<div id=list style="position:absolute;width:100;height:477;left:0;top:0;background-Color:black;overflow:auto;padding-top:5;padding-left:5">
</div>

<div id=mlist style="position:absolute;width:100;height:477;left:110;top:0;background-Color:black;overflow:auto;padding-top:5;padding-left:5">
<font color=ff33ff size=2><b>선택된 그림</b></font>
</div>

<div id=scre style="position:absolute;width:667;height:477;left:220;top:0;background-Color:black;overflow:auto;padding:5;filter:Alpha(Opercity=0)"></div>
</div>
</div>
</body>