웹마스터 팁

제목이 좀 이상하지만, 홈페이지를 만들때, 메뉴의 부분을 많이 바꿀 필요가 있습니다.
아시는 분은 잘 아시겠지만, 그거 하나 수정하려면 모든 페이지의 메뉴부분을 수정해야하지요..
그래서 조금 더 머리를 쓰면 모든 페이지에 나타나는 메뉴부분을 따로 떼어서 include로 불러오면 간단하지요..
include로 불러오면 모든 페이지의 메뉴부분이 동일하게 됩니다. 수정하기 쉽죠..
그러나, 그 메뉴가 롤오버 이미지 같은 메뉴이면, 그 페이지의 내용이면 그 메뉴부분의 그림이 선택되어 있는 모습이면 더 좋을 것 같다는 생각이 듭니다.

이해가 잘 되시는지 모르겠습니다.
우선 예제의 페이지는 http://www.khugene.com/board/main_board.htm 에 들어가시면 대충 메뉴부분이 두 군데가 있습니다. 메뉴 부분에다 마우스를 가져가면 롤오버메뉴로 바뀌지만, 현재 그 부분의 페이지의 메뉴버튼은 이미 롤오버가 되어 있습니다. 다른 메뉴 페이지에 가면 그 메뉴의 그림만 먼저 롤오버가 되어 있고, 다른 부분의 메뉴는 그대로 되어 있습니다.
원래 이렇게 만들려면 소스를 여러개 만들어서 불러와야 하지만, 전 간단하게 하나의 소스로 해결을 했습니다. 더 간단한 소스가 있으시면 알려주세요..

menu_left.php 소스 ; 아래의 소스는 중복되는 메뉴가 들어가는 부분에 넣어줍니다.
각 홈페이지의 구조에 따라 그 모습이 많이 달라져야 겠죠? 특히, img 태그 부분이 중요합니다.
-----------------------------------------------------------
<tr valign="top">
          <td height="28" width="152" align="center"><a href=<?=$i1_c_link ?>  onfocus='this.blur()' <? echo $i1_c_1;?>><img name="research" border="0" src=<? echo $i1_c_2;?>></a></td>
        </tr>
        <tr valign="top">
          <td height="28" width="152" align="center"><a href=<?=$i2_c_link ?>  onfocus='this.blur()' <? echo $i2_c_1;?>><img name="member" border="0" src=<? echo $i2_c_2;?>></a></td>
        </tr>
        <tr valign="top">
          <td height="28" width="152" align="center"><a href=<?=$i3_c_link ?>  onfocus='this.blur()' <? echo $i3_c_1;?> ><img name="news" border="0" src=<? echo $i3_c_2;?>></a></td>
        </tr>
        <tr valign="top">
          <td height="28" width="152" align="center"><a href=<?=$i4_c_link ?>  onfocus='this.blur()' <? echo $i4_c_1;?> ><img name="board" border="0" src=<? echo $i4_c_2;?>></a></td>
        </tr>
        <tr valign="top">
          <td height="28" width="152" align="center"><a href=<?=$i5_c_link ?>  onfocus='this.blur()' <? echo $i5_c_1;?>><img name="pds" border="0" src=<? echo $i5_c_2;?>></a></td>
        </tr>
                <tr valign="top">
          <td height="28" width="152" align="center"><a href=<?=$i6_c_link ?>  onfocus='this.blur()' <? echo $i6_c_1;?>><img name="sites" border="0" src=<? echo $i6_c_2;?>></a></td>
        </tr>
        <tr valign="top">
          <td height="28" width="152" align="center"><a href=<?=$i7_c_link ?>  onfocus='this.blur()' <? echo $i7_c_1;?>><img name="contact" border="0" src=<? echo $i7_c_2;?>></a></td>
        </tr>
-------------------------------------------------------------------


menu_left_control.php 소스 ; 각 메뉴가 들어가는 페이지마다 include로 불어오면 됩니다.
즉, 롤오버 메뉴를 컨트롤하는 부분입니다.
------------------------------------------------------------
<?
/// 왼쪽 메뉴 링크주소 설정
$i1_c_link = "$url_pmrc/research/research.htm" ; /// 왼쪽메뉴 1번
$i2_c_link = "$url_pmrc/member/member.htm" ; /// 왼쪽메뉴 2번
$i3_c_link = "bbs/zboard.php?id=pmrc_news" ; /// 왼쪽메뉴 3번
$i4_c_link = "bbs/zboard.php?id=pmrc_freeboard" ; /// 왼쪽메뉴 4번
$i5_c_link = "bbs/zboard.php?id=pmrc_article" ; /// 왼쪽메뉴 5번
$i6_c_link = "$url_pmrc/intro/link.htm" ; /// 왼쪽메뉴 6번
$i7_c_link = "$url_pmrc/intro/contact.htm" ; /// 왼쪽메뉴 7번

/// 왼족 메뉴 롤오버이미지 설정
/// 왼쪽 메뉴 1번 그림
$i1 = "$url_pmrc/image/l_menu/left_menu_01.gif border=0 ID=i1 style=filter:blendTrans(duration=0.4) alt='About PMRC research' ";
$i1_01 = "onMouseOver=bt('i1','$url_pmrc/image/l_menu/left_menu_01-over.gif') onMouseOut=bt('+ 'i1','$url_pmrc/image/l_menu/left_menu_01.gif') ";
$i1_02 = "$url_pmrc/image/l_menu/left_menu_01-over.gif border=0 alt='About PMRC research' ";

/// 왼쪽 메뉴 2번 그림
$i2 = "$url_pmrc/image/l_menu/left_menu_05.gif border=0 ID=i2 style=filter:blendTrans(duration=0.4) alt='PMRC members' ";
$i2_01 = "onMouseOver=bt('i2','$url_pmrc/image/l_menu/left_menu_05-over.gif') onMouseOut=bt('i2'+ ','$url_pmrc/image/l_menu/left_menu_05.gif') ";
$i2_02 = "$url_pmrc/image/l_menu/left_menu_05-over.gif border=0 alt='PMRC members' ";

/// 왼쪽 메뉴 3번 그림
$i3 = "$url_pmrc/image/l_menu/left_menu_07.gif border=0 ID=i3 style=filter:blendTrans(duration=0.4) alt='PMRC news' ";
$i3_01 = "onMouseOver=bt('i3','$url_pmrc/image/l_menu/left_menu_07-over.gif') onMouseOut=bt('i3','$url_pmrc/image/l_menu/left_menu_07.gif') ";
$i3_02 = "$url_pmrc/image/l_menu/left_menu_07-over.gif border=0 alt='PMRC news' ";

/// 왼쪽 메뉴 4번 그림
$i4 = "$url_pmrc/image/l_menu/left_menu_11.gif border=0 ID=i4 style=filter:blendTrans(duration=0.4) alt='PMRC bulletin board' ";
$i4_01 = "onMouseOver=bt('i4','$url_pmrc/image/l_menu/left_menu_11-over.gif') onMouseOut=bt('i4','$url_pmrc/image/l_menu/left_menu_11.gif') ";
$i4_02 = "$url_pmrc/image/l_menu/left_menu_11-over.gif border=0 alt='PMRC bulletin board' ";

/// 왼쪽 메뉴 5번 그림
$i5 = "$url_pmrc/image/l_menu/left_menu_pds_01.gif border=0 ID=i5 style=filter:blendTrans(duration=0.4) alt='PMRC article' ";
$i5_01 = "onMouseOver=bt('i5','$url_pmrc/image/l_menu/left_menu_pds_01-over.gif') onMouseOut=bt('i5','$url_pmrc/image/l_menu/left_menu_pds_01.gif') ";
$i5_02 = "$url_pmrc/image/l_menu/left_menu_pds_01-over.gif border=0 alt='PMRC article' ";

/// 왼쪽 메뉴 6번 그림
$i6 = "$url_pmrc/image/l_menu/left_menu_09.gif border=0 ID=i6 style=filter:blendTrans(duration=0.4) alt='PMRC related sites' ";
$i6_01 = "onMouseOver=bt('i6','$url_pmrc/image/l_menu/left_menu_09-over.gif') onMouseOut=bt('i6','$url_pmrc/image/l_menu/left_menu_09.gif') ";
$i6_02 = "$url_pmrc/image/l_menu/left_menu_09-over.gif border=0 alt='PMRC related sites' ";

/// 왼쪽 메뉴 7번 그림
$i7 = "$url_pmrc/image/l_menu/left_menu_13.gif border=0 ID=i7 style=filter:blendTrans(duration=0.4) alt='Contact us' ";
$i7_01 = "onMouseOver=bt('i7','$url_pmrc/image/l_menu/left_menu_13-over.gif') onMouseOut=bt('i7','$url_pmrc/image/l_menu/left_menu_13.gif') ";
$i7_02 = "$url_pmrc/image/l_menu/left_menu_13-over.gif border=0 alt='Contact us' ";


if ($i_control == 1) {
        $i1_c_1 = " " ;             $i1_c_2 = $i1_02 ;         $i2_c_1 = $i2_01 ;         $i2_c_2 = $i2;         $i3_c_1 = $i3_01 ;         $i3_c_2 = $i3;         $i4_c_1 = $i4_01 ;         $i4_c_2 = $i4;
        $i5_c_1 = $i5_01 ;         $i5_c_2 = $i5;         $i6_c_1 = $i6_01 ;         $i6_c_2 = $i6;
                $i7_c_1 = $i7_01 ;         $i7_c_2 = $i7;
        }
elseif ($i_control == 2) {
        $i1_c_1 = $i1_01 ;         $i1_c_2 = $i1 ;         $i2_c_1 = "" ;         $i2_c_2 = $i2_02;
        $i3_c_1 = $i3_01 ;         $i3_c_2 = $i3;         $i4_c_1 = $i4_01 ;         $i4_c_2 = $i4;
        $i5_c_1 = $i5_01 ;         $i5_c_2 = $i5;         $i6_c_1 = $i6_01 ;         $i6_c_2 = $i6;
                $i7_c_1 = $i7_01 ;         $i7_c_2 = $i7;
        }
elseif ($i_control == 3) {
        $i1_c_1 = $i1_01 ;         $i1_c_2 = $i1 ;         $i2_c_1 = $i2_01 ;         $i2_c_2 = $i2;
        $i3_c_1 = "" ;         $i3_c_2 = $i3_02;         $i4_c_1 = $i4_01 ;         $i4_c_2 = $i4;
        $i5_c_1 = $i5_01 ;         $i5_c_2 = $i5;         $i6_c_1 = $i6_01 ;         $i6_c_2 = $i6;
                $i7_c_1 = $i7_01 ;         $i7_c_2 = $i7;
        }
elseif ($i_control == 4) {
        $i1_c_1 = $i1_01 ;     $i1_c_2 = $i1 ;         $i2_c_1 = $i2_01 ;         $i2_c_2 = $i2;
        $i3_c_1 = $i3_01 ;         $i3_c_2 = $i3;         $i4_c_1 = "" ;         $i4_c_2 = $i4_02;
        $i5_c_1 = $i5_01 ;         $i5_c_2 = $i5;         $i6_c_1 = $i6_01 ;         $i6_c_2 = $i6;
                $i7_c_1 = $i7_01 ;         $i7_c_2 = $i7;
        }
elseif ($i_control == 5) {
        $i1_c_1 = $i1_01 ;     $i1_c_2 = $i1 ;         $i2_c_1 = $i2_01 ;         $i2_c_2 = $i2;
        $i3_c_1 = $i3_01 ;         $i3_c_2 = $i3;         $i4_c_1 = $i4_01 ;         $i4_c_2 = $i4;
        $i5_c_1 = "" ;         $i5_c_2 = $i5_02;         $i6_c_1 = $i6_01 ;         $i6_c_2 = $i6;
                $i7_c_1 = $i7_01 ;        $i7_c_2 = $i7;
        }
elseif ($i_control == 6) {
        $i1_c_1 = $i1_01 ;     $i1_c_2 = $i1 ;         $i2_c_1 = $i2_01 ;         $i2_c_2 = $i2;
        $i3_c_1 = $i3_01 ;         $i3_c_2 = $i3;         $i4_c_1 = $i4_01 ;         $i4_c_2 = $i4;
        $i5_c_1 = "$i5_01" ;         $i5_c_2 = $i5;         $i6_c_1 = "" ;         $i6_c_2 = $i6_02;
                $i7_c_1 = $i7_01 ;         $i7_c_2 = $i7;
        }
elseif ($i_control == 7) {
        $i1_c_1 = $i1_01 ;     $i1_c_2 = $i1 ;         $i2_c_1 = $i2_01 ;         $i2_c_2 = $i2;
        $i3_c_1 = $i3_01 ;         $i3_c_2 = $i3;         $i4_c_1 = $i4_01 ;         $i4_c_2 = $i4;
        $i5_c_1 = "$i5_01" ;         $i5_c_2 = $i5;         $i6_c_1 = $i6_01 ;         $i6_c_2 = $i6;
                $i7_c_1 = "" ;         $i7_c_2 = $i7_02;
        }
else {
        $i1_c_1 = $i1_01 ;     $i1_c_2 = $i1 ;         $i2_c_1 = $i2_01 ;         $i2_c_2 = $i2;
        $i3_c_1 = $i3_01 ;     $i3_c_2 = $i3;         $i4_c_1 = $i4_01 ;         $i4_c_2 = $i4;
        $i5_c_1 = $i5_01 ;     $i5_c_2 = $i5;         $i6_c_1 = $i6_01 ;         $i6_c_2 = $i6;
                $i7_c_1 = $i7_01 ;     $i7_c_2 = $i7;
        }

?>
-----------------------------------------------------------

각 페이지의 제일 상위에 들어갈 내용 ; 제로보드에 들어가는 삽입되는 부분의 제일 상위에 보면 아래와 비슷한 부분이 있습니다.
-----------------------------------------------------------
<?
   $_zb_url = "제로보드주소/bbs/";
   $_zb_path = "제로보드 절대주소/html/bbs/";
   include $_zb_path."outlogin.php";

/// 이 아래부분을 넣어주세요.
$url_pmrc = "홈페이지 URL"; ///홈페이지 주소입력
$i_control=2; /// 왼쪽 메뉴 설정 변수값 <--- 여기에서 번호 지정을 해주면 그 메뉴의 그림이 이미 롤오버된 이미지로 나오게 됩니다. 현재는 2번 그림이 이미 롤오버된 모양, 만약 하나도 이미 지정되지 않게 하기 위해서는 0을 넣으면 됩니다.
include $path_pmrc."/menu_left_control.php"; /// 왼쪽메뉴 인쿠르드 <-- 롤오버 이미지를 컨트롤하기 위해서 입니다.
?>
------------------------------------------------------------

간편한 홈페이지 구축에 잘 사용하세요..
제목 글쓴이 날짜
허접한 풀다운 메뉴 소스입니다. (유용한 팁 일지는 모르겠네요.) [9] file tintintm 2004.03.23
버튼 만들기 [1] 旻天 2004.03.23
MS agent online object - Default Character 인 Merlin Action 추가 [2] 꽃ちゃん 2004.03.19
움직이는 타이틀바 [4] 김동현 2004.03.18
웹브라우저 상태바가 밑으로 내려오는 소스 [5] 프리서버 2004.03.16
브라우져(윈도우) 창의 크기(사이즈)를 조절하는 소스입니다 [5] 나야 2004.03.15
프레임사이트에서 자식 프레임(URL)로 직접 치고 들어 올경우 다시 프레임 부모로 돌려보내는 소스 나야 2004.03.15
전체 include menu 만들기(롤오버 이미지 사용) [4] Neoyoung 2004.03.14
[초간단 자바스크립트!] 서브메뉴 만들기...~ [11] ∑Ztxy 2004.03.10
뉴스티커 [16] file zero 2004.03.10
보안문서 만들기 [5] 민우주 2004.03.07
팝업 창 띄우고 어미창 사라지게 하는 소스 [5] piasol 2004.03.06
방문자 OS보여주기 [5] 구조반 2004.03.05
벅스뮤직 음악듣기 및 시작 정지 버튼 넣기(기타 음악파일도...) [3] 카멜롯™ 2004.03.04
회원 가입 페이지 이젠 끝이다 [5] 2004.03.03
우뚜같은 포워딩 페이지에서 프레임 깨기.(프레임 없애기) [17] 김영성 2004.02.19
벅스뮤직 플레이어 스크립트 추출기 [4] 이녀석 2004.02.16
XML+JS 연동 다중셀렉트 투헤븐 2004.02.16
BGM Player (배경 음악) [17] 장진석 2004.02.16
페이지 내에 주소창 달기 [1] piasol 2004.02.09