미리보기 : 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();","작은버튼");?>