웹마스터 팁
page_full_width" class="col-xs-12" |cond="$__Context->page_full_width">
버튼 만들기
2004.03.23 01:51
미리보기 : http://kureum.net/html/web_tip/button/button.php
다운로드 : http://kureum.net/bbs/data/web_tip/button.zip
어디다 올려야 할지 모르겠네요.
가장 주는 아무래도 자바스크립트이기에...
단지 사용을 쉽게 할 수 있도록 PHP함수로 만들어 놓았을 뿐입니다.
먼저, 버튼에 쓰인 이미지, button.js 파일, 함수 소스는 위의 다운로드에 포함돼 있습니다.
제가 만든 것은 아니고,
사용하기 편리하게 손을 봤습니다.
## 장점 : 마우스 클릭 시 뭔가 이상함
버튼 하나를 만들기 위해 뽀샵을 전혀 할 필요 없음
onClick 속성을 줌으로써 못하는게 거의 없음
## 단점 : 그까짓 버튼 하나를 위해 그 많은 html 소스를 서버에서 뿌려줘야 하다니!
제 홈에 쓰인 모든 스킨의 버튼은 아래 함수로 작성돼 있습니다.
1. 버튼이 들어갈 페이지에 스타일시트는 아래와 같이 주세요.
====================================================================================
<STYLE type=text/css>
.btnText {border-color: #F1F1F1; font-family: 굴림, Arial, Helvetica; font-size: 9pt; cursor: hand;color=black}
.setDown1 { text-align: center; background-image: url("./images/btn1_down_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:4px;}
.setOver1 { text-align: center; background-image: url("./images/btn1_over_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:2px;}
.setOut1 { text-align: center; background-image: url("./images/btn1_normal_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:2px;}
.setDown2 { text-align: center; background-image: url("./images/btn2_down_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:3px;}
.setOver2 { text-align: center; background-image: url("./images/btn2_over_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:2px;}
.setOut2 { text-align: center; background-image: url("./images/btn2_normal_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:2px;}
</STYLE>
====================================================================================
2. 스크립트 파일도 넣어줍니다.
<SCRIPT Language="JavaScript" src="./button.js"></SCRIPT>
두 개의 버튼을 클릭했을 때 실행될 자바스크립트(예시로 넣습니다.)
<SCRIPT>
function go_merong_1(){
alert("큰 버튼 눌렀을 때~");
}
function go_merong_2(){
alert("작은 버튼 눌렀을 때~");
}
</SCRIPT>
3. 버튼 만들어주는 함수
====================================================================================
function mk_btn($btn_width,$btn_align,$btn_id,$btn_num,$btn_onclick,$btn_title){
$btn_title_html = strip_tags($btn_title);
echo("
<TABLE cellspacing=0 cellpadding=0 border=0 style="cursor:hand" title="$btn_title_html" onClick="$btn_onclick" align=$btn_align>
<TR>
<TD onMouseDown="javascript:setDown('$btn_id',$btn_num)" onMouseUp="javascript:setOut('$btn_id',$btn_num);" onMouseOut="javascript:setOut('$btn_id',$btn_num);"><IMG name=".$btn_id."_left src=/images/btn".$btn_num."_normal_left.gif></TD>
<TD width=$btn_width align=center id="$btn_id" class=setOut".$btn_num." background=/images/btn".$btn_num."_normal_bg.gif onMouseOver="javascript:setOver('$btn_id',$btn_num);" onMouseDown="javascript:setDown('$btn_id',$btn_num);" onMouseUp="javascript:setOut('$btn_id',$btn_num);" onMouseOut="javascript:setOut('$btn_id',$btn_num);" > <span class=BtnText><nobr>$btn_title</nobr></span></TD>
<TD onMouseDown="javascript:setDown('$btn_id',$btn_num);" onMouseUp="javascript:setOut('$btn_id',$btn_num);" onMouseOut="javascript:setOut('$btn_id',$btn_num);"> <IMG name=".$btn_id."_right src=/images/btn".$btn_num."_normal_right.gif></TD>
</TR>
</TABLE>
");
}
====================================================================================
4. 함수 설명 및 사용법
■ 함수 설명
mk_btn($btn_width,$btn_align,$btn_id,$btn_num,$btn_onclick,$btn_title)
$btn_width : 버튼 가로 크기[pixel]
$btn_align : 버튼 정렬[left/center/right]
$btn_id : 버튼식별자 - 다른 버튼들과의 단순 구분, 영문
$btn_num : 버튼 종류[1-작은버튼/2-큰버튼]
$btn_onclick : onClick시 행할 스크립트
$btn_title : 버튼 타이틀
■ 사용법
<?mk_btn("60","center","Alert_1",1,"javascript:go_merong_1();","큰버튼");?>
<?mk_btn("60","center","Alert_2",2,"javascript:go_merong_2();","작은버튼");?>
다운로드 : http://kureum.net/bbs/data/web_tip/button.zip
어디다 올려야 할지 모르겠네요.
가장 주는 아무래도 자바스크립트이기에...
단지 사용을 쉽게 할 수 있도록 PHP함수로 만들어 놓았을 뿐입니다.
먼저, 버튼에 쓰인 이미지, button.js 파일, 함수 소스는 위의 다운로드에 포함돼 있습니다.
제가 만든 것은 아니고,
사용하기 편리하게 손을 봤습니다.
## 장점 : 마우스 클릭 시 뭔가 이상함
버튼 하나를 만들기 위해 뽀샵을 전혀 할 필요 없음
onClick 속성을 줌으로써 못하는게 거의 없음
## 단점 : 그까짓 버튼 하나를 위해 그 많은 html 소스를 서버에서 뿌려줘야 하다니!
제 홈에 쓰인 모든 스킨의 버튼은 아래 함수로 작성돼 있습니다.
1. 버튼이 들어갈 페이지에 스타일시트는 아래와 같이 주세요.
====================================================================================
<STYLE type=text/css>
.btnText {border-color: #F1F1F1; font-family: 굴림, Arial, Helvetica; font-size: 9pt; cursor: hand;color=black}
.setDown1 { text-align: center; background-image: url("./images/btn1_down_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:4px;}
.setOver1 { text-align: center; background-image: url("./images/btn1_over_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:2px;}
.setOut1 { text-align: center; background-image: url("./images/btn1_normal_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:2px;}
.setDown2 { text-align: center; background-image: url("./images/btn2_down_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:3px;}
.setOver2 { text-align: center; background-image: url("./images/btn2_over_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:2px;}
.setOut2 { text-align: center; background-image: url("./images/btn2_normal_bg.gif"); line-height: 140%;font-size: 9pt; border:0px; margin:0px; padding-top:2px;}
</STYLE>
====================================================================================
2. 스크립트 파일도 넣어줍니다.
<SCRIPT Language="JavaScript" src="./button.js"></SCRIPT>
두 개의 버튼을 클릭했을 때 실행될 자바스크립트(예시로 넣습니다.)
<SCRIPT>
function go_merong_1(){
alert("큰 버튼 눌렀을 때~");
}
function go_merong_2(){
alert("작은 버튼 눌렀을 때~");
}
</SCRIPT>
3. 버튼 만들어주는 함수
====================================================================================
function mk_btn($btn_width,$btn_align,$btn_id,$btn_num,$btn_onclick,$btn_title){
$btn_title_html = strip_tags($btn_title);
echo("
<TABLE cellspacing=0 cellpadding=0 border=0 style="cursor:hand" title="$btn_title_html" onClick="$btn_onclick" align=$btn_align>
<TR>
<TD onMouseDown="javascript:setDown('$btn_id',$btn_num)" onMouseUp="javascript:setOut('$btn_id',$btn_num);" onMouseOut="javascript:setOut('$btn_id',$btn_num);"><IMG name=".$btn_id."_left src=/images/btn".$btn_num."_normal_left.gif></TD>
<TD width=$btn_width align=center id="$btn_id" class=setOut".$btn_num." background=/images/btn".$btn_num."_normal_bg.gif onMouseOver="javascript:setOver('$btn_id',$btn_num);" onMouseDown="javascript:setDown('$btn_id',$btn_num);" onMouseUp="javascript:setOut('$btn_id',$btn_num);" onMouseOut="javascript:setOut('$btn_id',$btn_num);" > <span class=BtnText><nobr>$btn_title</nobr></span></TD>
<TD onMouseDown="javascript:setDown('$btn_id',$btn_num);" onMouseUp="javascript:setOut('$btn_id',$btn_num);" onMouseOut="javascript:setOut('$btn_id',$btn_num);"> <IMG name=".$btn_id."_right src=/images/btn".$btn_num."_normal_right.gif></TD>
</TR>
</TABLE>
");
}
====================================================================================
4. 함수 설명 및 사용법
■ 함수 설명
mk_btn($btn_width,$btn_align,$btn_id,$btn_num,$btn_onclick,$btn_title)
$btn_width : 버튼 가로 크기[pixel]
$btn_align : 버튼 정렬[left/center/right]
$btn_id : 버튼식별자 - 다른 버튼들과의 단순 구분, 영문
$btn_num : 버튼 종류[1-작은버튼/2-큰버튼]
$btn_onclick : onClick시 행할 스크립트
$btn_title : 버튼 타이틀
■ 사용법
<?mk_btn("60","center","Alert_1",1,"javascript:go_merong_1();","큰버튼");?>
<?mk_btn("60","center","Alert_2",2,"javascript:go_merong_2();","작은버튼");?>
댓글 1
제목 | 글쓴이 | 날짜 |
---|---|---|
아이피를 숨겨보자 [5] | SeePaGae | 2004.01.23 |
(중복) 개인서버 운영하시는분들.. 좋은소스? [14] | SeePaGae | 2004.01.22 |
제로카운터 쉽게 설치하기 [26] | 대류 | 2004.01.17 |
제로보드 인크루드시 $DOCUMENT_ROOT 참조 [7] | 이경훈 | 2004.01.14 |
unset / isset 를 알아보자. [2] | 씨파개 | 2004.01.12 |
include에서 Failed opening 발생문제 [4] | 이경훈 | 2004.01.10 |
[팁&테크] 텍스트파일에서 디비 입력하기. [1] | 김영진 | 2004.01.09 |
GET으로 받는 변수가 하나일 때, 주소?변수값 사용하기 [5] | 버찌 | 2004.01.05 |
일정시간 이 지난 게시물 정리하기.. [3] | 명동욱 | 2003.12.24 |
[MySQL] Set 형 자료형.. [3] | 서영태 | 2003.12.24 |
나도 @ 도메인 서비스를 해보자 [29] | 김병철 | 2003.12.19 |
[제로카운터] 자동으로 DB를 지우자. (IP와 referer 5일 분량만 남기기) [4] | 이주경 | 2003.12.17 |
카일레라 서버 페이지 만들기. [2] | teslaMINT | 2003.12.09 |
편법을 이용한 inlive 방송여부 체크 [7] | 심심타 | 2003.12.09 |
DB에서 받은 데이터 배열로 하나씩 뿌리기 | LetMeLove | 2003.12.09 |
세션을 이용한 관리자 모드 구축하기 3강 [6] | 박정호 | 2003.12.09 |
세션을 이용한 관리자 모드 구축하기 2강 [6] | 박정호 | 2003.12.09 |
세션을 이용한 관리자 모드 구축하기 1강(중복?) | 박정호 | 2003.12.09 |
쉘 명령어 사용하기 [11] | 9000㎒ | 2003.12.02 |
랜덤 배경음악 만들기. [6] | 폭주나루 | 2003.12.01 |