Selasa, 30 Desember 2025
Direct X Media
https://web.archive.org/web/20001109112200/http://www.microsoft.com/DirectX/dxm/default_downlevel.htm
https://web.archive.org/web/20001115093000/http://www.microsoft.com/directx/dxm/help/da/c-frame.htm#default.htm
https://web.archive.org/web/20001109121800/http://www.microsoft.com/DirectX/dxm/help/ds/c-frame.htm#default.htm
https://web.archive.org/web/20001019080438/http://www.microsoft.com/directx/dxm/help/dxt/c-frame.htm#default.htm
https://web.archive.org/web/20001017184714/http://www.microsoft.com/DirectX/dxm/help/d3drm/c-frame.htm#default.htm
.gif)
Senin, 29 Desember 2025
Calculator from 1996
<HTML>
<HEAD>
<TITLE>Calculator</TITLE>
<SCRIPT LANGUAGE="VBScript">
'Author: New Technology Solutions, Inc.
'1996 Original
Dim dblMemory
Dim blnDecimal
Dim dblDisplay
Dim dblStorage
Dim intKeyStrokes
Dim intPending
dblMemory = 0
blnDecimal = 0
intKeyStrokes = 0
dblDisplay = 0
dblStorage = 0
intPending = 0
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
Sub NumPad(intIndex)
intKeyStrokes = intKeyStrokes + 1
If blnDecimal=0 Then
dblDisplay = dblDisplay * 10 + intIndex
Else
dblDisplay = dblDisplay + _
intIndex/(10 ^ intKeyStrokes)
End If
Call UpdateDisplay(dblDisplay)
End Sub
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
Sub btnClear_OnClick
intKeyStrokes = 0
dblDisplay = 0
blnDecimal = 0
dblStorage = 0
dblMemory = 0
Call UpdateDisplay(0)
End Sub
Sub btnDecimal_OnClick
intKeyStrokes = 0
blnDecimal = 1
End Sub
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
Sub OperationPad(intIndex)
Call DoPending()
intKeyStrokes = 0
blnDecimal = 0
intPending = intIndex
dblDisplay = 0
Call UpdateDisplay(dblStorage)
End Sub
Sub btnEquals_OnClick
intKeyStrokes = 0
blnDecimal = 0
Call DoPending()
dblDisplay = 0
Call UpdateDisplay(dblStorage)
dblStorage = 0
End Sub
Sub DoPending()
If intPending = 0 Then
dblStorage = dblDisplay
End If
If intPending = 1 Then
dblStorage = dblStorage + dblDisplay
End If
If intPending = 2 Then
dblStorage = dblStorage - dblDisplay
End if
If intPending = 3 Then
dblStorage = dblStorage * dblDisplay
End if
If intPending = 4 Then
If dblStorage = 0 Then
intPending = 0
Exit Sub
End If
dblStorage = dblStorage / dblDisplay
End If
intPending = 0
End Sub
Sub UpdateDisplay(dblValue)
Dim MyForm
Set MyForm = Document.frmCalculator
MyForm.lblDisplay.Value = dblValue
End Sub
</SCRIPT>
<SCRIPT LANGUAGE="VBScript">
Sub btnMemRecall_OnClick
dblDisplay = dblMemory
Call UpdateDisplay(dblDisplay)
End Sub
Sub btnMemMinus_OnClick
dblMemory = dblMemory - dblDisplay
End Sub
Sub btnMemPlus_OnClick
dblMemory = dblMemory + dblDisplay
End Sub
</SCRIPT>
</HEAD>
<BODY bgcolor="cyan">
<CENTER><BR>
<h1>Calculator From 1996</h1>
<BR><BR>
<FORM NAME="frmCalculator">
<TABLE BORDER=2 CELLSPACING=0 CELLPADDING=0 WIDTH=250 bgcolor=white>
<TR>
<TH COLSPAN=5>
<input type="text" ID="lblDisplay" >
</TH>
</TR>
<TR>
<TD>
<INPUT TYPE="BUTTON" NAME="btnSeven"
VALUE="7" OnClick="Call NumPad(7)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnEight"
VALUE="8" OnClick="Call NumPad(8)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnNine"
VALUE="9" OnClick="Call NumPad(9)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnMultiply"
VALUE="X" OnClick="Call OperationPad(3)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnClear"
VALUE="Clear">
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="BUTTON" NAME="btnFour"
VALUE="4" OnClick="Call NumPad(4)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnFive"
VALUE="5" OnClick="Call NumPad(5)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnSix"
VALUE="6" OnClick="Call NumPad(6)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnMinus"
VALUE="-" OnClick="Call OperationPad(2)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnMemRecall"
VALUE="MR">
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="BUTTON" NAME="btnOne"
VALUE="1" OnClick="Call NumPad(1)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnTwo"
VALUE="2" OnClick="Call NumPad(2)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnThree"
VALUE="3" OnClick="Call NumPad(3)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnDivide"
VALUE="/" OnClick="Call OperationPad(4)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnMemMinus"
VALUE="M-">
</TD>
</TR>
<TR>
<TD>
<INPUT TYPE="BUTTON" NAME="btnZero"
VALUE="0" OnClick="Call NumPad(0)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnDecimal"
VALUE=".">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnEquals"
VALUE="=">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnPlus"
VALUE="+" OnClick="Call OperationPad(1)">
</TD>
<TD WIDTH=50>
<INPUT TYPE="BUTTON" NAME="btnMemPlus"
VALUE="M+">
</TD>
</TR>
</TABLE>
</FORM>
</CENTER>
</BODY>
</HTML>
Sabtu, 27 Desember 2025
XML - XSL - JS - WSH
fact.xsl
<?xml version='1.0' ?>
<!--
fact.xsl
if this code works, it was written by Don Box
-->
<xsl:stylesheet xmlns:xsl='http://www.w3.org/1999/XSL/Transform'
xmlns:xsd='http://www.w3.org/1999/XMLSchema'
version='1.0'
>
<xsl:output method='text' />
<xsl:param name='label' />
<xsl:param name='num' select='5'/>
<xsl:template name='fact' >
<xsl:param name='n' />
<xsl:param name='tally' select='1'/>
<xsl:if test='$n > 0' >
<xsl:call-template name='fact' >
<xsl:with-param name='n' select='$n - 1' />
<xsl:with-param name='tally' select='$n * $tally' />
</xsl:call-template>
</xsl:if>
<xsl:if test='$n = 0' >
<xsl:value-of select='$tally'/>
</xsl:if>
</xsl:template>
<xsl:template match='/' >
<xsl:value-of select='$label' />
<xsl:text xml:space='preserve'>
</xsl:text>
<xsl:value-of select='$num' />
<xsl:text>! = </xsl:text>
<xsl:call-template name='fact' >
<xsl:with-param name='n' select='$num' />
</xsl:call-template>
</xsl:template>
</xsl:stylesheet>
======================================
fact.js
Jumat, 26 Desember 2025
Membuat Web pakai XML File
path.xml
<?xml version="1.0"?>
<?xml:stylesheet type="text/xsl" href="path.xsl"?>
<Data>
<Object Name="Outer Object" >
<Property Name="Outer Property" >
<Value>Outer Property has a value</Value>
</Property >
<Object Name="ObjectA" >
<Property Name="PropertyA" >
<Value>Object A Property A has a value</Value>
</Property >
</Object>
<Object Name="ObjectB" >
<Property Name="PropertyA" >
<Value>Object B Property A has a value</Value>
</Property >
</Object>
</Object>
</Data>
===============================================
path.xsl
<?xml version="1.0"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<HTML>
<HEAD><TITLE></TITLE></HEAD>
<BODY>
<xsl:apply-templates select="Data/Object" />
</BODY>
</HTML>
</xsl:template>
<xsl:template match="Object">
Object is <xsl:value-of select="@Name"/>
<OL>
<xsl:apply-templates select="Property" />
</OL>
<xsl:apply-templates select="Object" />
</xsl:template>
<xsl:template match="Property" >
<LI><xsl:value-of select="@Name"/> = <xsl:value-of select="Value"/>
<P>Path to property is
<xsl:call-template name="fullpath"/>
</P>
</LI>
</xsl:template>
<xsl:template name="fullpath">
<xsl:for-each select="ancestor::*[1]">
<xsl:call-template name="fullpath"/>
</xsl:for-each>
<xsl:text>/</xsl:text>
<xsl:choose>
<xsl:when test="@Name">
<xsl:value-of select="@Name"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="name()"/>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>
table it displays the first first level, but keeps the rest of the rows invisible
<HTML>
<HEAD><!---Code by LISA CASSLEY--->
<basefont face="Verdana, Arial, Helvetica" size="2" color="#000000">
<TITLE>Nested Tables</TITLE>
<BASE TARGET="_top" />
<script language="Javascript" type="text/javascript">
function ToggleScopeCat(sScope)
{
var oTable = document.all["tbl" + sScope];
if (oTable && oTable.style.display == "block")
{
oTable.style.display = "none";
}
else
{
oTable.style.display = "block";
}
}
</script>
</HEAD>
<BODY TOPMARGIN="10" LEFTMARGIN="20" MARGINHEIGHT="0" MARGINWIDTH="0"
background="images/bg.gif"
TEXT="#000000" style="text-align: left">
<!-- Begin Content -->
<!-- This is the overall table it displays the first first level, but keeps the rest of the
rows invisible -->
<table id="tblScopeCats" cellpadding="0" border="1" bordercolor="#000000"
cellspacing="0"
height="50" width="528" bordercolorlight="#808080" style="border-collapse:
collapse">
<tr style="padding:1px" onClick="javascript: ToggleScopeCat('lib');">
<td width="132" align="center" colspan="1">level1</td>
<td width="132" align="center">test11</td>
<td width="132" align="center">test12</td>
<td width="132" align="center">test13</td>
</tr>
<table>
<table id="tbllib" height="75" width="524" border="1" cellpadding="0"
cellspacing="0"
style="display:none; border-collapse: collapse" bordercolorlight="#808080">
<tr onClick="javascript: ToggleScopeCat('lib2');">
<td width="131" align="center" style="padding:3px">level2</td>
<td width="131" align="center">test21</td>
<td width="131" align="center">test22</td>
<td width="131" align="center" valign="middle">test23</td>
</tr>
<!-- This table row holds the third level table -->
<tr>
<td colspan="4">
<table style="display:none; border-collapse:collapse; border: 1px inset
#000000;" id="tbllib2" cellpadding="4" cellspacing="0" height="85"
width="524">
<!-- This table row displays the header of the table "Notes"-->
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
</table>
<!-- This ends the third table -->
</td>
</tr>
<!-- This table row displays some of the values of the variables from the
recordset -->
<tr onClick="javascript: ToggleScopeCat('lib3');">
<td width="131" align="center" style="padding:3px">level2</td>
<td width="131" align="center">test21</td>
<td width="131" align="center">test22</td>
<td width="131" align="center" valign="middle">test23</td>
</tr>
<!-- This table row holds the third level table -->
<tr>
<td colspan="4">
<table style="display:none; border-collapse:collapse; border: 1px inset
#000000;" id="tbllib3" cellpadding="4" cellspacing="0" width="524">
<!-- This table row displays the header of the table "Notes"-->
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
<tr>
<td width="131" align="center" style="padding:3px">level3</td>
<td width="131" align="center">test31</td>
<td width="131" align="center">test32</td>
<td width="131" align="center" valign="middle">test33</td>
</tr>
</table>
<!-- This ends the third table -->
</td>
</tr>
</table>
<!-- This ends the second table -->
</td>
</tr>
</table>
<!-- This ends the first table -->
<!-- End Content -->
</BODY>
</HTML>
Kamis, 25 Desember 2025
Character Entities
Character Entities
- The chart below was lifted from Martin Ramsch's ISO8859-1 Table at http://www.uni-passau.de/~ramsch/iso8859-1.html
Description Code Entity name
=================================== ============ ==============
quotation mark " --> " " --> "
ampersand & --> & & --> &
less-than sign < --> < < --> <
greater-than sign > --> > > --> >
Description Char Code Entity name
=================================== ==== ============ ==============
non-breaking space   --> -->
inverted exclamation ¡ ¡ --> ¡ ¡ --> ¡
cent sign ¢ ¢ --> ¢ ¢ --> ¢
pound sterling £ £ --> £ £ --> £
general currency sign ¤ ¤ --> ¤ ¤ --> ¤
yen sign ¥ ¥ --> ¥ ¥ --> ¥
broken vertical bar ¦ ¦ --> ¦ ¦ --> ¦
&brkbar; --> &brkbar;
section sign § § --> § § --> §
umlaut (dieresis) ¨ ¨ --> ¨ ¨ --> ¨
¨ --> ¨
copyright © © --> © © --> ©
feminine ordinal ª ª --> ª ª --> ª
left angle quote, guillemotleft « « --> « « --> «
not sign ¬ ¬ --> ¬ ¬ --> ¬
soft hyphen ­ --> ­ -->
registered trademark ® ® --> ® ® --> ®
macron accent ¯ ¯ --> ¯ ¯ --> ¯
&hibar; --> &hibar;
degree sign ° ° --> ° ° --> °
plus or minus ± ± --> ± ± --> ±
superscript two ² ² --> ² ² --> ²
superscript three ³ ³ --> ³ ³ --> ³
acute accent ´ ´ --> ´ ´ --> ´
micro sign µ µ --> µ µ --> µ
paragraph sign ¶ ¶ --> ¶ ¶ --> ¶
middle dot · · --> · · --> ·
cedilla ¸ ¸ --> ¸ ¸ --> ¸
superscript one ¹ ¹ --> ¹ ¹ --> ¹
masculine ordinal º º --> º º --> º
right angle quote, guillemotright » » --> » » --> »
fraction one-fourth ¼ ¼ --> ¼ ¼ --> ¼
fraction one-half ½ ½ --> ½ ½ --> ½
fraction three-fourths ¾ ¾ --> ¾ ¾ --> ¾
inverted question mark ¿ ¿ --> ¿ ¿ --> ¿
capital A, grave accent À À --> À À --> À
capital A, acute accent Á Á --> Á Á --> Á
capital A, circumflex accent   -->   --> Â
capital A, tilde à à --> à à --> Ã
capital A, dieresis or umlaut mark Ä Ä --> Ä Ä --> Ä
capital A, ring Å Å --> Å Å --> Å
capital AE diphthong (ligature) Æ Æ --> Æ Æ --> Æ
capital C, cedilla Ç Ç --> Ç Ç --> Ç
capital E, grave accent È È --> È È --> È
capital E, acute accent É É --> É É --> É
capital E, circumflex accent Ê Ê --> Ê Ê --> Ê
capital E, dieresis or umlaut mark Ë Ë --> Ë Ë --> Ë
capital I, grave accent Ì Ì --> Ì Ì --> Ì
capital I, acute accent Í Í --> Í Í --> Í
capital I, circumflex accent Î Î --> Î Î --> Î
capital I, dieresis or umlaut mark Ï Ï --> Ï Ï --> Ï
capital Eth, Icelandic Ð Ð --> Ð Ð --> Ð
Đ --> Đ
capital N, tilde Ñ Ñ --> Ñ Ñ --> Ñ
capital O, grave accent Ò Ò --> Ò Ò --> Ò
capital O, acute accent Ó Ó --> Ó Ó --> Ó
capital O, circumflex accent Ô Ô --> Ô Ô --> Ô
capital O, tilde Õ Õ --> Õ Õ --> Õ
capital O, dieresis or umlaut mark Ö Ö --> Ö Ö --> Ö
multiply sign × × --> × × --> ×
capital O, slash Ø Ø --> Ø Ø --> Ø
capital U, grave accent Ù Ù --> Ù Ù --> Ù
capital U, acute accent Ú Ú --> Ú Ú --> Ú
capital U, circumflex accent Û Û --> Û Û --> Û
capital U, dieresis or umlaut mark Ü Ü --> Ü Ü --> Ü
capital Y, acute accent Ý Ý --> Ý Ý --> Ý
capital THORN, Icelandic Þ Þ --> Þ Þ --> Þ
small sharp s, German (sz ligature) ß ß --> ß ß --> ß
small a, grave accent à à --> à à --> à
small a, acute accent á á --> á á --> á
small a, circumflex accent â â --> â â --> â
small a, tilde ã ã --> ã ã --> ã
small a, dieresis or umlaut mark ä ä --> ä ä --> ä
small a, ring å å --> å å --> å
small ae diphthong (ligature) æ æ --> æ æ --> æ
small c, cedilla ç ç --> ç ç --> ç
small e, grave accent è è --> è è --> è
small e, acute accent é é --> é é --> é
small e, circumflex accent ê ê --> ê ê --> ê
small e, dieresis or umlaut mark ë ë --> ë ë --> ë
small i, grave accent ì ì --> ì ì --> ì
small i, acute accent í í --> í í --> í
small i, circumflex accent î î --> î î --> î
small i, dieresis or umlaut mark ï ï --> ï ï --> ï
small eth, Icelandic ð ð --> ð ð --> ð
small n, tilde ñ ñ --> ñ ñ --> ñ
small o, grave accent ò ò --> ò ò --> ò
small o, acute accent ó ó --> ó ó --> ó
small o, circumflex accent ô ô --> ô ô --> ô
small o, tilde õ õ --> õ õ --> õ
small o, dieresis or umlaut mark ö ö --> ö ö --> ö
division sign ÷ ÷ --> ÷ ÷ --> ÷
small o, slash ø ø --> ø ø --> ø
small u, grave accent ù ù --> ù ù --> ù
small u, acute accent ú ú --> ú ú --> ú
small u, circumflex accent û û --> û û --> û
small u, dieresis or umlaut mark ü ü --> ü ü --> ü
small y, acute accent ý ý --> ý ý --> ý
small thorn, Icelandic þ þ --> þ þ --> þ
small y, dieresis or umlaut mark ÿ ÿ --> ÿ ÿ --> ÿ
Tabular Data Control
tdc.html
<html><body>
<OBJECT id=elements CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="DataURL" VALUE="minielts.txt">
<PARAM NAME="UseHeader" VALUE="True">
</OBJECT>
<TABLE datasrc=#elements>
<THEAD><TR><TD>Element</TD><TD>Symbol</TD></TR></THEAD>
<TBODY>
<TR><TD><DIV datafld="Element"></DIV></TD><TD><DIV
datafld="Symbol"></DIV></TD></TR>
</TBODY>
</TABLE>
</body>
</html>
============================================
minielts.txt
Element,Symbol
Hydrogen,H
Helium,He
Lithium,Li
Beryllium,Be
Boron,B
Carbon,C
Nitrogen,N
Oxygen,O
Fluorine,F
Neon,Ne
DHTML - Animasi Path
<html>
<body>
<div id=Item1 style="position: absolute; left: 130; top: 90;width:20;height:10;background-color:yellow">1</div>
<div id=Item2 style="position: absolute; left: 90; top: 130;width:20;height:10;background-color:blue">2</div>
<div id=Item3 style="position: absolute; left: 110; top: 70;width:20;height:10;background-color:pink">3</div>
<div id=Item4 style="position: absolute; left: 50; top: 110;width:20;height:10;background-color:tan">4</div>
<div id=Item5 style="position: absolute; left: 170; top: 90;width:20;height:10;background-color:cyan">5</div>
<div id=Item6 style="position: absolute; left: 200; top: 170;width:20;height:10;background-color:#cccccc">6</div>
<input type=button value="Start" onclick="runWaypoint(Item1, 0, 1); runWaypoint(Item2, 0, 1);">
<div id=Debug>Generation</div>
<script>
var tickDuration;
tickDuration = 50;
var activeObjectCount;
var activeObjects;
var itemDeactivated;
var tickGeneration;
activeObjects = new Array();
activeObjectCount = 0;
timerRefcount = 0;
itemDeactivated = false;
tickGeneration = 0;
function initializePath(e) {
e.waypointX = new Array();
e.waypointY = new Array();
e.duration = new Array();
}
function addWaypoint(e, number, x, y, duration) {
e.waypointX[number] = x;
e.waypointY[number] = y;
e.duration[number] = duration;
}
function compact() {
var i, n, c;
n = new Array();
c = 0;
itemDeactivated = false;
for (i=0; i<activeObjectCount; i++) {
if (activeObjects[i].active == true) {
n[c] = activeObjects[i];
c++;
}
}
activeObjects = n;
activeObjectCount = c;
}
function tick(generation) {
if (generation < tickGeneration) {
// alert("Error "+generation);
return;
}
//alert("tick: "+generation);
if (itemDeactivated)
compact();
if (activeObjectCount == 0) {
return;
}
else {
for (i=0; i<activeObjectCount; i++) {
moveElement(activeObjects[i]);
}
window.setTimeout("tick("+generation+");", tickDuration);
}
}
function start(e) {
if (itemDeactivated)
compact();
activeObjects[activeObjectCount] = e;
activeObjectCount++;
if (activeObjectCount == 1) {
tickGeneration++;
tick(tickGeneration);
}
}
function runWaypoint(e, startPoint, endPoint) {
var startX, startY, endX, endY, duration;
if (e.waypointX == null)
return;
startX = e.waypointX[startPoint];
startY = e.waypointY[startPoint];
endX = e.waypointX[endPoint];
endY = e.waypointY[endPoint];
duration = e.duration[endPoint];
e.ticks = duration / tickDuration;
e.endPoint = endPoint;
e.active = true;
e.currTick = 0;
e.dx = (endX - startX) / e.ticks;
e.dy = (endY - startY) / e.ticks;
e.style.posLeft = startX;
e.style.posTop = startY;
start(e);
}
function moveElement(e) {
e.style.posLeft += e.dx;
e.style.posTop += e.dy;
e.currTick++;
if (e.currTick > e.ticks) {
e.active = false;
itemDeactivated = true;
if (e.onpathcomplete != null) {
window.pathElement = e;
e.onpathcomplete()
}
}
}
</script>
<script>
// need to call initializePath on all objects that will be moved with this mechanism
initializePath(Item1);
initializePath(Item2);
initializePath(Item3);
initializePath(Item4);
initializePath(Item5);
initializePath(Item6);
// the 0th waypoint is the initial position for waypoint #1
// syntax is item, waypoint, endx, endy, duration in msecs
addWaypoint(Item1, 0, 0, 0, 0);
addWaypoint(Item1, 1, 200, 200, 2000);
addWaypoint(Item2, 0, 100, 100, 0);
addWaypoint(Item2, 1, 400, 100, 4000);
addWaypoint(Item3, 0, 400, 400, 0);
addWaypoint(Item3, 1, 200, 100, 1000);
addWaypoint(Item4, 0, 0, 0, 0);
addWaypoint(Item4, 1, 200, 200, 2000);
addWaypoint(Item5, 0, 100, 100, 0);
addWaypoint(Item5, 1, 400, 100, 4000);
addWaypoint(Item6, 0, 400, 400, 0);
addWaypoint(Item6, 1, 200, 100, 1000);
function endfunction() {
// syntax for runWaypoint is Item, start point, end point
runWaypoint(Item3, 0, 1);
runWaypoint(Item4, 0, 1);
runWaypoint(Item5, 0, 1);
runWaypoint(Item6, 0, 1);
}
function endfunction2() {
runWaypoint(Item1, 0, 1);
}
Item1.onpathcomplete = endfunction;
Item6.onpathcomplete = endfunction2;
</script>
</body>
</html>
Selasa, 23 Desember 2025
DHTML - ActiveX - Banner Pada Web
banner.html
<html>
<head>
<OBJECT ID="Content" WIDTH=0 HEIGHT=0
CLASSID="CLSID:333C7BC4-460F-11D0-BC04-0080C7055A83">
<PARAM NAME="TextQualifier" VALUE="%">
<PARAM NAME="FieldDelim" VALUE="|">
<PARAM NAME="DataURL" VALUE="demo.txt">
<PARAM NAME="UseHeader" VALUE="true">
</OBJECT>
</head>
<body style="font-family: verdana;background-color:cyan">
<h3 id=Status></h3>
<div id=TheStory datasrc=#Content datafld="Story"
dataformatas="HTML" style="width: 100%; height: 60%;"></div>
<SCRIPT language=JScript>
var rs;
var tid;
tid = 1;
function goForward() {
TheStory.style.filter = "revealTrans(duration=2,transition="+tid+")";
TheStory.filters.revealTrans.Apply();
if (rs.absolutePosition != rs.recordCount) {
rs.MoveNext();
} else {
rs.MoveFirst();
}
TheStory.filters.revealTrans.Play();Status.innerHTML = "Menampilkan Slide ke
"+rs.absolutePosition+" dari "+rs.recordCount;
tid++;
if (tid > 23) tid = 1;
window.setTimeout("goForward()", 5000);
}
function initialize() {
rs=Content.recordset;
Status.innerHTML = "Showing Story "+rs.absolutePosition+"of "+rs.recordCount;
window.setTimeout("goForward()", 5000);
}
window.onload = initialize;
</SCRIPT>
</body>
</html>
=====================================
demo.txt
%Story%
%Ini adalah Slide Pertama... Menggunakan Efek Transisi <B>Dynamic</B> HTML%
%Slide ini juga dapat juga sebagai <i>Banner</i> dan dapat menampilkan gambar
<IMG src="apel.PNG">%
%Dapat juga menampilkan Button <input type=Button value="Dynamic HTML"
onclick="alert('Dynamic HTML')">%
HTML Component (.htc) 2
<HTML xmlns:ms>
<BODY style="font-family:Tahoma;font-size:.75em;">
<?IMPORT namespace="ms" implementation="combobox.htc">
<ms:combobox id="combobox1" width="200" items="oranges;apples;pears;cranberries" />
<BUTTON onclick="alert(combobox1.value);">Get ComboBox Value</BUTTON>
</BODY>
</HTML>
=================================
combobox.htc
<PUBLIC:COMPONENT tagName="combobox">
<PUBLIC:DEFAULTS
canHaveHTML=true
contentEditable=false
tabStop=true
viewLinkContent=true
viewMasterTab=false
/>
<PUBLIC:PROPERTY id="propItems" name="items" put="putItems" />
<PUBLIC:PROPERTY id="propValue" name="value" get="getValue" />
<PUBLIC:ATTACH event="ondocumentready" handler="onDocumentReady" />
</PUBLIC:COMPONENT>
<STYLE>
.btn
{
font-family: Arial,MS Sans Serif;
color: gray;
font-weight: bold;
vertical-align:top;
}
</STYLE>
<SCRIPT language="JScript">
var g_nHeight = 0;
var g_sMenu = "<TABLE id='tblMenu' style='border:1px solid black;'></TABLE>";
var g_oMenu = null;
var g_rgItems = null;
function onDocumentReady()
{
// Size button
g_nHeight = txt1.offsetHeight;
btn1.style.width = g_nHeight;
btn1.style.height = g_nHeight;
// Size element
if (element.width)
{
spn1.style.width = element.width;
txt1.style.width = spn1.offsetWidth - btn1.offsetWidth;
}
// Create popup
g_oMenu = window.createPopup();
g_oMenu.document.body.innerHTML = g_sMenu;
g_oMenu.document.body.style.fontFamily = document.body.currentStyle.fontFamily;
g_oMenu.document.body.style.fontSize = document.body.currentStyle.fontSize;
txt1.style.fontFamily = document.body.currentStyle.fontFamily;
txt1.style.fontSize = "100%";
addItems()
}
function onClickButton()
{
g_oMenu.show(0, 0, 0 ,0);
var nHeight = g_oMenu.document.body.scrollHeight;
g_oMenu.show(0, g_nHeight - 1, spn1.offsetWidth - 1, nHeight, element);
}
function addItems()
{
if (!g_oMenu) return;
// Add Items to the popup menu
g_oMenu.document.body.innerHTML = g_sMenu;
for (var i = 0; i < g_rgItems.length; i++)
{
if (g_rgItems[i] == "") break;
var oTR = g_oMenu.document.getElementById("tblMenu").insertRow();
var oTD = oTR.insertCell();
oTD.attachEvent("onclick", new Function("chooseItem(\"" + i + "\")") );
oTD.attachEvent("onmouseover", new Function("selectItem(" + i + ")") );
oTD.attachEvent("onmouseout", new Function("unselectItem(" + i + ")") );
oTD.innerText = g_rgItems[i];
}
}
function selectItem(nIndex)
{
var oMnuTbl = g_oMenu.document.getElementById("tblMenu");
oMnuTbl.rows[nIndex].style.backgroundColor = "highlight";
oMnuTbl.rows[nIndex].style.color = "highlighttext";
}
function unselectItem(nIndex)
{
var oMnuTbl = g_oMenu.document.getElementById("tblMenu");
oMnuTbl.rows[nIndex].style.backgroundColor = "";
oMnuTbl.rows[nIndex].style.color = "";
}
function chooseItem(nIndex)
{
var oMnuTbl = g_oMenu.document.getElementById("tblMenu");
oMnuTbl.rows[nIndex].style.backgroundColor = "";
oMnuTbl.rows[nIndex].style.color = "";
txt1.value = oMnuTbl.rows[nIndex].cells[0].innerText;
g_oMenu.hide();
}
function putItems(sVal)
{
g_rgItems = new Array();
g_rgItems = sVal.split(";");
addItems();
}
function getValue()
{
return txt1.value;
}
</SCRIPT>
<NOBR id="spn1"><INPUT type="text" id="txt1" tabIndex=0><BUTTON id="btn1"
onclick="onClickButton()" class="btn" tabIndex=0 hidefocus=true>v</BUTTON></NOBR>
Senin, 22 Desember 2025
HTML Component (.htc) 1
main.html
<HTML xmlns:MS>
<?IMPORT namespace = MS implementation = "button.htc" >
<?IMPORT namespace = MS implementation = "input.htc" >
<PUBLIC:COMPONENT tagName=MYPAGE >
<public:defaults viewLinkContent />
<public:attach event=oncontentready onevent="init();" />
</public:component>
<script>
function init() {
}
function clicked() {
MyInput.value = "Clicked";
}
</script>
<BODY style="background:cyan">
<h2>View Linked Element Behaviors</h2>
<MS:BUTTON id=MyButton click="clicked()" text="Click Me"/>
<br>
<MS:INPUT id=MyInput />
</BODY>
==================================
input.htc
<PUBLIC:COMPONENT tagName=INPUT >
<public:defaults viewLinkContent />
<public:property name="value" put="setValue" get="getValue"/>
<public:attach event=oncontentready onevent="init();" />
</public:component>
<script>
function init() {
}
function setValue(v) {
TheInput.value = v;
}
function getValue() {
return text;
}
</script>
<BODY style="width:100%; height:100%">
<input type=text id=TheInput>
</BODY>
================================================
button.htc
<PUBLIC:COMPONENT tagName=BUTTON >
<public:defaults viewLinkContent />
<public:property name="text" put="setText" get="getText"/>
<public:event id=MyClick name="click" />
<public:attach event=oncontentready onevent="init();" />
</public:component>
<script>
function init() {
TheButton.attachEvent("onclick", doOnclick);
}
function doOnclick() {
MyClick.fire();
}
function setText(v) {
TheButton.innerHTML = v;
}
function getText() {
return text;
}
</script>
<BODY style="width:100%; height:100%">
<button id=TheButton></button>
</BODY>
Script Built-In
Naming Conventions
The final Internet Explorer-specific event-hookup mechanism consists of
naming your function to include the object and eventname. As long as your
function is name objectname.eventname, IE will hook up the
function automatically. For example:
<span id="testnaming">Click me naming - JScript</span>
<script language=JScript>
function testnaming.onclick()
{
alert("script naming - JScript")
}
</script>
Note: This mechanism only works with JScript.
Automagic
In addition to all the IE-specific event handling mechanisms, you can also
use the built-in "automagic" hook up provided by the script engines. The key to
using this mechanism is understanding when the hook up occurs. If the objects or
HTML elements are available when the page loads, then the script engine will do
the event binding. If, however, the object or elements are added after page load
(by setting innerHTML for example) then the script engine
won't hook up the events. The good thing about this mechanism is you can use it
to respond to ActiveX Control events.
<span id="testscriptbuiltin">Click me Built In - JScript</span>
<script language=JScript>
function testscriptbuiltin::onclick()
{
alert("script naming - JScript")
}
</script>
<br>
<span id="testscriptbuiltin">Click me Built In - VBScript</span>
<script language=VBScript>
sub testscriptbuiltin_onclick()
alert("script naming - VBScript")
end sub
</script>
============================================
Function Pointers
Every function in JScript is a first-class object, which allows you to pass around pointers to the function and use them to call the function. This offers flexibility in hooking up event handlers, enabling you to use the same function to handle one or many events. To setup function-pointer events, just set the EventName property on the object to the pointer of the function. In JScript this is very simple to do. For example:
window.onclick=foo function foo() { alert('you clicked on the window') }In the first releases of VBScript, there was no way to use function pointers, since if you set
window.onclicktofoo,VBScript would callfoorather than get a pointer. In VBScript 5.0 the GetRef method was introduced. This created a reference to the function, allowing you to set the event handler. For example:set window.onclick=GetRef("foo") function foo() alert('you clicked on the window') end function<Script> Block-Event Handlers
The event handlers used so far work well for HTML events, but don't provide a way for writing event handlers for custom events on ActiveX objects that you may have in your page. To provide this support, Internet Explorer introduced extensions to the <script> block to specify which object and which event the script is for. For example:
<span id="testscript">Click me script block handler - JScript</span> <script language=JScript for=testscript event="onclick"> alert("script block handler - JScript") </script> <br>======================================
DHTML - Right Click - OnContexMenu
<html>
<head>
<style>
.menuItem {
font-family:sans-serif; font-size:12pt;
width:220;padding-left:20;
background-color:menu;
color:black
}
.highlightItem {
font-family:sans-serif; font-size:12pt;
width:220; padding-left:20;
background-Color:highlight; color:white;
}
</style>
</head>
<body oncontextmenu="showMenu(); return false">
<h2>Right Click to Bring Up a Context Menu</h2>
<!-- Context Menu -->
<div id=menu1
onclick="clickMenu()"
onmouseover="toggleMenu()"
onmouseout="toggleMenu()"
style="position:absolute;
display:none;
border: 2px outset black;
width:220;
background-color:menu">
<div class="menuItem"
doFunction="alert(el.innerHTML);">Graph</div>
<hr>
<div class="menuItem"
doFunction="alert(el.innerHTML);">
Show News
</div>
<div class="menuItem"
doFunction="alert(el.innerHTML);">Buy
</div>
<hr>
<div class="menuItem"
doFunction="alert(el.innerHTML);">Sell
</div>
<div class="menuItem"
doFunction="alert(el.innerHTML);">
Refresh Portfolio
</div>
</div>
<!-- End of Context Menu -->
<script>
var el;
function showMenu() {
ContextElement=event.srcElement;
menu1.style.leftPos+=10;
menu1.style.posLeft=event.clientX;
menu1.style.posTop=event.clientY;
menu1.style.display="";
menu1.setCapture();
}
function toggleMenu() {
el=event.srcElement;
if (el.className=="menuItem") {
el.className="highlightItem";
} else if (el.className=="highlightItem") {
el.className="menuItem";
}
}
function clickMenu() {
menu1.releaseCapture();
menu1.style.display="none";
el=event.srcElement;
if (el.doFunction != null) {
eval(el.doFunction);
}
}
</script>
</body>
</html>
DHTML - Drag & Resize & Multiple Using Alt
<html>
<style>
DIV {cursor: hand}
</style>
<body style="font-family: verdana">
<H2>Simple Drag and Resize Example</h2>
<h4>Use alt-click to multi-select</h4>
<input type=button value="Moving, click to resize"
onclick="toggleMoveResize(this); return false">
<div moveable=true style="position: absolute;
top: 150px; left: 100px;
width: 100px; height: 100px;
background-color: red;
border: solid 2px black">
Click and drag me
</div>
<div moveable=true style="position: absolute;
top: 150px; left: 250px;
width: 100px; height: 100px;
background-color: blue;
border: solid 2px black">
Click and drag me
</div>
<script language="JavaScript">
var activeElements = new Array();
var activeElementCount = 0;
var lTop, lLeft;
var doMove = true;
var doResize = false;
function toggleMoveResize(e) {
if (doMove) {
doMove = false;
doResize = true;
e.value = "Resizing, Click to Move";
} else {
doMove = true;
doResize = false;
e.value = "Moving, Click to Resize";
}
}
function mousedown() {
var mp;
mp = findMoveable(window.event.srcElement);
if (!window.event.altKey) {
for (i=0; i<activeElementCount; i++) {
if (activeElements[i] != mp) {
activeElements[i].style.borderWidth = "2px";
}
}
if (mp) {
activeElements[0] = mp;
activeElementCount = 1;
mp.style.borderWidth = "4px";
} else {
activeElementCount = 0;
}
} else {
if (mp) {
if (mp.style.borderWidth != "4px") {
activeElements[activeElementCount] = mp;
activeElementCount++;
mp.style.borderWidth = "4px";
}
}
}
window.status = activeElementCount;
lLeft = window.event.x;
lTop = window.event.y;
}
document.onmousedown = mousedown;
function mousemove() {
var i, dLeft, dTop;
if (window.event.button == 1) {
sx = window.event.x;
sy = window.event.y;
dLeft = sx - lLeft;
dTop = sy - lTop;
for (i=0; i<activeElementCount; i++) {
if (doMove)
moveElement(activeElements[i], dLeft, dTop);
if (doResize)
resizeElement(activeElements[i], dLeft, dTop);
}
lLeft = sx;
lTop = sy;
return false;
}
}
function moveElement(mp, dLeft, dTop) {
var e
e = mp;
e.style.posTop += dTop;
e.style.posLeft += dLeft;
}
function resizeElement(mp, dLeft, dTop) {
var e;
e = mp;
e.style.posHeight += dTop;
e.style.posWidth += dLeft;
}
function findMoveable(e) {
if (e.moveable == 'true')
return e;
if (e.tagName == "BODY")
return null;
return findMoveable(e.parentElement);
}
function findDefinedMoveable(e) {
if ((e.moveable == 'true') || (e.moveable == 'false'))
return e;
if (e.tagName == "BODY")
return null;
return findDefinedMoveable(e.parentElement);
}
function rfalse() {
return false;
}
document.onmousemove = mousemove;
document.onselectstart = rfalse;
</script>
</body>
</html>
There are three
Senin, 15 Desember 2025
VML
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style>
v\:* {behavior: url(#default#VML);}
</style>
</head>
<body>
<body>
<v:shape style='width:250;height:250' strokecolor="red" strokeweight="1.5pt"
fillcolor="blue" coordorigin="0 0" coordsize="200 200">
<v:path v="m 8,65 l 72,65, 92,11, 112,65, 174,65, 122,100, 142,155,
92,121, 42,155, 60,100 x e"/>
</v:shape>
<v:shape style='width:200;height:200' strokecolor="red" coordsize="15 15">
<v:path v="m 0,2 l 1,0,14,0,15,2 x e" />
<v:shape>
</body>
</body>
</html>
DHTML
<HTML>
<HEAD>
<SCRIPT>
var topics;
var hints;
var curTopic = null;
var curHint = null;
//Change the topic background color and display a hint
function highlight() {
//Is the hint still visible? This is called if we have moved from the
//topic to the hint and then back to some other hint
if ((curHint != null) && (curHint.style.visibility == "visible")) {
curTopic.style.backgroundColor = "";
curHint.style.visibility = "hidden";
}
//Ignore movement outside the topics but in thold
if (event.srcElement.id == "topic") {
curTopic = event.srcElement;
curTopic.style.backgroundColor = "yellow";
for (i = 0; i < topics.length; i++)
if (event.srcElement == topics[i]) {
curHint = hints[i]
curHint.style.visibility = "visible"
}
}
}
//Hide the hint if we've moved on to another topic or beyond the top of the
//topic list
function unhigh() {
if ((event.toElement.id == "topic") || (event.toElement.id == "grad")) {
curHint.style.visibility = "hidden"
curTopic.style.backgroundColor = ""
}
}
//Jump to the href specified in the expando property
function jump() {
if (event.srcElement.jump)
document.location.href = event.srcElement.jump
}
//If moving over a hint anchor, highlight it.
function onHint() {
if (event.srcElement.tagName == "A")
event.srcElement.style.backgroundColor = "cyan";
}
//If moving off of a hint anchor, unhighlight it.
function offHint() {
if (event.srcElement.tagName == "A")
event.srcElement.style.backgroundColor = "";
}
function init() {
topics = document.all.item("topic");
hints = document.all.item("hint");
}
</SCRIPT>
<STYLE>
#hint {position:absolute;top:40%;visibility:hidden;background-color:yellow;font-size:14pt;font-family:arial}
</STYLE>
</HEAD>
<BODY onload="init()" topmargin=0 leftmargin=0 BGCOLOR=silver>
<DIV style="position:absolute;left:25%;width:75%;height:100%">
<DIV style="position:absolute;left:10%;top:10%;width:70%">
Welcome to the Moon site. Here you can find all of the information you need to keep
abreast of the latest Moon news.
<HR>
</DIV>
</DIV>
<H1>Moon</H1>
<DIV id=grad style="position:absolute;width:25%;height:100%;top:0;left:0;background-color:fuchsia;filter:alpha(opacity=0, finishopacity=80, style=1)">
</DIV>
<DIV style="position:absolute;top:20%;height:20%;width:28%;font-size:16pt;font-weight:bold;font-family:arial;text-align:right" onmouseover="highlight()" onmouseout="unhigh()" onclick="jump()">
<DIV id=topic>Sightings</DIV>
<DIV id=topic jump="scopes.html">Telescopes</DIV>
<DIV id=topic>Online news</DIV>
<DIV id=topic>Phases</DIV>
</DIV>
<DIV style="position:absolute;top:20%;width:20%;left:30%" onmouseover="onHint()" onmouseout="offHint()">
<DIV id=hint><A HREF="texas.html">Texas</A><BR><A HREF="no.html">New Orleans</A></DIV>
<DIV id=hint>Learn about <A HREF="scopes.html">telescopes</A> used by the professionals.</DIV>
<DIV id=hint>Is it true that the Moon is waning?</DIV>
<DIV id=hint>It's almost time for the full moon.</DIV>
</DIV>
</BODY>
</HTML>
How It's Done/Hyman
11/12/97
1:33 PM
Langganan:
Komentar (Atom)