Teknologi 3D pada Halaman WEB

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>

<xml>

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

</xml>

</HEAD>

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

<TD>

<TD>Contents   </TD>

</TR>

</TABLE>

</TD>

<TD>

<TD>Index   </TD>

</TR>

</TABLE>

</TD>

<TD>

<TD>Search   </TD>

</TR>

</TABLE>

</TD>

<TD>

<TD>Glossary   </TD>

</TR>

</TABLE>

</TD>

</TR>

</TABLE>

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

Perdana Menteri Belanda

Senin, 03 November 2025

JavaScript - Menu

<html>

<HEAD><TITLE>menu

</TITLE>

<style>

a:hover {color:white; text-decoration:none;}

a:link {color:yellow; text-decoration:none}

a:visited {color:white; text-decoration:none}

#essenmenu

{

position: absolute;

top: 0;

left: 0;

z-index: 1;

font:xx-large arial

}

#essen

{

position: absolute;

top: -120;

left: 0;

z-index: 0;

font:xx-large arial

}

#trinkenmenu

{

position: absolute;

top: 0;

left: 120;

z-index: 1;

font:xx-large arial

}

#trinken

{

position: absolute;

top: -92;

left: 120;

z-index: 0;

font:xx-large arial

}

</style>

var eypos=-124, ejump=-4;

var typos=-92, tjump=-4;

var delay=2;

function do_essen()

{

if(typos>-92)

{

tjump=-4;

if(typos>=30)

trinken_fahren();

}

ejump=-ejump;

if(eypos<=-122 || eypos>=30)

essen_fahren();

}

function essen_fahren()

{

if(document.layers) document.essen.top=eypos; else document.all.essen.style.top=eypos;

eypos+=ejump;

if(eypos>-122 && eypos<30)

setTimeout("essen_fahren()", delay);

}

function do_trinken()

{

if(eypos>-122)

{

ejump=-4;

if(eypos>=30)

essen_fahren();

}

tjump=-tjump;

if(typos<=-92 || typos>=30)

trinken_fahren();

}

function trinken_fahren()

{

if(document.layers) document.trinken.top=typos; else document.all.trinken.style.top=typos;

typos+=tjump;

if(typos>-92 && typos<30)

setTimeout("trinken_fahren()", delay);

}

</script>

</HEAD>

<BODY>

<tr><td align=middle><a href="javascript:do_essen()"><b>Masakan</b></a>

</table>

</div>

<tr><td align=middle><a href="javascript:do_trinken()"><b>Minuman</b></a>

</table>

</div>

<tr><td align=middle><button>Sayur Sop</button>

<tr><td align=middle><button >Nasi Goreng</button>

<tr><td align=middle><button >Rendang</button>

</table>

</div>

<tr><td align=middle>Air Mineral</a>

<tr><td align=middle>Teh Matcha</a>

</table>

</div>

</BODY>

</HTML>

Additional Named Entities for HTML

The following table contains additional named entities, their numeric character references, and a description of each. With the exception of the left and right-pointing brackets (〈 and 〉), the entities on this page are rendered using Lucida sans Unicode.

Character	Named entity	Numeric character reference	Description
Latin Extended-B
ƒ	&fnof;	ƒ	Latin small f with hook, =function, =florin, U0192 ISOtech
Greek
Α	Α	Α	Greek capital letter alpha, U0391
Β	Β	Β	Greek capital letter beta, U0392
Γ	Γ	Γ	Greek capital letter gamma, U0393 ISOgrk3
Δ	Δ	Δ	Greek capital letter delta, U0394 ISOgrk3
Ε	Ε	Ε	Greek capital letter epsilon, U0395
Ζ	Ζ	Ζ	Greek capital letter zeta, U0396
Η	Η	Η	Greek capital letter eta, U0397
Θ	Θ	Θ	Greek capital letter theta, U0398 ISOgrk3
Ι	Ι	Ι	Greek capital letter iota, U0399
Κ	Κ	Κ	Greek capital letter kappa, U039A
Λ	Λ	Λ	Greek capital letter lambda, U039B ISOgrk3
Μ	Μ	Μ	Greek capital letter mu, U039C
Ν	Ν	Ν	Greek capital letter nu, U039D
Ξ	Ξ	Ξ	Greek capital letter xi, U039E ISOgrk3
Ο	Ο	Ο	Greek capital letter omicron, U039F
Π	Π	Π	Greek capital letter pi, U03A0 ISOgrk3
Ρ	Ρ	Ρ	Greek capital letter rho, U03A1
Σ	Σ	Σ	Greek capital letter sigma, U03A3 ISOgrk3
Τ	Τ	Τ	Greek capital letter tau, U03A4
Υ	Υ	Υ	Greek capital letter upsilon, U03A5 ISOgrk3
Φ	Φ	Φ	Greek capital letter phi, U03A6 ISOgrk3
Χ	Χ	Χ	Greek capital letter chi, U03A7
Ψ	Ψ	Ψ	Greek capital letter psi, U03A8 ISOgrk3
Ω	Ω	Ω	Greek capital letter omega, U03A9 ISOgrk3
α	α	α	Greek small letter alpha, U03B1 ISOgrk3
β	β	β	Greek small letter beta, U03B2 ISOgrk3
γ	γ	γ	Greek small letter gamma, U03B3 ISOgrk3
δ	δ	δ	Greek small letter delta, U03B4 ISOgrk3
ε	ε	ε	Greek small letter epsilon, U03B5 ISOgrk3
ζ	ζ	ζ	Greek small letter zeta, U03B6 ISOgrk3
η	η	η	Greek small letter eta, U03B7 ISOgrk3
θ	θ	θ	Greek small letter theta, U03B8 ISOgrk3
ι	ι	ι	Greek small letter iota, U03B9 ISOgrk3
κ	κ	κ	Greek small letter kappa, U03BA ISOgrk3
λ	λ	λ	Greek small letter lambda, U03BB ISOgrk3
μ	μ	μ	Greek small letter mu, U03BC ISOgrk3
ν	ν	ν	Greek small letter nu, U03BD ISOgrk3
ξ	ξ	ξ	Greek small letter xi, U03BE ISOgrk3
ο	ο	ο	Greek small letter omicron, U03BF NEW
π	π	π	Greek small letter pi, U03C0 ISOgrk3
ρ	ρ	ρ	Greek small letter rho, U03C1 ISOgrk3
ς	&sigmaf;	ς	Greek small letter final sigma, U03C2 ISOgrk3
σ	σ	σ	Greek small letter sigma, U03C3 ISOgrk3
τ	τ	τ	Greek small letter tau, U03C4 ISOgrk3
υ	υ	υ	Greek small letter upsilon, U03C5 ISOgrk3
φ	φ	φ	Greek small letter phi, U03C6 ISOgrk3
χ	χ	χ	Greek small letter chi, U03C7 ISOgrk3
ψ	ψ	ψ	Greek small letter psi, U03C8 ISOgrk3
ω	ω	ω	Greek small letter omega, U03C9 ISOgrk3
ϑ	&thetasym;	ϑ	Greek small letter theta symbol, U03D1 NEW
ϒ	&upsih;	ϒ	Greek upsilon with hook symbol, U03D2 NEW
ϖ	ϖ	ϖ	Greek pi symbol, U03D6 ISOgrk3
General Punctuation
•	•	•	bullet, =black small circle, U2022 ISOpub
…	…	…	horizontal ellipsis, =three dot leader, U2026 ISOpub
′	′	′	prime, =minutes, =feet, U2032 ISOtech
″	″	″	double prime, =seconds, =inches, U2033 ISOtech
‾	&oline;	‾	overline, =spacing overscore, U203E NEW
⁄	&frasl;	⁄	fraction slash, U2044 NEW
Letterlike Symbols
℘	&weierp;	℘	script capital P, =power set, =Weierstrass p, U2118 ISOamso
ℑ	&image;	ℑ	blackletter capital I, =imaginary part, U2111 ISOamso
ℜ	&real;	ℜ	blackletter capital R, =real part symbol, U211C ISOamso
™	™	™	trade mark sign, U2122 ISOnum
ℵ	&alefsym;	ℵ	alef symbol, =first transfinite cardinal, U2135 NEW
Arrows
←	←	←	leftward arrow, U2190 ISOnum
↑	↑	↑	upward arrow, U2191 ISOnum
→	→	→	rightward arrow, U2192 ISOnum
↓	↓	↓	downward arrow, U2193 ISOnum
↔	↔	↔	left right arrow, U2194 ISOamsa
↵	&crarr;	↵	downward arrow with corner leftward, =carriage return, U21B5 NEW
⇐	⇐	⇐	leftward double arrow, U21D0 ISOtech
⇑	&uArr;	⇑	upward double arrow, U21D1 ISOamsa
⇒	⇒	⇒	rightward double arrow, U21D2 ISOtech
⇓	&dArr;	⇓	downward double arrow, U21D3 ISOamsa
⇔	⇔	⇔	left right double arrow, U21D4 ISOamsa
Mathematical Operators
∀	∀	∀	for all, U2200 ISOtech
∂	∂	∂	partial differential, U2202 ISOtech
∃	∃	∃	there exists, U2203 ISOtech
∅	∅	∅	empty set, =null set, =diameter, U2205 ISOamso
∇	∇	∇	nabla, =backward difference, U2207 ISOtech
∈	∈	∈	element of, U2208 ISOtech
∉	∉	∉	not an element of, U2209 ISOtech
∋	&ni;	∋	contains as member, U220B ISOtech
∏	∏	∏	n-ary product, =product sign, U220F ISOamsb
−	∑	−	n-ary sumation, U2211 ISOamsb
−	−	−	minus sign, U2212 ISOtech
∗	&lowast;	∗	asterisk operator, U2217 ISOtech
√	√	√	square root, =radical sign, U221A ISOtech
∝	&prop;	∝	proportional to, U221D ISOtech
∞	∞	∞	infinity, U221E ISOtech
∠	&ang;	∠	angle, U2220 ISOamso
⊥	&and;	⊥	logical and, =wedge, U2227 ISOtech
⊦	&or;	⊦	logical or, =vee, U2228 ISOtech
∩	∩	∩	intersection, =cap, U2229 ISOtech
∪	∪	∪	union, =cup, U222A ISOtech
∫	∫	∫	integral, U222B ISOtech
∴	&there4;	∴	therefore, U2234 ISOtech
∼	&sim;	∼	tilde operator, =varies with, =similar to, U223C ISOtech
≅	&cong;	≅	approximately equal to, U2245 ISOtech
≅	≈	≅	almost equal to, =asymptotic to, U2248 ISOamsr
≠	≠	≠	not equal to, U2260 ISOtech
≡	&equiv;	≡	identical to, U2261 ISOtech
≤	≤	≤	less-than or equal to, U2264 ISOtech
≥	≥	≥	greater-than or equal to, U2265 ISOtech
⊂	⊂	⊂	subset of, U2282 ISOtech
⊃	⊃	⊃	superset of, U2283 ISOtech
⊄	&nsub;	⊄	not a subset of, U2284 ISOamsn
⊆	&sube;	⊆	subset of or equal to, U2286 ISOtech
⊇	&supe;	⊇	superset of or equal to, U2287 ISOtech
⊕	&oplus;	⊕	circled plus, =direct sum, U2295 ISOamsb
⊗	&otimes;	⊗	circled times, =vector product, U2297 ISOamsb
⊥	&perp;	⊥	up tack, =orthogonal to, =perpendicular, U22A5 ISOtech
⋅	⋅	⋅	dot operator, U22C5 ISOamsb
Miscellaneous Technical
⌈	&lceil;	⌈	left ceiling, =apl upstile, U2308, ISOamsc
⌉	&rceil;	⌉	right ceiling, U2309, ISOamsc
⌊	&lfloor;	⌊	left floor, =apl downstile, U230A, ISOamsc
⌋	&rfloor;	⌋	right floor, U230B, ISOamsc
〈	&lang;	〈	left-pointing angle bracket, =bra, U2329 ISOtech
〉	&rang;	〉	right-pointing angle bracket, =ket, U232A ISOtech
Geometric Shapes
◊	&loz;	◊	lozenge, U25CA ISOpub
Miscellaneous Symbols
♠	&spades;	♠	black spade suit, U2660 ISOpub
♣	&clubs;	♣	black club suit, =shamrock, U2663 ISOpub
♥	&hearts;	♥	black heart suit, =valentine, U2665 ISOpub
♦	&diams;	♦	black diamond suit, U2666 ISOpub