Selasa, 04 November 2025

HTML - JAVASCRIPT - TOGGLE BUTTON

 




KODE HTML di bawah ini diambil dari Microsoft.com tahun 2003

<HTML>

<HEAD>


<title>Code Corner Coolbar sample (Code Corner)</title>


<META NAME="robots" CONTENT="noindex">


<xml>

<MSHelp:Keyword Index="A" Term="corner9909_01"/>

</xml>

</HEAD>

<!--TOOLBAR_START-->

<!--TOOLBAR_EXEMPT-->

<!--TOOLBAR_END-->


<STYLE TYPE="text/css"><!--


BODY { font-family:verdana; font-size:80%; }


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"><!--


// SET SOME "CONSTANT" VALUES FOR THE SCRIPT

// MAKES PLAYING WITH LOOK AND FEEL A LOT EASIER


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 sPaneName = "";

var eActiveButton = null;


// TWO HELPER FUNCTIONS

// ONE TO SET BUTTON PADDING AND ONE TO SET BUTTON IMAGE


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);

}

}

}

// FOUR EVENT-HANDLER FUNCTIONS


function button_over(eButton)

{


// IF WE'RE JUST MOUSING ABOUT WITHIN THE BUTTON, THEN BAIL


if (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, THEN BAIL

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 hiding 

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);

sPaneName = eActiveButton.id.replace(/tbl(.*)Button/,"$1");


// insert code here for button showing 

window.status = "Now showing: " + sPaneName;

}


// 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 hiding 

window.status = window.defaultStatus;

}


}


//--></SCRIPT>


<BODY>


<TABLE ID="tblCoolbar" CELLPADDING="0" CELLSPACING="0" BORDER="0" WIDTH="100%" ONSELECTSTART="return false;">

<TR VALIGN="middle">


<TD>

<TABLE ID="tblContentsButton" CELLPADDING="0" CELLSPACING="0" BORDER="0" ONMOUSEOVER="button_over(this);" ONMOUSEOUT="button_out(this);" ONMOUSEDOWN="button_down(this);" ONMOUSEUP="button_up(this);" TITLE="Contents">

<TR VALIGN="middle">

<TD><IMG HSPACE="1" HEIGHT="19" WIDTH="18" BORDER="0" SRC="jadwal2.png" ALT="Contents"></TD>

<TD>Contents&nbsp;&nbsp;&nbsp;</TD>

</TR>

</TABLE>

</TD>


<TD>

<TABLE ID="tblIndexButton" CELLPADDING="0" CELLSPACING="0" BORDER="0" ONMOUSEOVER="button_over(this);" ONMOUSEOUT="button_out(this);" ONMOUSEDOWN="button_down(this);" ONMOUSEUP="button_up(this);" TITLE="Index">

<TR VALIGN="middle">

<TD><IMG HSPACE="1" HEIGHT="19" WIDTH="18" BORDER="0" SRC="note.png" ALT="Index"></TD>

<TD>Index&nbsp;&nbsp;&nbsp;</TD>

</TR>

</TABLE>

</TD>


<TD>

<TABLE ID="tblSearchButton" CELLPADDING="0" CELLSPACING="0" BORDER="0" ONMOUSEOVER="button_over(this);" ONMOUSEOUT="button_out(this);" ONMOUSEDOWN="button_down(this);" ONMOUSEUP="button_up(this);" TITLE="Search">

<TR VALIGN="middle">

<TD><IMG HSPACE="1" HEIGHT="19" WIDTH="18" BORDER="0" SRC="secure.png" ALT="Search"></TD>

<TD>Search&nbsp;&nbsp;&nbsp;</TD>

</TR>

</TABLE>

</TD>


<TD>

<TABLE ID="tblGlossaryButton" CELLPADDING="0" CELLSPACING="0" BORDER="0" ONMOUSEOVER="button_over(this);" ONMOUSEOUT="button_out(this);" ONMOUSEDOWN="button_down(this);" ONMOUSEUP="button_up(this);" TITLE="Glossary">

<TR VALIGN="middle">

<TD><IMG HSPACE="1" HEIGHT="19" WIDTH="22" BORDER="0" SRC="recovery.png" ALT="Glossary"></TD>

<TD>Glossary&nbsp;&nbsp;&nbsp;</TD>

</TR>

</TABLE>

</TD>


<TD WIDTH="100%"></TD>


</TR>

</TABLE>




<BR><BR><BR>

<P><A HREF="javascript:self.close();">Close this sample window</A>.</P>

<SCRIPT LANGUAGE="JScript"><!--


// OPTIONAL: START WITH CONTENTS BUTTON ACTIVE


button_over(tblContentsButton);

button_up(tblContentsButton);

button_out(tblContentsButton);


// PRELOAD "OVER" IMAGES


var sImgPath = "";

var aImgNames = new Array("contents","index","search","glossary");

var aImgs = new Array();

for (var i=0;i<aImgNames.length;i++)

{

aImgs[i] = new Image();

aImgs[i].src = sImgPath + aImgNames[i] + "_over.png";

}


//--></SCRIPT>

</BODY>

</HTML>


Diposting oleh di

Tidak ada komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)