프리카운터넷

프로그래밍&개발

기존 공부방

사용자의 윈도우 화면배색에 따라 변하는 버튼 메뉴

▶ coolbar폴더안에 있는 파일구성

위의 그림은 소스를 실제로 실행시켜 본 그림으로
디스플레이 등록정보의 화면배색을 수정하면
버튼의 전체적인 색이 바뀐다.

옆의 그림은 coolbar를 이용하기 위한
기본적인 파일구성이며 이미지 파일의 _off와 _over의
파일이름은 같아야 한다.

▶ 사용자의 윈도우 화면배색에 따라 변하는 버튼 메뉴 예제

<html>
<head>
<title>CoolBar 소스</title>
<style>
TABLE#tblCoolbar
{
background-color:threedface; padding:1px; color:menutext;
border-width:1px; border-style:solid;
border-color:threedhighlight threedshadow threedshadow threedhighlight;
} TABLE#tblCoolbar TABLE
{
font-family:tahoma; font-size:70%; color:menutext;
border:1px solid threedface; cursor:hand; padding:1px;
}
</style> <script language="JScript">
var sOffBackColor = "threedface";var sOffTextColor = "menutext"
var sOffBorderColor = "threedface";var sOffPadding = "1px 1px 1px 1px";
var sOverBackColor = "threedface";var sOverTextColor = "menutext"
var sOverBorderColor = "threedhighlight threedshadow threedshadow threedhighlight";
var sOverPadding = "1px 1px 1px 1px";var sDownBackColor = "window"
var sDownTextColor = "menutext"
var sDownBorderColor = "threedshadow threedhighlight threedhighlight threedshadow";
var sDownPadding = "2px 0px 0px 2px";
var sActiveButtonName = "";
var eActiveButton = null;
function SetButtonPadding(eButton,sPaddingStyle)
{
eButton.rows[0].cells[0].style.padding = sPaddingStyle;
eButton.rows[0].cells[1].style.padding = sPaddingStyle;
}
function SetButtonImage(eButton,sState)
{
var eImg = eButton.rows[0].cells[0].children[0];
if (eImg)
{
var sImgSrc = eImg.src;
if (sImgSrc.match(/_(\w+)\.gif/))
{
eImg.src = sImgSrc.replace(RegExp.$1,sState);
}
}
}
function button_over(eButton)
{
// IF WE'RE JUST MOUSING ABOUT WITHIN THE BUTTON, EXIT WITHOUT DOING A THINGif (window.event && eButton.contains(window.event.fromElement)) return false;
// OTHERWISE CHANGE BUTTON STYLE
eButton.style.backgroundColor = sOverBackColor;
eButton.style.color = sOverTextColor;
if (eActiveButton != eButton)
{
eButton.style.borderColor = sOverBorderColor;
SetButtonImage(eButton,"over");
}
}
function button_out(eButton)
{
// IF WE'RE JUST MOUSING ABOUT WITHIN THE BUTTON, EXIT WITHOUT DOING A THING
if (window.event && eButton.contains(window.event.toElement)) return false;
// OTHERWISE CHANGE BUTTON STYLE
if (eActiveButton != eButton)
{
eButton.style.backgroundColor = sOffBackColor;
eButton.style.borderColor = sOffBorderColor;
eButton.style.color = sOffTextColor;
SetButtonPadding(eButton,sOffPadding);
SetButtonImage(eButton,"off")
}
else
{
eButton.style.backgroundColor = sDownBackColor;
eButton.style.borderColor = sDownBorderColor;
eButton.style.color = sDownTextColor;
}
}
function button_down(eButton)
{
eButton.style.borderColor = sDownBorderColor;
SetButtonPadding(eButton,sDownPadding);
}
function button_up(eButton)
{
// IF ANOTHER BUTTON IS ACTIVE, RESET IT
if (null != eActiveButton && eButton != eActiveButton)
{
eActiveButton.style.backgroundColor = sOffBackColor;
eActiveButton.style.borderColor = sOffBorderColor;
eActiveButton.style.color = sOffTextColor;
SetButtonImage(eActiveButton,"off");
SetButtonPadding(eActiveButton,sOffPadding); eActiveButton = null;
// insert code here for button resetting
window.status = window.defaultStatus;
}
// IF THE BUTTON WE CLICKED IS NOT THE ACTIVE BUTTON, MAKE IT ACTIVE
if (eButton != eActiveButton)
{
eActiveButton = eButton;
eActiveButton.style.borderColor = sDownBorderColor;
eActiveButton.style.color = sDownTextColor;
SetButtonPadding(eActiveButton,sDownPadding);
// insert code here for button activating
sActiveButtonName = eActiveButton.id.replace(/tbl(.*)Button/,"$1");
window.status = "Now showing: " + sActiveButtonName;
}
// OTHERWISE, RESET IT
else
{
eActiveButton.style.backgroundColor = sOverBackColor;
eActiveButton.style.borderColor = sOverBorderColor;
eActiveButton.style.color = sOverTextColor;
SetButtonPadding(eActiveButton,sOverPadding); eActiveButton = null;
// insert code here for button resetting
window.status = window.defaultStatus;
}
}
</script>
</HEAD>
<BODY">
<center>
<br>
<table id="tblCoolbar" cellpadding="0" cellspacing="0" border="0" width="200" onselectstart="return false;">
<tr valign="middle">
<td>
<table id="tblContentsButton" title="Contents" cellpadding="0" cellspacing="0" border="0"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);">
<tr valign="middle">
<td><img hspace="1" height="19" width="18" border="0" alt="Contents" src="contents_off.gif"></td>
<td>Contents</td>
</tr>
</table>
</td>
<td>
<table id="tblIndexButton" title="Index" cellpadding="0" cellspacing="0" border="0"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);">
<tr valign="middle">
<td><img hspace="1" height="19" width="18" border="0" alt="Index" src="index_off.gif"></td>
<td>Index;</td>
</tr>
</table>
</td>
<td>
<table id="tblSearchButton" title="Search" cellpadding="0" cellspacing="0" border="0"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);">
<tr valign="middle">
<td><img hspace="1" height="19" width="18" border="0" alt="Search" src="search_off.gif"></td>
<td>Search;</td>
</tr>
</table>
</td>
<td>
<table id="tblGlossaryButton" title="Glossary" cellpadding="0" cellspacing="0" border="0"
onMouseOver="button_over(this);" onMouseOut="button_out(this);"
onMouseDown="button_down(this);" onMouseUp="button_up(this);">
<tr valign="middle">
<td><img hspace="1" height="19" width="22" border="0" alt="Glossary" src="glossary_off.gif"></td>
<td>Glossary</td>
</tr>
</table>
</td>
<td width="100%"></td>
</tr>
</table>
<br>
</center>
</body>
</html>