웹마스터 팁
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
-
장성우
2003.02.25 10:32
-
세죠위그이
2003.02.20 17:47
25,26은 러브히나.. 쿨럭;
그림 중간에 깨진것 있습니다.. -
Vichara
2003.02.20 20:45
야하다고 해서 당장봤는데 왜 바람의 나라 ㅡㅡ;; -
미친개
2003.02.21 02:10
야 - 揶 -
▷◁Wesee▷◁
2003.03.01 15:15
저 자동차는 바로... 허걱 허걱 그 바로바로... 노란색.. 말하는(;;)자동차
제목 | 글쓴이 | 날짜 |
---|---|---|
올블로그 명예의 전당글 가져오기 (캐쉬기능추가) [2] | 유창화 | 2006.04.17 |
올블로그(http://www.allblog.net/Home/) 명예의 전당글 가져오기 [2] | 유창화 | 2006.04.17 |
네이버 openapi 사용하여 쇼핑검색 만들기 [3] | 유창화 | 2006.04.13 |
네이버 openapi 사용하여 한국어사전 만들기 | 유창화 | 2006.04.13 |
네이버 openapi 사용하여 실시간 인기검색어 보여주기 [3] | 유창화 | 2006.04.13 |
유용한 PHP성능 개선을 위한 팁 [4] | 이태라 | 2006.04.11 |
[PHP 동영상강의] 46. 다중검색기 제작해보기 [8] | 서기 | 2006.04.06 |
[PHP 동영상강의] 45. 우편번호 검색기 제작해보기 [12] | 서기 | 2006.03.30 |
[PHP 동영상강의] 44. 즐겨찾기 제작하기 [7] | 서기 | 2006.03.21 |
[PHP 동영상강의] 43. 공용함수의 제작/쿠키로그인(보안) [4] | 서기 | 2006.03.16 |
[PHP 동영상강의] 42. 세션의 사용 [4] | 서기 | 2006.03.02 |
[PHP 동영상강의] 41. 추천사이트(북마크)프로그램 만들기 [4] | 서기 | 2006.02.27 |
[PHP 동영상강의] 40. 파일의 업로드 [7] | 서기 | 2006.02.27 |
[PHP 동영상강의] 39. 회원가입/로그인 처리 [8] | 서기 | 2006.02.06 |
[PHP 동영상강의] 38. 삭제시 비밀번호 물어보기 [6] | 서기 | 2006.01.26 |
[PHP 동영상강의] 37. 기본적인 페이징 처리하기 [7] | 서기 | 2006.01.21 |
[PHP 동영상강의] 36. 사용자 정의함수 심화학습 [8] | 서기 | 2006.01.21 |
[PHP 동영상강의] 35. 사용자 정의함수의 사용 [8] | 서기 | 2006.01.16 |
[PHP 동영상강의] 34. 자료를 수정해보자. [8] | 서기 | 2006.01.14 |
[PHP 동영상강의] 33. 자료를 삭제해보자. [6] | 서기 | 2006.01.12 |
아.. 추억의.. 추억의..
이미지 어디서 구하셨을까..
홈페이지에 깔끔하게 적용시켜 놓으면 보기 좋겠군요