2013. 11. 1. 17:41ㆍKnowLedge/JAVASCRIPT
다시 쓰기 귀찮아서 그냥 제가 디자인해놓은거 코드 컨트롤 c v 했어요 ^^;
이런 스타일로 페이지 인식할때 저는 이코드를 사용했어요.
SetMenuID 값만 잘보시면 됩니다. div에 삽입한 id 이름이랑 동일 하면 인식됩니다요~
<!--인식되어야될 페이지마다 넣어줘야됩니다.-->
<script>
SetMenuID("menu01");
</script>
<script>
SetMenuID("menu01_1");
</script>
/*CSS*/
#s_navi{float:left; width:1000px;}
#s_top_menu{float:left; width:838px;}
#s_top_menu_align{float:left;}
#menu1{float:left; width:158px; padding-left:48px;}
#menu2{float:left; width:158px; padding-left:48px;}
#menu3{float:left; width:158px; padding-left:53px;}
#menu4{float:left; width:158px; padding-left:57px;}
#s_sub_menu_align{padding-left:158px; width:838px;}
#s_sub_menu{float:left; width:158px; height:167px; padding-left:48px;}
#s_sub_menu_text1{}
#s_sub_menu_text2{}
#s_sub_menu_text3{padding-left:5px;}
#s_sub_menu_text4{padding-left:14px;}
#s_sub_menu_box{padding-top:10px;}
<!--head script-->
<script>
function MenuRollOver(e) {
el = event.srcElement;
if(el.oversrc) {
tmp = el.src;
el.src = el.oversrc;
el.oversrc = tmp;
}
}
function InitRollOver() {
var max = document.images.length;
for(i=0; i<max; i++) {
el = document.images[i];
if(el.getAttribute("oversrc")) {
el.onmouseover = MenuRollOver;
el.onmouseout = MenuRollOver;
}
}
}
function SetMenuID(id) {
el = document.getElementById(id);
if(el.getAttribute("setsrc")) {
el.src = el.getAttribute("setsrc");
if(el.getAttribute("oversrc")) el.setAttribute("oversrc", el.getAttribute("setsrc"));
} else {
if(el.getAttribute("oversrc")) el.src = el.getAttribute("oversrc");
}
el.onmouseover = el.onmouseout = "";
}
window.onload=function() {
InitRollOver();
}
</script>
<!--head script-->
<!--로고-->
<div id="s_logo">
<a href="/index.php"><img src="<?=$path?>img/s_logo.jpg" alt="아트스테이로고"></a>
</div>
<!--로고-->
<!--대메뉴-->
<div id="s_top_menu">
<div id="s_top_menu_align">
<div id="menu1">
<a href="<?=$path?>sub1/menu01.php"><img src="<?=$path?>img/introduce.jpg" id="menu01" alt="Introduce" oversrc="<?=$path?>img/introduce_over.jpg" setsrc="<?=$path?>img/introduce_over.jpg"></a>
</div>
<div id="menu2">
<a href="<?=$path?>sub2/menu01.php"><img src="<?=$path?>img/bussiness.jpg" id="menu02" alt="bussiness" oversrc="<?=$path?>img/bussiness_over.jpg" setsrc="<?=$path?>img/bussiness_over.jpg"></a>
</div>
<div id="menu3">
<a href="<?=$path?>program/list.php"><img src="<?=$path?>img/portfolio.jpg" id="menu03" alt="portfolio" oversrc="<?=$path?>img/portfolio_over.jpg" setsrc="<?=$path?>img/portfolio_over.jpg"></a>
</div>
<div id="menu4">
<a href="<?=$path?>news/list.php"><img src="<?=$path?>img/community.jpg" id="menu04" alt="community" oversrc="<?=$path?>img/community_over.jpg" setsrc="<?=$path?>img/community_over.jpg"></a>
</div>
</div>
</div>
<!--대메뉴-->
<!--서브메뉴-->
<div id="s_sub_menu_align">
<!--Introduce-->
<div id="s_sub_menu">
<div id="s_sub_menu_text1">
<div id="s_sub_menu_box">
<a href="<?=$path?>sub1/menu01.php"><img src="<?=$path?>img/sub1_1.jpg" id="menu01_1" alt="문화마루 소개" oversrc="<?=$path?>img/sub1_1_over.jpg" setsrc="<?=$path?>img/sub1_1_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>sub1/menu02.php"><img src="<?=$path?>img/sub1_2.jpg" id="menu01_2" alt="인사말" oversrc="<?=$path?>img/sub1_2_over.jpg" setsrc="<?=$path?>img/sub1_2_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>sub1/menu03.php"><img src="<?=$path?>img/sub1_3.jpg" id="menu01_3" alt="연혁" oversrc="<?=$path?>img/sub1_3_over.jpg" setsrc="<?=$path?>img/sub1_3_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>sub1/menu04.php"><img src="<?=$path?>img/sub1_4.jpg" id="menu01_4" alt="조직도" oversrc="<?=$path?>img/sub1_4_over.jpg" setsrc="<?=$path?>img/sub1_4_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>sub1/menu05.php"><img src="<?=$path?>img/sub1_5.jpg" id="menu01_5" alt="찾아오시는길" oversrc="<?=$path?>img/sub1_5_over.jpg" setsrc="<?=$path?>img/sub1_5_over.jpg"></a>
</div>
</div>
</div>
<!--Introduce-->
<!--Bussiness-->
<div id="s_sub_menu">
<div id="s_sub_menu_text2">
<div id="s_sub_menu_box">
<a href="<?=$path?>sub2/menu01.php"><img src="<?=$path?>img/sub2_1.jpg" id="menu02_1" alt="춤공간 ARTstay" oversrc="<?=$path?>img/sub2_1_over.jpg" setsrc="<?=$path?>img/sub2_1_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>sub2/menu02.php"><img src="<?=$path?>img/sub2_2.jpg" id="menu02_2" alt="ART Project" oversrc="<?=$path?>img/sub2_2_over.jpg" setsrc="<?=$path?>img/sub2_2_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>sub2/menu03.php"><img src="<?=$path?>img/sub2_3.jpg" id="menu02_3" alt="공연 및 문화컨텐츠 기획" oversrc="<?=$path?>img/sub2_3_over.jpg" setsrc="<?=$path?>img/sub2_3_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>sub2/menu04.php"><img src="<?=$path?>img/sub2_4.jpg" id="menu02_4" alt="국고 예술문화사업" oversrc="<?=$path?>img/sub2_4_over.jpg" setsrc="<?=$path?>img/sub2_4_over.jpg"></a>
</div>
</div>
</div>
<!--Bussiness-->
<!--Portfolio-->
<div id="s_sub_menu">
<div id="s_sub_menu_text3">
<div id="s_sub_menu_box">
<a href="<?=$path?>program/list.php"><img src="<?=$path?>img/sub3_1.jpg" id="menu03_1" alt="2012" oversrc="<?=$path?>img/sub3_1_over.jpg" setsrc="<?=$path?>img/sub3_1_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>program/list2.php"><img src="<?=$path?>img/sub3_2.jpg" id="menu03_2" alt="2013" oversrc="<?=$path?>img/sub3_2_over.jpg" setsrc="<?=$path?>img/sub3_2_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>program/list3.php"><img src="<?=$path?>img/sub3_3.jpg" id="menu03_3" alt="진행예정사업" oversrc="<?=$path?>img/sub3_3_over.jpg" setsrc="<?=$path?>img/sub3_3_over.jpg"></a>
</div>
</div>
</div>
<!--Portfolio-->
<!--community-->
<div id="s_sub_menu">
<div id="s_sub_menu_text4">
<div id="s_sub_menu_box">
<a href="<?=$path?>news/list.php"><img src="<?=$path?>img/sub4_1.jpg" id="menu04_1" alt="문화마루 소개" oversrc="<?=$path?>img/sub4_1_over.jpg" setsrc="<?=$path?>img/sub4_1_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>information/list.php"><img src="<?=$path?>img/sub4_2.jpg" id="menu04_2" alt="인사말" oversrc="<?=$path?>img/sub4_2_over.jpg" setsrc="<?=$path?>img/sub4_2_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>notice/list.php"><img src="<?=$path?>img/sub4_3.jpg" id="menu04_3" alt="연혁" oversrc="<?=$path?>img/sub4_3_over.jpg" setsrc="<?=$path?>img/sub4_3_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>reply/list.php"><img src="<?=$path?>img/sub4_4.jpg" id="menu04_4" alt="조직도" oversrc="<?=$path?>img/sub4_4_over.jpg" setsrc="<?=$path?>img/sub4_4_over.jpg"></a>
</div>
<div id="s_sub_menu_box">
<a href="<?=$path?>photo/list.php"><img src="<?=$path?>img/sub4_5.jpg" id="menu04_5" alt="찾아오시는길" oversrc="<?=$path?>img/sub4_5_over.jpg" setsrc="<?=$path?>img/sub4_5_over.jpg"></a>
</div>
</div>
</div>
<!--community-->
</div><!--서브메뉴-->
'KnowLedge > JAVASCRIPT' 카테고리의 다른 글
상단메뉴만들기^^ (0) | 2014.04.14 |
---|---|
tweenmax (0) | 2013.11.01 |
모달팝업. (0) | 2013.10.28 |
오전 오후 다른 백그라운드 쓰기~ (0) | 2013.02.12 |
상단 메뉴 고정 및 클릭시 부드럽게 이동 (0) | 2013.02.12 |