XP menu button 만들기


Home > Document > Web design > Menu > Button > XP button

XP button?



HTML CSS DHTML JavaScript ASP XhtML

위와 같은 button을 제가 XP button 이라고 표현했는데 이 단어가 적절한지는 잘 모르겠습니다. 언제 부터인가 소위 Portal site 라고 불리우는 몇 몇 사이트를 가 보면 button 위에 mouse를 올리면 button 상단에 빨강, 파랑 등의 알록 달록한 border가 생기는 메뉴가 종종 보이더군요. 그래서 '이게 요즘 유행인가보다.' 라고 생각하고 그냥 넘겼는데(이 사람은 유행이라면 죽어라고 안 따라하고, 하고 있던 것도 유행이면 그만두는 요상한 버릇이 있음) Widnows XP 의 interface 를 보는 순간... 아! XP interface 를 흉내 낸 button 이라는 것을 알았습니다. 제어판이나 바탕화면 등록정보 등의 Tab을 이런 식으로 처리했드라구요... 저는 2000 server 를 사용하기 때문에 XP interface 를 XP 가 나오고 한참 뒤에야 봤거든요... 그래서 이 번 페이지에서는 XP button을 재료로 삼아 button 을 만들어 보겠습니다. 우선 아래의 Table에서 각 Mouse event 별 button 모양을 살펴 보시져...

Mouse event 별 button 모양
button 모양 Mouse event 별 구분
XP button
onMouseOut
XP button
onMouseOver


이 XP button의 경우 Window menu button과 달리 OnMouseOver, OnMouseOut 의 2 가지 event 만으로 구분하면 되겠네요... 그럼 우선 button 모양을 CSS class 로 정의 해 보겠습니다.

CSS class selector로 Mouse event 별 button 모양 지정
<style type="text/css">
<!--
.button{ /* 평상시와 OnMouseOut 때의 class */
border-top:medium solid; /* 두께를 medium(4px)으로 하였으나 취향에 따라 조절... */
text-align:center;
height:22px;
background:#ffffff;
}

.band{ /*OnMouseOver 때의 class */
border-top:medium solid; /* 이 두께도 .button class와 같이 지정 */
text-align:center;
cursor:hand;
height:22px;
background:#ffffff;
}
-->
</style>

그런데 위에서 정의한 class에서 먼가... 먼가가 빠진 것 같지 않습니까? 왠지 쩜 허전하다는 느낌이 팍~ 오는 사람은 어느 정도 수준급이라고 봐도 좋겠습니다. 위의 'Mouse event 별 button 모양' Table 에서 보는 것 처럼

  • Mouse 를 button 위에 올렸을 때 상단 border 의 color 가 바뀐다는 점.
  • 상단 border 의 color 를 button 마다 다르게 해 줄 경우 OnMouseOver 때의 class 를 .band 하나가 아닌 button 마다 각기 다른 class를 개별적으로 정의해 주어야 되는가 하는 점.

이렇게 2가지 문제점이 있게 되져... 그래서 이 경우에는 JavaScript function 의 대입변수를 이용하여 해결해 보도록 하겠습니다. 현재 class 에는 border:medium solid 로 border-top-width와 border-top-style 은 이미 지정되어 있으므로 아래와 같이 border-top-color (*Scripting에서는 borderTopColor로 지정) 를 color 라는 대입변수를 사용하여 button 마다 따로 지정하게 해 주면 해결 되겠져?

Mouse event에 사용 될 JavaScript function 만들기
function td_over(obj, color){
obj.className = "band"
obj.style.borderTopColor = color
}

function td_out(obj){
obj.className = "button"
obj.style.borderTopColor = ""
}

아래와 같이 XP button 을 완성했습니다. 한 가지 주의 할 것은 아래의 소스 보기에서

OnMouseOver="td_over(this, 'tomato');" 에서 'tomato'와 같이

대입 변수 color 에 object 가 아닌 string(문자열) 이 들어갈 경우 따옴표( ' ) 속에 넣어 주어야 된다는 사실입니다.

HTML CSS DHTML JavaScript ASP XhtML


소스 보기




이 문서의 저작권은 www.cadvance.org 에 있습니다.

Top
Back
New
검색