Teknologi 3D pada Halaman WEB

Senin, 15 Desember 2025

VML

<head>

<style>

v\:* {behavior: url(#default#VML);}

</style>

</head>

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

</html>

DHTML

<HTML>

<HEAD>

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>

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>

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

Intel Web Design Effects IntelAdditive IntelDistortion

<HTML>

<TITLE> Intel Distortion Filter Example </TITLE>

sub window_onload

screen.bufferDepth = -1

OnPokeEffect

end sub

sub OnPokeEffect

n= theImg.filters.item("IntelDistortion").Harmonics

theImg.filters.item("IntelDistortion").Harmonics = n

end sub

sub theImg_OnFilterChange

call SetTimeout( "OnPokeEffect", 100 )

end sub

</script>

<IMG ID=theImg

src=Distort-Temp.bmp

style="filter:IntelDistortion(enabled=1,NoiseScaleU=6,NoiseScaleV=6,ScaleUX=3, ScaleVX=1, ScaleUY=3, ScaleVY=1, ScaleUT=3, ScaleVT=1, Harmonics=3);

position:absolute; left=250; top=90;">

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE>Procedural Effects Template</TITLE>

</HEAD>

sub window_onload

screen.bufferDepth = -1

theImg.filters.item("IntelAdditive").BitmapSeed = "template.bmp"

end sub

sub OnPokeEffect

n = theImg.filters.item("IntelAdditive").NoiseScale

theImg.filters.item("IntelAdditive").NoiseScale = n

end sub

sub theImg_OnFilterChange

call SetTimeout( "OnPokeEffect", 15 )

end sub

</script>

<IMG ID=theImg

src=template.bmp

style="filter:IntelAdditive(Harmonics=6,

NoiseScale=11,

NoiseOffset=-13,

ScaleX=2,

ScaleY=1,

TimeX=-1,

TimeY=0,

enabled=1);

position:absolute; left=250; top=90;">

</HTML>

Scriptlet3

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>

<head>

content="text/html; charset=iso-8859-1">

<title>Sample2</title>

</head>

<!--

Sub window_onload()

ComboText1.Text = "Summer 97 - Introduction"

ComboText1.Memo = "July 97 issue of <em>MIND</em> provides a wide coverage of Dynamic HTML and gives you the basic knowledge to start investigate on your own."

ComboText1.BkgndColor = "Yellow"

ComboText2.Text = "Dynamic HTML in Internet Explorer 4.0"

ComboText2.Memo = "<strong>John P. Grieb</strong> introduces you to the DHTML object model and provides cool samples for image dragging and find/replace text in a HTML page."

ComboText3.Text = "Data-binding in Dynamic HTML"

ComboText3.Memo = "<strong>Rich Rollmann</strong> features data-binding, that is the possibility of receiving data asynchronously from a database server."

ComboText4.Text = "Writing IE40 Controls with VB5"

ComboText4.Memo = "<em>MIND</em> Technical Editor <strong>Josh Trupin</strong> shows how to create ActiveX controls made to be hosted in IE40 environment and aware of DHTML object model."

ComboText5.Text = "Fall 97 - Advanced"

ComboText5.BkgndColor = "Yellow"

ComboText5.Memo = "Once you get a basic knowledge of DHTML you're ready to go further. Advanced DHTML affects things such as the Windows shell, events logging and scriptlets."

ComboText6.Text = "Hooking Up the IE40 Object Model"

ComboText6.Memo = "Need to debug your page? Want to keep under control what users really do? Just insert on the fly a cool ActiveX control to hook up all the document events and more."

ComboText7.Text = "Extending the Shell Support for DHTML files"

ComboText7.Memo = "What about a namespace extension that walks a HTML file and returns a hierarchical view of its content? How it's done? Via DHTML, of course."

ComboText8.Text = "Programming DHTML with Scriptlets"

ComboText8.Memo = "Scriptlets are reusable HTML files that implement a HTML-based component. Using the DHTML object model you can write self-contained and distributable script controls."

end sub

-->

</script>

<p align="center"><a href="http://www.microsoft.com/mind"><img

src="Mind.gif" align="left" border="0" hspace="0" width="290"

height="63"></a><font size="2" face="Tahoma"><strong> This

is a scriptlet-based page. Are you ready for a Dynamic HTML

tour based on </strong><em><strong>MIND</strong></em><strong>

articles?</strong></font></p>

</blockquote>

<p><object id="ComboText1" data="CboText.htm" align="absbottom"

border="0" width="433" height="25" type="text/x-scriptlet"></object>

</p>

<p><object id="ComboText2" data="CboText.htm"

align="absbottom" border="0" width="433" height="25"

type="text/x-scriptlet"></object> <object id="ComboText3"

data="CboText.htm" align="absbottom" border="0" width="433"

height="25" type="text/x-scriptlet"></object> <object

id="ComboText4" data="CboText.htm" align="absbottom"

border="0" width="433" height="25" type="text/x-scriptlet"></object>

</p>

</blockquote>

<p><object id="ComboText5" data="CboText.htm" align="absbottom"

border="0" width="433" height="25" type="text/x-scriptlet"></object>

</p>

<p><object id="ComboText6" data="CboText.htm"

align="absbottom" border="0" width="433" height="25"

type="text/x-scriptlet"></object> <object id="ComboText7"

data="CboText.htm" align="absbottom" border="0" width="433"

height="25" type="text/x-scriptlet"></object> <object

id="ComboText8" data="CboText.htm" align="absbottom"

border="0" width="433" height="25" type="text/x-scriptlet"></object>

</p>

</blockquote>

</body>

</html>

Scriplet 2

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>

<head>

content="text/html; charset=iso-8859-1">

</head>

<p align="center"><font color="#000000" size="5" face="Verdana"><strong>Programming

Dynamic HTML with </strong><em><strong>Scriptlets</strong></em></font><font

color="#000000" size="4"> </font></p>

<hr>

<p><script language="VBScript"><!--

Sub window_onload()

ComboText1.Text = "Programming scriptlets"

ComboText1.Memo = "<STRONG>Scriptlets</STRONG> are a new and cool way to write reusable components with script languages."

ComboText1.MemoFont = "Times New Roman"

ComboText1.MemoColor = "Blue"

ComboText1.BkgndColor = "LightBlue"

ComboText2.Text = "ComboText Script Controls"

ComboText2.Memo = "ComboTexts are script controls written by <strong>Dino Esposito</strong>. They have a <em>Text</em> and a <em>Memo</em> property."

ComboText2.TextColor = "Red"

ComboText2.MemoColor = "Red"

ComboText2.MemoFont = "Times New Roman"

ComboText2.BkgndColor = "White"

Spin1.Value = ComboText1.ExpandBy

Spin2.Value = ComboText2.ExpandBy

end sub

--></script> <script

language="jscript" for="ComboText1" event="onscriptletevent(n,o)">

if( ComboText1.Expanded ) {

Expand1.Caption = "Collapse1";

}

else {

Expand1.Caption = "Expand1";

}

</script>

event="onscriptletevent(n,o)">

if( ComboText2.Expanded ) {

Expand2.Caption = "Collapse2";

}

else {

Expand2.Caption = "Expand2";

}

ComboText1.CancelEvent = 1;

</script> <font size="4"><em><strong>The

following are special Scriptlets called ComboText. <br>

Click the button to have them to drop down. <script

language="VBScript">

<!--

Sub Button1_Click()

ComboText1.Text = Text1.Value

end sub

-->

</script> </strong></em></font></p>

<p><object id="ComboText1" data="CboText.htm" align="absbottom"

border="0" width="400" height="25" type="text/x-scriptlet"></object>

<!--

Sub Check1_Change()

if Check1.Value = 0 then

ComboText1.ButtonPosition = "Left"

else

ComboText1.ButtonPosition = "Right"

end if

end sub

-->

</script> <object id="Check1"

name="Check1"

classid="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"

align="baseline" border="0" width="291" height="24"><param

name="VariousPropertyBits" value="746588179"><param

name="BackColor" value="2147483663"><param name="ForeColor"

value="2147483666"><param name="DisplayStyle" value="4"><param

name="Size" value="7691;635"><param name="Value" value="0"><param

name="Caption" value="Button on right "><param name="FontName"

value="Times New Roman"><param name="FontEffects"

value="1073741825"><param name="FontHeight" value="240"><param

name="FontCharSet" value="0"><param name="FontPitchAndFamily"

value="2"><param name="FontWeight" value="700"></object> <script

language="VBScript">

<!--

Sub Check2_Change()

if Check2.Value = 0 then

ComboText2.ButtonPosition = "Left"

else

ComboText2.ButtonPosition = "Right"

end if

end sub

-->

</script> <object id="ComboText2"

data="CboText.htm" align="absbottom" border="0" width="400"

height="25" type="text/x-scriptlet"></object> <object id="Check2"

name="Check2"

classid="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"

align="baseline" border="0" width="287" height="24"><param

name="VariousPropertyBits" value="746588179"><param

name="BackColor" value="2147483663"><param name="ForeColor"

value="2147483666"><param name="DisplayStyle" value="4"><param

name="Size" value="7585;635"><param name="Value" value="0"><param

name="Caption" value="Button on right "><param name="FontName"

value="Times New Roman"><param name="FontEffects"

value="1073741825"><param name="FontHeight" value="240"><param

name="FontCharSet" value="0"><param name="FontPitchAndFamily"

value="2"><param name="FontWeight" value="700"></object> <br>

<font size="4"><em><strong>Here the </strong></em></font><font

color="#000000" size="4"><em><strong>scriptlet</strong></em></font><font

size="4"><em><strong> space is finished. </strong></em></font></p>

<hr>

<p><object id="Spin1" name="Spin1"

classid="clsid:8BD21D10-EC42-11CE-9E0D-00AA006002F3"

align="baseline" border="0" width="49" height="24"><param

name="VariousPropertyBits" value="746604571"><param

name="MaxLength" value="3"><param name="Size" value="1305;635"><param

name="FontCharSet" value="0"><param name="FontPitchAndFamily"

value="2"><param name="ParagraphAlign" value="2"><param

name="FontWeight" value="0"></object> <strong>Pixels by which the

ComboText #1 will expand. <script language="VBScript"><!--

Sub Expand1_Click()

if ComboText1.Expanded then

ComboText1.Collapse

else

ComboText1.ExpandBy = Spin1.Text

ComboText1.Expand

end if

end sub

--></script> <script

language="VBScript"><!--

Sub Expand2_Click()

if ComboText2.Expanded then

ComboText2.Collapse

else

ComboText2.ExpandBy = Spin2.Text

ComboText2.Expand

end if

end sub

--></script> <object id="Expand1" name="Expand1"

classid="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"

align="middle" border="0" width="96" height="26"><param

name="Caption" value="Expand1"><param name="Size"

value="2540;847"><param name="FontCharSet" value="0"><param

name="FontPitchAndFamily" value="2"><param name="ParagraphAlign"

value="3"><param name="FontWeight" value="0"></object> <br>

classid="clsid:8BD21D10-EC42-11CE-9E0D-00AA006002F3"

align="baseline" border="0" width="49" height="24"><param

name="VariousPropertyBits" value="746604571"><param

name="MaxLength" value="3"><param name="Size" value="1305;635"><param

name="FontCharSet" value="0"><param name="FontPitchAndFamily"

value="2"><param name="ParagraphAlign" value="2"><param

name="FontWeight" value="0"></object>Pixels by which the

ComboText #2 will expand. <object id="Expand2" name="Expand2"

classid="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"

align="middle" border="0" width="96" height="27"><param

name="Caption" value="Expand2"><param name="Size"

value="2540;706"><param name="FontCharSet" value="0"><param

name="FontPitchAndFamily" value="2"><param name="ParagraphAlign"

value="3"><param name="FontWeight" value="0"></object> </strong></p>

<hr>

<p><font size="4"><em><strong>Now, try to modify the content of

the ComboTexts. Type in some text for the Text or Memo

properties.</strong></em></font></p>

<p><object id="Text1" name="Text1"

classid="CLSID:8BD21D10-EC42-11CE-9E0D-00AA006002F3"

align="baseline" border="0" width="635" height="24"><param

name="VariousPropertyBits" value="746604571"><param name="Size"

value="2540;635"><param name="FontCharSet" value="0"><param

name="FontPitchAndFamily" value="2"><param name="FontWeight"

value="0"></object> <br>

classid="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"

align="baseline" border="0" width="96" height="25"><param

name="Caption" value="Text #1"><param name="Size"

value="2540;670"><param name="FontCharSet" value="0"><param

name="FontPitchAndFamily" value="2"><param name="ParagraphAlign"

value="3"><param name="FontWeight" value="0"></object> <script

language="VBScript">

<!--

Sub Button2_Click()

ComboText1.Memo = Text1.Value

end sub

-->

</script> <object id="Button2" name="Button2"

classid="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"

align="baseline" border="0" width="96" height="25"><param

name="Caption" value="Memo #1"><param name="Size"

value="2540;670"><param name="FontCharSet" value="0"><param

name="FontPitchAndFamily" value="2"><param name="ParagraphAlign"

value="3"><param name="FontWeight" value="0"></object> <script

language="VBScript">

<!--

Sub Button3_Click()

ComboText2.Text = Text1.Value

end sub

-->

</script> <object id="Button3" name="Button3"

classid="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"

align="baseline" border="0" width="96" height="25"><param

name="Caption" value="Text #2"><param name="Size"

value="2540;670"><param name="FontCharSet" value="0"><param

name="FontPitchAndFamily" value="2"><param name="ParagraphAlign"

value="3"><param name="FontWeight" value="0"></object> <script

language="VBScript">

<!--

Sub Button4_Click()

ComboText2.Memo = Text1.Value

end sub

-->

</script> <object id="Button4" name="Button4"

classid="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"

align="baseline" border="0" width="103" height="25"><param

name="Caption" value="Memo #2"><param name="Size"

value="2540;670"><param name="FontCharSet" value="0"><param

name="FontPitchAndFamily" value="2"><param name="ParagraphAlign"

value="3"><param name="FontWeight" value="0"></object> </p>

</body>

</html>

<!DOCTYPE HTML PUBLIC "-//IETF//DAREA HTML//EN">

<head>

content="text/html; charset=iso-8859-1">

<title>ComboText Scriptlet</title>

</head>

<body>

</script>

InitComboText

</script>

if window.event.srcElement.id = "push" then

DoInsertText

else

if window.event.srcElement.id = "pop" then

DoRemoveText

end if

</script>

' utility for quoting

' -------------------------------------------------------

Function Quote( s )

s = Chr(34) + s + Chr(34)

Quote = s

End Function

' Prepare the HTML string for Title

' -------------------------------------------------------

Function FormatText

sPrefix = "<DIV id=text>"

sSuffix = " " + "<br></DIV>"

if mButtonPosition = "Right" then

sBody = mText + " " + mPushImage

else

sBody = mPushImage + " " + mText

end if

FormatText = sPrefix + sBody + sSuffix

End Function

' Prepare the HTML string for Memo

' -------------------------------------------------------

Function FormatMemo

sPrefix = "<DIV id=memo>"

sSuffix = " " + "</DIV>"

if mButtonPosition = "Right" then

sBody = mMemo + " " + sImage

else

sBody = sPopImage + " " + mMemo

end if

FormatMemo = sPrefix + sBody + sSuffix

End Function

' Initialize the control

' -------------------------------------------------------

Sub InitComboText

' save some standard settings

document.body.style.setAttribute "marginTop", "0"

document.body.style.setAttribute "marginBottom", "0"

document.body.style.setAttribute "marginLeft", "0"

document.body.style.setAttribute "marginRight", "0"

' put text

DoPutText mText

document.fgColor = mTextColor

document.bgColor = mBkgndColor

' make selectable the scriplet content

if InScriptlet then

window.external.selectableContent = mSelectable

end if

End Sub

' Add new text

' -------------------------------------------------------

Sub DoInsertText

document.body.insertAdjacentHTML "BeforeEnd", FormatMemo

DoModify "memo", "fontFamily", mMemoFont

DoModify "memo", "fontSize", mMemoFontSize

DoModify "memo", "fontWeight", mMemoFontWeight

DoModify "memo", "color", mMemoColor

DoModify "memo", "marginLeft", 5

' change image

Set coll = document.images

Set elem = coll.item(0)

elem.outerHTML = mPopImage

MyPage.style.pixelHeight = MyPage.style.pixelHeight + mExpandBy

if InScriptlet then

window.external.scrollbar = True

end if

mExpanded = True

if InScriptlet then

window.external.RaiseEvent "OnExpand", window.document

end if

End Sub

' Remove new text

' -------------------------------------------------------

Sub DoRemoveText

Set coll = document.images

Set elem = coll.item(0)

elem.outerHTML = mPushImage

' remove DIV tag

Set e = GetElemById( "DIV", "memo" )

e.outerHTML = ""

MyPage.style.pixelHeight = MyPage.style.pixelHeight - mExpandBy

if InScriptlet then

window.external.scrollbar = False

end if

mExpanded = False

if InScriptlet then

window.external.RaiseEvent "OnCollapse", window.document

end if

End Sub

' Search for the given tag and id

' ----------------------------------

Function GetElemById( tagName, idName )

Set GetElemById = Nothing

Set coll = document.all.tags( tagName )

for i=0 to coll.length-1

if coll.item(i).id = idName then

Set GetElemById = coll.item(i)

Exit Function

end if

Set coll = Nothing

End Function

' Set text

' ----------------------------------

Sub DoPutText( sText )

if mExpanded then

DoRemoveText

end if

mText = sText

Set e = GetElemById( "DIV", "text" )

if Not e is Nothing then

e.outerHTML = FormatText

end if

DoModify "text", "fontFamily", mTextFont

DoModify "text", "fontSize", mTextFontSize

DoModify "text", "fontWeight", mTextFontWeight

DoModify "text", "marginLeft", 5

End Sub

' Set memo text

' ----------------------------------

Sub DoPutMemo( sMemo )

if mExpanded then

DoRemoveText

end if

mMemo = sMemo

Set e = GetElemById( "DIV", "memo" )

if Not e is Nothing then

e.outerHTML = FormatMemo

end if

Set e = Nothing

End Sub

' Change the element styles

' ----------------------------------

Sub DoModify( idName, attrib, value )

Set e = GetElemById( "DIV", idName )

if Not e is Nothing then

e.style.setAttribute attrib, value

else

Exit Sub

end if

Set e = Nothing

' this way it works fine...

if attrib="color" And idName="memo" then

Set coll = document.all.tags("DIV")

coll.item(1).style.color = mMemoColor

end if

End Sub

</script>

// declare the object interface

public_description = new CreateComboText;

var InScriptlet = (typeof(window.external.version) == "string")

// Vars that match properties

/*---------------------------------*/

mExpandBy = 50;

mSelectable = 0;

mMemo = "";

mText = "";

mButtonPosition = "Left";

mTextFont = "Tahoma";

mTextFontSize = "12pt";

mTextFontWeight = "700";

mMemoFont = "Tahoma";

mMemoFontSize = "10pt";

mMemoFontWeight = "400";

mMemoColor = "Black";

mTextColor = "Blue";

mBkgndColor = "gainsboro"

mCancelEvent = 0

mExpanded = 0;

// Internals

/*---------------------------------*/

mPushImage = "<img id=" + Quote("push") + " src=push.gif align=middle alt="+Quote("Expand text")+">";

mPopImage = "<img id=" + Quote("pop") + " src=pop.gif align=middle alt="+Quote("Collapse")+">";

/*---------------------------------*/

function CreateComboText() {

// This function define the scriptlet interface in terms of

// properties, methods and events.

// Properties

this.put_CancelEvent = put_CancelEvent;

this.get_Expanded = get_Expanded;

this.put_Text = put_Text;

this.get_Text = get_Text;

this.put_Memo = put_Memo;

this.get_Memo = get_Memo;

this.put_ExpandBy = put_ExpandBy;

this.get_ExpandBy = get_ExpandBy;

this.put_ButtonPosition = put_ButtonPosition;

this.get_ButtonPosition = get_ButtonPosition;

this.put_Selectable = put_Selectable;

this.get_Selectable = get_Selectable;

this.put_TextFont = put_TextFont;

this.put_TextFontSize = put_TextFontSize;

this.put_TextFontWeight = put_TextFontWeight;

this.put_TextColor = put_TextColor;

this.get_TextColor = get_TextColor;

this.put_BkgndColor = put_BkgndColor;

this.get_BkgndColor = get_BkgndColor;

this.put_MemoFont = put_MemoFont;

this.put_MemoFontSize = put_MemoFontSize;

this.put_MemoFontWeight = put_MemoFontWeight;

this.put_MemoColor = put_MemoColor;

this.get_MemoColor = get_MemoColor;

// Methods

this.Expand = InsertMemoText;

this.Collapse = RemoveMemoText;

// Events

this.event_OnExpand = "";

this.event_OnCollapse = "";

}

/*---------------------------------*/

function InsertMemoText() {

// This function expands the document by inserting the memo text

DoInsertText();

return 1;

}

/*---------------------------------*/

function RemoveMemoText() {

// This function collapses the document by removing the memo text

DoRemoveText();

return 1;

}

/*---------------------------------*/

function put_CancelEvent( bYes ) {

mCancelEvent = bYes

return 1;

}

/*---------------------------------*/

function get_Expanded() {

return mExpanded;

}

/*---------------------------------*/

function put_Text( sText ) {

DoPutText( sText );

return 1;

}

/*---------------------------------*/

function get_Text() {

return mText;

}

/*---------------------------------*/

function put_Memo( sMemo ) {

DoPutMemo( sMemo );

return 1;

}

/*---------------------------------*/

function get_Memo() {

return mMemo;

}

/*---------------------------------*/

function put_Selectable( b ) {

mSelectable = b;

if( InScriptlet ) {

window.external.selectableContent = mSelectable;

}

return 1;

}

/*---------------------------------*/

function get_Selectable() {

return mSelectable;

}

/*---------------------------------*/

function put_ButtonPosition( pos ) {

mButtonPosition = pos;

DoPutText( mText );

return 1;

}

/*---------------------------------*/

function get_ButtonPosition() {

return mButtonPosition;

}

/*---------------------------------*/

function put_ExpandBy( pixel ) {

if( mExpanded ) {

DoRemoveText();

}

mExpandBy = pixel;

return 1;

}

/*---------------------------------*/

function get_ExpandBy() {

return mExpandBy;

}

/*---------------------------------*/

function put_TextFont( font ) {

mTextFont = font

DoModify( "text", "fontFamily", mTextFont );

return 1;

}

/*---------------------------------*/

function put_TextFontSize( size ) {

mTextFontSize = size;

DoModify( "text", "fontSize", mTextFontSize );

return 1;

}

/*---------------------------------*/

function put_TextFontWeight( bold ) {

mTextFontWeight = bold;

DoModify( "text", "fontWeight", mTextFontWeight );

return 1;

}

/*---------------------------------*/

function put_TextColor( color ) {

mTextColor = color;

document.fgColor = mTextColor;

return 1;

}

/*---------------------------------*/

function get_TextColor( ) {

return mTextColor;

}

/*---------------------------------*/

function put_MemoFont( font ) {

mMemoFont = font

DoModify( "memo", "fontFamily", mMemoFont );

return 1;

}

/*---------------------------------*/

function put_MemoFontSize( size ) {

mMemoFontSize = size

DoModify( "memo", "fontSize", mMemoFontSize );

return 1;

}

/*---------------------------------*/

function put_MemoFontWeight( bold ) {

mMemoFontWeight = bold;

DoModify( "memo", "fontWeight", mMemoFontWeight );

return 1;

}

/*---------------------------------*/

function put_MemoColor( color ) {

mMemoColor = color;

DoModify( "memo", "color", mMemoColor );

return 1;

}

/*---------------------------------*/

function get_MemoColor() {

return mMemoColor;

}

/*---------------------------------*/

function put_BkgndColor( color ) {

mBkgndColor = color;

document.bgColor = mBkgndColor

return 1;

}

/*---------------------------------*/

function get_BkgndColor() {

return mBkgndColor;

}

</script>

</body>

</html>

Scriptlet 1

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">

<html>

<head>

content="text/html; charset=iso-8859-1">

</head>

Sub window_onload()

HotImage1.Image = "mind1.gif"

HotImage1.HotImage = "mind2.gif"

HotImage2.Image = "msj1.gif"

HotImage2.HotImage = "msj2.gif"

HotImage1.Description = "Microsoft Interactive Developer"

HotImage2.Description = "Microsoft Systems Journal"

Check1.Value = 1

end sub

--></script><script language="VBScript"

for="HotImage1" event="onclick"><!--

MsgBox "Congratulations for your choice!"+Chr(13)+Chr(10)+"Your preference goes to " + HotImage1.Description, 0, "Choose Magazine"

--></script><script

language="VBScript" for="HotImage2" event="onclick"><!--

MsgBox "Congratulations for your choice!"+Chr(13)+Chr(10)+"Your preference goes to " + HotImage2.Description, 0, "Choose Magazine"

--></script>

<p><font size="4" face="Verdana">This is a HTML page generated by<strong>

Scriptlet Wizard</strong>. </font></p>

<hr>

<p><font size="4" face="Verdana">Give your preference to the

finest programming magazine:</font> </p>

<tr>

<td><p align="center"><object id="HotImage1"

data="HotImage.htm" align="absbottom" border="0"

width="300" height="100" type="text/x-scriptlet"></object>

</p>

</td>

<td><p align="center"><object id="HotImage2"

data="HotImage.htm" align="absbottom" border="0"

width="300" height="100" type="text/x-scriptlet"></object>

</p>

</td>

</tr>

</table>

</center></div>

<p><font size="4" face="Verdana">Just click on the logo and go! </font><font

size="4"><script language="VBScript"><!--

origColor1 = ""

origColor2 = ""

Sub Button2_Click()

if HotImage1.BackgroundColor <> "gainsboro" then

origColor1 = HotImage1.BackgroundColor

HotImage1.BackgroundColor = "gainsboro"

else

HotImage1.BackgroundColor = origColor1

end if

if HotImage2.BackgroundColor <> "gainsboro" then

origColor2 = HotImage2.BackgroundColor

HotImage2.BackgroundColor = "gainsboro"

else

HotImage2.BackgroundColor = origColor2

end if

end sub

--></script> <object

id="Button2" name="Button2"

classid="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"

align="right" border="0" hspace="0" width="96" height="32"><param

name="Caption" value="Change Bkgnd"><param name="Size"

value="2540;847"><param name="FontCharSet" value="0"><param

name="FontPitchAndFamily" value="2"><param name="ParagraphAlign"

value="3"><param name="FontWeight" value="0"></object></font><font

size="4" face="Verdana"> </font><font size="4"><script

language="VBScript"><!--

bOrig = 1

Sub Button1_Click()

if bOrig = 1 then

HotImage1.Image = "msj1.gif"

HotImage1.HotImage = "msj2.gif"

HotImage1.Description = "Microsoft Systems Journal"

HotImage2.Image = "mind1.gif"

HotImage2.HotImage = "mind2.gif"

HotImage2.Description = "Microsoft Interactive Developer"

bOrig = 0

else

HotImage1.Image = "mind1.gif"

HotImage1.HotImage = "mind2.gif"

HotImage1.Description = "Microsoft Interactive Developer"

HotImage2.Image = "msj1.gif"

HotImage2.HotImage = "msj2.gif"

HotImage2.Description = "Microsoft Systems Journal"

bOrig = 1

end if

end sub

--></script> <object id="Button1" name="Button1"

classid="CLSID:D7053240-CE69-11CD-A777-00DD01143C57"

align="right" border="0" hspace="0" width="96" height="32"><param

name="Caption" value="Invert"><param name="Size" value="2540;847"><param

name="FontCharSet" value="0"><param name="FontPitchAndFamily"

value="2"><param name="ParagraphAlign" value="3"><param

name="FontWeight" value="0"></object> </font></p>

<!--

Sub Check1_Change()

HotImage1.Enabled = Check1.Value

HotImage2.Enabled = Check1.Value

end sub

-->

</script> <object

id="Check1" name="Check1"

classid="CLSID:8BD21D40-EC42-11CE-9E0D-00AA006002F3"

align="baseline" border="0" width="366" height="24"><param

name="BackColor" value="2147483663"><param name="ForeColor"

value="2147483666"><param name="DisplayStyle" value="4"><param

name="Size" value="7435;635"><param name="Value" value="0"><param

name="Caption"

value="Enable the HotImage capability for both objects"><param

name="FontName" value="Tahoma"><param name="FontEffects"

value="1073741825"><param name="FontHeight" value="200"><param

name="FontCharSet" value="0"><param name="FontPitchAndFamily"

value="2"><param name="FontWeight" value="700"></object> </font></p>

</body>

</html>

Calendar

<html>

<head>

<title>Calendar</title>

</head>

InitCalendar(mDate.getMonth(), mDate.getDate(), mDate.getYear());

</script>

<script

language="JavaScript">

public_description = new public_description_ctor;

var InScriptlet = (typeof(window.external.version) == "string")

function public_description_ctor() {

this.put_BackColor = put_BackColor;

this.get_BackColor = get_BackColor;

this.put_ForeColor = put_ForeColor;

this.get_ForeColor = get_ForeColor;

// foreground color of the days of the previous and next months

this.put_NonCurForeColor = put_NonCurForeColor;

this.get_NonCurForeColor = get_NonCurForeColor;

// background color of the selected date

this.put_SelectColor = put_SelectColor;

this.get_SelectColor = get_SelectColor;

// foreground color of the day the mouse is over

this.put_HighlightColor = put_HighlightColor;

this.get_HighlightColor = get_HighlightColor;

// foreground color of the calendar headers

this.put_HeaderColor = put_HeaderColor;

this.get_HeaderColor = get_HeaderColor;

this.put_Value = put_Value;

this.get_Value = get_Value;

this.event_OnChange = ""; // fires when the value of the calendar changes

this.event_NewMonth = ""; // fires when the month changes, always preceded by an OnChange event

this.event_NewYear = ""; // fires when the year changes, always preceded by an OnChange event

}

mDate = new Date();

mSelectBackgroundColor = "Gray";

mStandardBackgroundColor = "White";

mStandardForeColor = "Black";

mHeaderColor = "Black";

mNonCurMonthForeColor = "Silver";

mHighlightColor = "red";

mPreviousElement = Me;

mFirstOfMonthCol = 0; // X-coord of first of month

mLastOfMonthCol = 0; // X-coord of last of month

mLastOfMonthRow = 0; // Y-coord of last of month

/*****************************************************************************/

/* @Name: InitCalendar

/* @Purpose: Initializes or refreshes the calendar

/* @Inputs: iMonth - Integer representing the month (0 for January)

/* iDay - Integer representing the day of the month

/* iYear - Integer representing the year

/* @Notes: the year is subject to interpretation by the JavaScript

/* date object (i.e. years 0-99 get converted to 1900-1999)

/*****************************************************************************/

function InitCalendar(iMonth, iDay, iYear) {

CurMonth.innerText = getStringMonth(iMonth);

CurMonth.style.color = mHeaderColor;

CurYear.innerText = getStringYear(iYear);

CurYear.style.color = mHeaderColor;

// set the date to the first day of iMonth/iYear

// to get the column number for the first day of the month

// and set the selected elements in the month and year dropdowns

mDate.setDate(1);

mDate.setMonth(iMonth);

if(iYear > 100) {

mDate.setYear(iYear);

iNewSelection = iYear - 1970;

} else {

mDate.setYear(1900 + iYear);

iNewSelection = iYear - 70;

}

document.all("selYear").selectedIndex = iNewSelection;

document.all("selMonth").selectedIndex = iMonth;

iFirstOfMonthCol = mDate.getDay();

mDate.setDate(iDay);

iTmp = iDay + iFirstOfMonthCol - 1;

iDayRow = Math.floor((iDay + iFirstOfMonthCol - 1) / 7);

if (iFirstOfMonthCol == 0) {

// when the first of the month is Sunday, start in the second row

iFirstRow = 1;

iDayRow += 1;

} else {

iFirstRow = 0;

}

// de-select the previous element

mPreviousElement.style.backgroundColor = mStandardBackgroundColor;

// once the column of the first of the month is known, the whole calendar can be populated

iDaysInMonth = getDaysInMonth(iMonth, iYear);

for(iCurRow = iFirstRow, iCurCol = iFirstOfMonthCol, iDayIndex = 1; iDayIndex <= iDaysInMonth; iDayIndex += 1, iCurCol += 1) {

if(iCurCol > 6) {

iCurCol = 0;

iCurRow += 1;

}

document.all("Cell" + iCurCol + iCurRow).innerText = iDayIndex;

document.all("Cell" + iCurCol + iCurRow).style.color = mStandardForeColor;

}

// store the locations of the first and last days of the month in the grid

mFirstOfMonthCol = iFirstOfMonthCol;

mLastOfMonthCol = (iCurCol + 6) % 7;

if(iCurCol == 0)

mLastOfMonthRow = iCurRow - 1;

else

mLastOfMonthRow = iCurRow;

// populate the empty sections of the grid with the next and previous months' days

for(iDayIndex = 1; iCurRow <= 4 || iCurCol <= 6; iCurCol += 1, iDayIndex += 1) {

if(iCurCol > 6) {

iCurCol = 0;

iCurRow += 1;

}

document.all("Cell" + iCurCol + iCurRow).innerText = iDayIndex;

document.all("Cell" + iCurCol + iCurRow).style.color = mNonCurMonthForeColor;

}

iPrevMonth = (mDate.getMonth() + 11) % 12;

iPrevMonthLastDay = getDaysInMonth(iPrevMonth, mDate.getYear());

for(iDayIndex = iPrevMonthLastDay, iCurRow = 0, iCurCol = (mFirstOfMonthCol + 6) % 7; iCurCol >= 0; iCurCol -= 1, iDayIndex -=1) {

document.all("Cell" + iCurCol + iCurRow).innerText = iDayIndex;

document.all("Cell" + iCurCol + iCurRow).style.color = mNonCurMonthForeColor;

}

iDayCol = mDate.getDay();

// highlight the date in the calendar

document.all("Cell" + iDayCol + iDayRow).style.backgroundColor = mSelectBackgroundColor;

mPreviousElement = document.all("Cell" + iDayCol + iDayRow);

}

/*****************************************************************************/

/* @Name: put_NonCurForeColor

/* @Purpose: Sets the NonCurForeColor property

/* @Inputs: stColor - the Color you wish to set the property to

/*****************************************************************************/

function put_NonCurForeColor(stColor) {

mNonCurMonthForeColor = stColor;

// change the forecolor of the previous month elements

iFinalCol = (mFirstOfMonthCol + 6) % 7;

for(iColIndex = 0; iColIndex <= iFinalCol; iColIndex += 1)

document.all("Cell" + iColIndex + "0").style.color = stColor;

// change the forecolor of the next month's elements

iFirstCol = (mLastOfMonthCol + 1) % 7;

if(iFirstCol == 0)

iFirstRow = mLastOfMonthRow + 1;

else

iFirstRow = mLastOfMonthRow;

for(iRowIndex = iFirstRow; iRowIndex <= 5; iRowIndex += 1) {

for(iColIndex = iFirstCol; iColIndex <=6; iColIndex += 1) {

document.all("Cell" + iColIndex + iRowIndex).style.color = stColor;

}

/*****************************************************************************/

/* @Name: get_NonCurForeColor

/* @Purpose: Retrieves the NonCurForeColor property

/* @Output: A string containing the current NonCurForeColor

/*****************************************************************************/

function get_NonCurForeColor(stColor) {

return mNonCurMonthForeColor;

}

/*****************************************************************************/

/* @Name: put_HeaderColor

/* @Purpose: Sets the HeaderColor property

/* @Inputs: stColor - the color you wish to set the property to

/*****************************************************************************/

function put_HeaderColor(stColor) {

mHeaderColor = stColor;

CurMonth.style.color = stColor;

CurYear.style.color = stColor;

DayHeaders.style.color = stColor;

}

/*****************************************************************************/

/* @Name: get_HeaderColor

/* @Purpose: Retrieves the HeaderColor property

/* @Output: A string containing the current HeaderColor

/*****************************************************************************/

function get_HeaderColor(stColor) {

return mHeaderColor;

}

/*****************************************************************************/

/* @Name: put_HighlightColor

/* @Purpose: Sets the HighlightColor property

/* @Inputs: stColor - the color you wish to set the property to

/*****************************************************************************/

function put_HighlightColor(stColor) {

mHighlightColor = stColor;

}

/*****************************************************************************/

/* @Name: get_HighlightColor

/* @Purpose: Retrieves the HighlightColor property

/* @Output: A string containing the current HighlightColor

/*****************************************************************************/

function get_HighlightColor() {

return mHighlightColor;

}

/*****************************************************************************/

/* @Name: put_SelectColor

/* @Purpose: Sets the SelectColor property

/* @Inputs: stColor - the color you wish to set the property to

/*****************************************************************************/

function put_SelectColor(stColor) {

mSelectBackgroundColor = stColor;

mPreviousElement.style.backgroundColor = stColor;

}

/*****************************************************************************/

/* @Name: get_SelectColor

/* @Purpose: Retrieves the SelectColor property

/* @Output: A string containing the current SelectColor

/*****************************************************************************/

function get_SelectColor() {

return mSelectBackgroundColor;

}

/*****************************************************************************/

/* @Name: put_ForeColor

/* @Purpose: Sets the ForeColor property

/* @Inputs: stColor - the color you wish to set the property to

/*****************************************************************************/

function put_ForeColor(stColor) {

mStandardForeColor = stColor;

iFirstCol = mFirstOfMonthCol;

if(iFirstCol == 0)

iFirstRow = 1;

else

iFirstRow = 0;

for(iColIndex = iFirstCol, iRowIndex = iFirstRow; iRowIndex < mLastOfMonthRow || iColIndex <= mLastOfMonthCol; iColIndex+=1) {

if(iColIndex > 6) {

iColIndex = 0;

iRowIndex += 1;

}

document.all("Cell" + iColIndex + iRowIndex).style.color = stColor;

}

/*****************************************************************************/

/* @Name: get_ForeColor

/* @Purpose: Retrieves the ForeColor property

/* @Output: A string containing the current ForeColor

/*****************************************************************************/

function get_ForeColor() {

return mStandardForeColor;

}

/*****************************************************************************/

/* @Name: put_BackColor

/* @Purpose: Sets the BackColor property

/* @Inputs: stColor - the color you wish to set the property to

/*****************************************************************************/

function put_BackColor(stColor) {

mStandardBackgroundColor = stColor;

Me.style.backgroundColor = stColor;

document.all("selMonth").style.backgroundColor = stColor;

document.all("selYear").style.backgroundColor = stColor;

for(iColIndex = 0, iRowIndex = 0; iRowIndex <= 4 || iColIndex <= 6; iColIndex += 1) {

if(iColIndex > 6) {

iColIndex = 0;

iRowIndex += 1;

}

if("Cell" + iColIndex + iRowIndex != mPreviousElement.id)

document.all("Cell" + iColIndex + iRowIndex).style.backgroundColor = stColor;

}

/*****************************************************************************/

/* @Name: get_BackColor

/* @Purpose: Retrieves the BackColor property

/* @Output: A string containing the current BackColor

/*****************************************************************************/

function get_BackColor() {

return mStandardBackgroundColor;

}

/*****************************************************************************/

/* @Name: put_Value

/* @Purpose: Sets the Value property and refreshes the calendar

/* @Inputs: stDate - string representing the month, day, and year in

/* "mm/dd/yy[yy]" format

/*****************************************************************************/

function put_Value(stDate) {

// parse the string for the month, day, and year, and call InitCalendar

mDate.setTime(Date.parse(stDate));

InitCalendar(mDate.getMonth(), mDate.getDate(), mDate.getYear());

}

/*****************************************************************************/

/* @Name: get_Value

/* @Purpose: Retrieves the Value property of the calendar

/* @Output: Returns a string in "mm/dd/yyyy" format

/*****************************************************************************/

function get_Value() {

iMonth = mDate.getMonth() + 1;

iYear = mDate.getYear();

return iMonth + "/" + mDate.getDate() + "/" + iYear;

}

/*****************************************************************************/

/* @Name: monthChange

/* @Purpose: Event handler for when the month is changed with the dropdown.

/* It refreshes the calendar and raises the appropriate events

/*****************************************************************************/

function monthChange() {

mDate.setMonth(document.all("selMonth").selectedIndex);

InitCalendar(mDate.getMonth(), mDate.getDate(), mDate.getYear());

if (InScriptlet) {

window.external.RaiseEvent("OnChange", window.event);

window.external.RaiseEvent("NewMonth", window.event);

}

/*****************************************************************************/

/* @Name: selYearChange

/* @Purpose: Event handler for when the year is changed with the dropdown

/* It refreshes the calendar and raises the appropriate events

/*****************************************************************************/

function selYearChange() {

// to set the year, add 1900 + 70 because the 0th element of the <select> tag has value 70

mDate.setYear(1970 + document.all("selYear").selectedIndex);

InitCalendar(mDate.getMonth(), mDate.getDate(), mDate.getYear());

if (InScriptlet) {

window.external.RaiseEvent("OnChange", window.event);

window.external.RaiseEvent("NewYear", window.event);

}

/*****************************************************************************/

/* @Name: getDaysInMonth

/* @Purpose: Determines the number of days in a given month in a given year

/* @Inputs: iMonth - integer representing the month (0 for January)

/* iYear - integer representing the year in "yyyy" format

/* @Output: Integer number of days in the month

/*****************************************************************************/

function getDaysInMonth(iMonth, iYear) {

if(iMonth == 0)

return 31;

else if(iMonth == 1) {

if(iYear%4 == 0 && !(iYear%100 == 0) || iYear%400 == 0)

return 29;

else

return 28;

}

else if(iMonth == 2)

return 31;

else if(iMonth == 3)

return 30;

else if(iMonth == 4)

return 31;

else if(iMonth == 5)

return 30;

else if(iMonth == 6)

return 31;

else if(iMonth == 7)

return 31;

else if(iMonth == 8)

return 30;

else if(iMonth == 9)

return 31;

else if(iMonth == 10)

return 30;

else

return 31;

}

/*****************************************************************************/

/* @Name: getStringYear

/* @Purpose: Returns a string representing a year

/* @Inputs: iYear - integer representing the year

/* @Output: A string containing the year

/* @Notes: this is needed to mirror the JavaScript date object's behavior

/* on integers from 0-99

/*****************************************************************************/

function getStringYear(iYear) {

if(iYear > 100)

return(iYear);

else

return (1900 + iYear);

}

/*****************************************************************************/

/* @Name: getStringMonth

/* @Purpose: Get a string associated with an integer month

/* @Inputs: iMonth - the integer month you want to represent as a string

/* @Output: String representing the month that was passed in

/*****************************************************************************/

function getStringMonth(iMonth) {

if(iMonth == 0)

return "January";

else if(iMonth == 1)

return "February";

else if(iMonth == 2)

return "March";

else if(iMonth == 3)

return "April";

else if(iMonth == 4)

return "May";

else if(iMonth == 5)

return "June";

else if(iMonth == 6)

return "July";

else if(iMonth == 7)

return "August";

else if(iMonth == 8)

return "September";

else if(iMonth == 9)

return "October";

else if(iMonth == 10)

return "November";

else

return "December";

}

/*****************************************************************************/

/* @Name: CalendarClick

/* @Purpose: Event handler for all clicks on the calendar.

/*****************************************************************************/

function CalendarClick() {

current = window.event.srcElement;

// three of the possible click locations need to be processed.

// 1. A click on a day in the current month

// 2. A click on a day in the previous month

// 3. A click on a day in the next month

if (IsValidCurMonthElement(current)) {

clickedDay = current.innerText;

// make sure the click didn't occur on the day that was already selected

if(clickedDay != mDate.getDate()) {

mPreviousElement.style.backgroundColor = mStandardBackgroundColor;

current.style.color = mStandardForeColor;

current.style.backgroundColor = mSelectBackgroundColor;

mPreviousElement = current;

mDate.setDate(clickedDay);

if (InScriptlet) { window.external.RaiseEvent("OnChange", window.event); }

}

} else if(IsValidPrevMonthElement(current)) {

// the click occurred in the previous month, so back up a month and

// refresh the calendar

iYear = mDate.getYear();

iNewMonth = mDate.getMonth() - 1;

if(iNewMonth < 0) {

iNewMonth = 11;

iYear -= 1;

}

// HACK: the innerText has weird chars at the end,

// so let the date object parse it and pass to InitCalendar()

mDate.setMonth(iNewMonth);

mDate.setDate(current.innerText);

InitCalendar(iNewMonth, mDate.getDate(), iYear);

if (InScriptlet) {

window.external.RaiseEvent("OnChange", window.event);

window.external.RaiseEvent("NewMonth", window.event);

}

// if the new current month is December, then it's the

// previous year

if(iNewMonth == 11) {

if (InScriptlet) { window.external.RaiseEvent("NewYear", window.event); }

}

} else if(IsValidNextMonthElement(current)) {

// the click occurred in the following month, so move forward a month and

// refresh the calendar

iNewMonth = mDate.getMonth() + 1;

iYear = mDate.getYear();

if(iNewMonth > 11) {

iNewMonth = 0;

iYear += 1;

}

mDate.setMonth(iNewMonth);

mDate.setDate(current.innerText);

InitCalendar(iNewMonth, mDate.getDate(), iYear);

if (InScriptlet) {

window.external.RaiseEvent("OnChange", window.event);

window.external.RaiseEvent("NewMonth", window.event);

}

// if the new current month is January, then it's a new year

if(iNewMonth == 0) {

if (InScriptlet) { window.external.RaiseEvent("NewYear", window.event); }

}

// bubble the click event so the container can catch it

if (InScriptlet) { window.external.bubbleEvent(); }

}

/*****************************************************************************/

/* @Name: mseOver

/* @Purpose: Event handler for when the mouse moves into different table

// elements of the calendar

/*****************************************************************************/

function mseOver() {

el = window.event.srcElement;

if(IsValidCurMonthElement(el) && el != mPreviousElement) {

el.style.color = mHighlightColor;

}

/*****************************************************************************/

/* @Name: mseOut

/* @Purpose: Event handler for when the mouse moves out of each table

// element of the calendar

/*****************************************************************************/

function mseOut() {

el = window.event.srcElement;

if(IsValidCurMonthElement(el)) {

el.style.color = mStandardForeColor;

}

/*****************************************************************************/

/* @Name: IsValidNextMonthElement

/* @Purpose: Determines if the table element that was clicked on is a day

/* in the next month

/* @Inputs: el - The source element for the event

/* @Output: true - if the element is from the next month

/* false - otherwise

/*****************************************************************************/

function IsValidNextMonthElement(el) {

retVal = false;

if(el.id.substring(0, 4) == "Cell") {

iCol = el.id.substring(4, 5);

iRow = el.id.substring(5, 6);

if(iRow > mLastOfMonthRow || iRow == mLastOfMonthRow && iCol > mLastOfMonthCol)

retVal = true;

}

return retVal;

}

/*****************************************************************************/

/* @Name: IsValidPrevMonthElement

/* @Purpose: Determines if the table element that was clicked on is a day

/* in the previous month

/* @Inputs: el - The source element for the event

/* @Output: true - if the element is from the previous month

/* false - otherwise

/*****************************************************************************/

function IsValidPrevMonthElement(el) {

retVal = false;

// make sure it's one of the day elements

if(el.id.substring(0, 4) == "Cell") {

iCol = el.id.substring(4, 5);

iRow = el.id.substring(5, 6);

if(iRow == 0)

if(mFirstOfMonthCol == 0 || iCol < mFirstOfMonthCol)

retVal = true;

}

return retVal;

}

/*****************************************************************************/

/* @Name: IsValidCurMonthElement

/* @Purpose: Determines if the table element that was clicked on is a day

/* in the current month

/* @Inputs: el - The source element for the event

/* @Output: true - if the element is from the current month

/* false - otherwise

/*****************************************************************************/

function IsValidCurMonthElement(el) {

retVal = false;

// make sure it's one of the day elements...

if(el.id.substring(0, 4) == "Cell") {

iCol = el.id.substring(4, 5);

iRow = el.id.substring(5, 6);

if(iRow == 0) {

if(0 < mFirstOfMonthCol && mFirstOfMonthCol <= iCol)

retVal = true;

} else if (iRow < mLastOfMonthRow || (iRow == mLastOfMonthRow && iCol <= mLastOfMonthCol))

retVal = true;

}

return retVal;

}

</script>

<table width="100%" onclick="CalendarClick()" onmouseover="mseOver()"

onmouseout="mseOut()" border="1" cellpadding="3" cellspacing="1">

<tr>

<th align="center" colspan="3" width="43%"><span id="CurMonth">month and</span> <span

id="CurYear">year</span></th>

<th align="center" colspan="2" width="29%"><select id="selMonth" name="selMonth"

onchange="monthChange()" size="1">

<option value="0">January</option>

<option value="1">February</option>

<option value="2">March</option>

<option value="3">April</option>

<option value="7">August</option>

<option value="8">September</option>

<option value="9">October</option>

<option value="10">November</option>

<option value="11">December</option>

</select></th>

<th align="center" colspan="2" width="28%"><select id="selYear" name="selYear"

onchange="selYearChange()" size="1">

</select> </th>

</tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>