Uncle Jim's Web Site Designs
VBScript Drop-Down Table on Click
Author:
Jim Stiles
Clicking on the link below will display a drop-down table including a description and links to other web pages.
This script can also contain images, text, etc.
Other Links on my Web site
Microsoft Office Tips
Tips for Office users including Access, Excel, Word, Outlook, PowerPoint, Front Page, Windows and Internet tips.
Website Design Gallery
Over 75 design themes and border sets for you to download and use for free.
On-Line Games
A complete list of on-line games for you to play.
INSTALLATION INSTRUCTIONS
COPY
-
Insert Between Head Tags: <HEAD></HEAD>
Insert this script in the <HEAD>, between <HEAD> and <BODY> or in the <BODY> section of the page. <script LANGUAGE="VBScript"> // Courtesy of Uncle Jim's Javascript Archives <!-- sub pop (id) if id.style.display = "" then id.style.display = "none" else id.style.display = "" end if end sub sub MouseOver (id) id.style.fontweight = "normal" id.style.color= "silver" end sub sub MouseOut (id) id.style.fontweight = "normal" id.style.color="navy" end sub --> </script>
COPY
-
Insert Inside Body: <BODY></BODY>
<!-- Insert this code in the <BODY> section where you want the link to appear in the page. --> <p align="left"><span id="c1" style="color:navy;" onclick="pop(datac1)" onmouseover="MouseOver(c1)" onmouseout="MouseOut(c1)"><b><u><font size="2">LINK TITLE</font></u></b></span></p> <!-- Insert the following HTML code in the <BODY> section where you want the table to appear in the page. --> <span id="datac1" style="display: none"><div align="center"> <table border="1" cellpadding="0" cellspacing="0" width="70%" bordercolor="#5A94FF" style="padding-left: 3px; padding-right: 3px; padding-top: 1px; padding-bottom: 1px" bgcolor="#FFFFFF"><tr> <td width="30%" height="55" align="center" bgcolor="#E4E4E4"><a href="http://PAGE1.htm"><font size="2">DESCRIPTION1</font></a></td> <td width="40%" valign="middle" height="55"><font size="2">PARAGRAPH1.</font></td></tr> <tr><td width="30%" height="55" align="center" bgcolor="#E4E4E4"><a href="http://PAGE2.htm"><font size="2">DESCRIPTION2</font></a></td> <td width="40%" valign="middle" height="55"><font size="2">PARAGRAPH2.</font></td></tr> <tr><td width="30%" height="55" align="center" bgcolor="#E4E4E4"><a href="http://PAGE3.htm"><font size="2">DESCRIPTION3</font></a></td> <td width="40%" valign="middle" height="55"><font size="2">PARAGRAPH3</font></td></tr></table></div></span>
Addtional Instructions: <BODY 'CODE HERE'>
COPY
-
Additional Instructions:
Name each combination of link and table in this section of the HTML code: // in the link <span id="c1" onmouseover="pop(datac1)" onmouseout="MouseOut(c1)">DHTML table scripts</span> // in the table <span id="datac1" style="display: none"> <table border="1" cellpadding="2" cellspacing="1" bordercolor="#800000" style="padding-left: 3px; padding-right: 3px; padding-top: 1px; padding-bottom: 1px" bgcolor="#FBFFEC"> You can copy and paste as many link/table combinations as you need. Copy and paste where you want it and rename the second occurrence (f.e. id="c2", "datac2"), and so on. To change the colors of the link(s), change the appropriate tags in this section of the script: // you may use color names or use the #000000 HEX format. sub MouseOver (id) id.style.fontweight = "normal" id.style.color= "#ff0000" end sub sub MouseOut (id) id.style.fontweight = "normal" id.style.color="navy"
Close This Window