웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
레이어를 세개 만들어
첫번째 레이어엔 그림의 리스트를 뿌려줍니다.
이 레이어의 그림 리스트에 마우스 왼쪽 버튼을 누르면 그 그림이 선택 되어
두번째 레이어창에 그림이름이 써지구요
마우스 오른쪽 버튼을 누르면 그 그림이 세번째 레이어창에 뜹니다.
두번째 레이어엔 선택된 그림 리스트가 뿌려집니다.
이 그림 리스트에 마우스를 대고 버튼을 누르면 해당 그림이
세번째 레이어에 뿌려집니다.
덤으로 여러 버튼을 이용한 슬라이드 기능, 앞 뒷 그림 보기가 있습니다.
나보다 못 생긴 사람도 이 소스를 쓸수 있습니다.
그림이 좀(ㅡ.ㅡ;;;;) 야할수도 있습니다.
미리 보기 : 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>
개판 오분전 이미지 슬라이더
2003.02.20 13:59
레이어를 세개 만들어
첫번째 레이어엔 그림의 리스트를 뿌려줍니다.
이 레이어의 그림 리스트에 마우스 왼쪽 버튼을 누르면 그 그림이 선택 되어
두번째 레이어창에 그림이름이 써지구요
마우스 오른쪽 버튼을 누르면 그 그림이 세번째 레이어창에 뜹니다.
두번째 레이어엔 선택된 그림 리스트가 뿌려집니다.
이 그림 리스트에 마우스를 대고 버튼을 누르면 해당 그림이
세번째 레이어에 뿌려집니다.
덤으로 여러 버튼을 이용한 슬라이드 기능, 앞 뒷 그림 보기가 있습니다.
나보다 못 생긴 사람도 이 소스를 쓸수 있습니다.
그림이 좀(ㅡ.ㅡ;;;;) 야할수도 있습니다.
미리 보기 : 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>
댓글 5
제목 | 글쓴이 | 날짜 |
---|---|---|
[초보 강좌] 쉬운 사칙연산을 하여보자 첫번째 [3] | ZipShin | 2003.03.27 |
책갈피로 띄운 새창내용 바로가서 보기 | RedEye | 2003.03.27 |
무료로 컵받침을 만들어주는 스크립트... -_-;; [18] | 행복한고니 | 2003.03.25 |
입력된 내용대로 출력하는 JS 소스코드 생성기 [1] | xcool | 2003.03.25 |
주민등록번호로 자동으로 생일, 성별체크 [3] | [포터]아렌티 | 2003.03.19 |
그림을 생성시키는 듯한 효과의 스크립트 [5] | 미친개 | 2003.03.17 |
비밀번호 실시간 확인 스크립트 - 제로보드 응용버전 [2] | 세죠위그이 | 2003.03.14 |
자바 스크립트 소스 올릴때 예제 쉽게 보이기 [2] | xcool | 2003.03.12 |
비밀번호 실시간(?) 확인 스크립트;;; [11] | Zective | 2003.03.09 |
[re] 비밀번호 실시간(?) 확인 스크립트;;; 개인적으로 수정 [2] | 아이쿠 | 2003.03.15 |
주민등록번호를 받아 자동으로 폼에 생일, 성별 체크해주기 [4] | jugug | 2003.03.06 |
자바스크립트로 만든 로또추첨기~ ^^ | 행복한고니 | 2003.03.05 |
다음 로그인 폼 입니다... 로그인후 원하는 곳으로!! [3] | 정성교 | 2003.03.05 |
허접하나마... 플래쉬와 동영상 받는 소스... [2] | 꽃ちゃん | 2003.03.04 |
자바스크립트로 쪼물딱 거리는 배경 이미지 [3] | 미친개 | 2003.03.02 |
즐겨찾기 추가하기
[3]
![]() | 라엘 | 2003.03.01 |
슬라이딩 Layer ( 옆에 메뉴 보이시죠, 비슷꾸리한거 ) [8] | 이남두 | 2003.02.26 |
두군데 IFRAME 위치에 내용 동시출력하기-프레임에도 가능 [4] | 깜보 | 2003.02.22 |
MS홈에 쓰이는 오른쪽메뉴 툴바
[13]
![]() | Kortion | 2003.02.22 |
개판 오분전 이미지 슬라이더 [5] | 미친개 | 2003.02.20 |