왼쪽 메뉴 include 사용시 마우스 over 효과내기 위한 소스 > 기술자료

• 목록
• 게시판 리스트 옵션
  • 검색

### 함수설명 ###
request.servervariables("HTTP_url") : 홈페이지 주소중 ***.com 등을 제외한 경로

/greet.asp  : 실제 열린 페이지
  예)  https://www.happyjung.com/greet.asp 인경우

각 메뉴를 아래와 같이 php코드처리하면 각 페이지가 열린후 왼쪽메뉴가 해당위치를 가르키고 있어서 직독성을 향상시킬수 있습니다.


### 일반적인 방식 ###
<table border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td><a href="greet.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('left01','','left01_ov.gif',1)"><img src="left01.gif" name="left01" border="0" id="left01"></a></td>
  </tr>
  <tr>
    <td><a href="history.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('left02','','left02_ov.gif',1)"><img src="left02.gif" name="left02" border="0" id="left02"></a></td>
  </tr>
</table>


### 해피정닷컴 제안 ###
<table border="0" cellpadding="0" cellspacing="0">
<% if request.servervariables("HTTP_url") = "/greet.asp" then %>
  <tr>
    <td><a href="greet.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('left01','','left01.gif',1)"><img src="left01_ov.gif" name="left01" border="0" id="left01"></a></td>
  </tr>
<% else %>
  <tr>
    <td><a href="greet.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('left01','','left01_ov.gif',1)"><img src="left01.gif" name="left01" border="0" id="left01"></a></td>
  </tr>
<% end if %>
<% if request.servervariables("HTTP_url") = "/history.asp" then %>
  <tr>
    <td><a href="history.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('left02','','left02.gif',1)"><img src="left02_ov.gif" name="left02" border="0" id="left02"></a></td>
  </tr>
<% else %>
  <tr>
    <td><a href="history.asp" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('left02','','left02_ov.gif',1)"><img src="left02.gif" name="left02" border="0" id="left02"></a></td>
  </tr>
<% end if %>
</table>


### 실무응용 ###

<% if request.servervariables("HTTP_url") = "/greet.asp" then %>
<% else %>
<% end if %>

<%
' 업로드 컴포넌트 사용안할때만
' 기존에 사용하던 방식 ... 아래방식이 더 좋음
if request("uid") = "maintenance" then
%>
<% else %>
<% end if %>

<%
' 새로이 변경된 방식  2013-02-07 추가
dim hp_leftover_uid
hp_leftover_uid = Request.QueryString("uid")
if hp_leftover_uid = "maintenance" then
%>
<% else %>
<% end if %>



CSS 활용법 ( 2014-09-09 )
<style>
.leftmenu_ov { background-image:url(/v1/images/leftmenu_bg.gif); background-repeat:repeat-x; height:30px; font-weight:bold; padding: 2px 0 0 15px; color:#ffffff; width:180px; text-align:left; }
a:link.leftmenu_ov2     {text-decoration: none; color: #ffffff; background-repeat:repeat-x; }
a:active.leftmenu_ov2     {text-decoration: none; color: #ffffff; background-repeat:repeat-x; }
a:visited.leftmenu_ov2    {text-decoration: none; color: #ffffff; background-repeat:repeat-x; }
a:hover.leftmenu_ov2     {text-decoration:underline; color:#FFFF00; background-repeat:repeat-x; }

.leftmenu_no { background-image:url(/v1/images/leftmenu_bg2.gif); background-repeat:repeat-x; height:30px; padding: 3px 0 0 15px; width:180px; text-align:left; }
a:link.leftmenu_no2     {text-decoration: none; color: #000000; background-repeat:repeat-x; }
a:active.leftmenu_no2     {text-decoration: none; color: #000000; background-repeat:repeat-x; }
a:visited.leftmenu_no2    {text-decoration: none; color: #000000; background-repeat:repeat-x; }
a:hover.leftmenu_no2     {text-decoration:underline; color:#1e71cf; background-repeat:repeat-x; }
</style>

<% if request.servervariables("HTTP_url") = "/greet.asp" then %>
<div class="leftmenu_ov"><a href="greet.asp" class="leftmenu_ov2"><img src="left_portfolio_02_ov.gif" alt="메뉴1" border="0"></a></div>
<% else %>
<div class="leftmenu_no"><a href="greet.asp class="leftmenu_no2"><img src="left_portfolio_02.gif" alt="메뉴" border="0"></a></div>
<% end if %>


참고자료
http://kin.naver.com/knowhow/detail.nhn?docId=190299