VBSCRIPT Display

[Total: 0    Average: 0/5]

This example uses VBScript and not javascript to dynamically alter the appearance of the page.

Head Code:

<SCRIPT LANGUAGE="VBScript">
Sub Header_onclick()
	If MainHeader.style.display = "" then
		MainHeader.style.display = "none"
	Else 
		MainHeader.style.display = ""
	End If
End Sub

Sub Header_onmouseover()
	Header.style.color= "#FF3300"
End Sub

Sub Header_onmouseout()
	Header.style.color= "#000000"
End Sub

Sub Head1_onclick()
	If TOC1.style.display = "" then
		TOC1.style.display = "none"
	Else 
		TOC1.style.display = ""
	End If
End Sub
	
Sub Head1_onmouseover()
	Head1.style.color= "#FF3300"
End Sub

Sub Head1_onmouseout()
	Head1.style.color= "#000000"
End Sub

Sub Head2_onclick()
	If TOC2.style.display = "" then
		TOC2.style.display = "none"
	Else 
		TOC2.style.display = ""
	End If
End Sub

Sub Head2_onmouseover()
	Head2.style.color= "#FF3300"
End Sub

Sub Head2_onmouseout()
	Head2.style.color= "#000000"
End Sub

Sub Head3_onclick()
	If TOC3.style.display = "" then
		TOC3.style.display = "none"
	Else 
		TOC3.style.display = ""
	End If
End Sub

Sub Head3_onmouseover()
	Head3.style.color= "#FF3300"
End Sub

Sub Head3_onmouseout()
	Head3.style.color= "#000000"
End Sub

Sub Head4_onclick()
	If TOC4.style.display = "" then
		TOC4.style.display = "none"
	Else 
		TOC4.style.display = ""
	End If
End Sub

Sub Head4_onmouseover()
	Head4.style.color= "#FF3300"
End Sub

Sub Head4_onmouseout()
	Head4.style.color= "#000000"
End Sub

</SCRIPT>	

Body Code:

<FONT FACE="Verdana" SIZE=2>
<DIV ID="Header">
<CENTER>
<H1>
This is the header
</H1>
</CENTER>
</DIV>
Click on the header to see some other DHTML items (menu) appear.
<P>
<DIV ID="MainHeader" STYLE="display:none">
	<UL>
	<DIV ID="Head1">
	<FONT SIZE=3>
	<B>Head1</B><BR>
	</FONT>
	<FONT SIZE=2>
	This is some additional information about this topic. (1)
	</FONT>
	</DIV>
	<P>
	<DIV ID="TOC1" STYLE="display:none">
		<FONT SIZE=2>
		<UL>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 1-1</A>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 1-2</A>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 1-3</A>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 1-4</A>
		</UL>
		</FONT>
	</DIV>
	<P>
	<DIV ID="Head2">
	<FONT SIZE=3>
	<B>Head2</B><BR>
	<FONT SIZE=2>
	This is some additional information about this topic. (2)
	</FONT>
	</DIV>
	<P>
	<DIV ID="TOC2" STYLE="display:none">
		<FONT SIZE=2>
		<UL>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 2-1</A>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 2-2</A>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 2-3</A>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 2-4</A>
		</UL>
		</FONT>
	</DIV>
	<P>
	<DIV ID="Head3">
	<FONT SIZE=3>
	<B>Head3</B><BR>
	<FONT SIZE=2>
	This is some additional information about this topic. (3)
	</FONT>
	</DIV>
	<DIV ID="TOC3" STYLE="display:none">
		<FONT SIZE=2>
		<UL>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 3-1</A>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 3-2</A>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 3-3</A>
		<LI TYPE=DISC><A HREF="http://www.js-examples.com/">Link 3-4</A>
		</UL>
		</FONT>
	</DIV>

Times Viewed: 2

Leave a Reply

Your email address will not be published. Required fields are marked *