State Trivia- Tested in IE7.0, Netscape8.1.2, Opera9.10, Firefox2.0.0.1 and AOL Explorer1.5

Displays trivia facts about any of the 50 states when selected from the pulldown menu. Facts include state capital, date admitted into the union, state flower, and state bird. The script could be modified to display details about products you sell, members in a club, etc. Cool!

We have tested the code in IE7.0, Firefox2.0.0.1, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with no variations observed.

Depending on your knowledge of HTML and javascripts, this is an easy two (2) part copy and paste code that goes in both the <HEAD> section and <BODY> (wherever you want it to appear) section. The only reconfigurations that we can see are that of cosmetic unless you are going to totally modify it for your own purpose.

These reconfigurations will be make within the <BODY> section of the code pertaining to the <table> </table> where the effect is residing. See below where and howto:

Default

<form name=triviaform>



<table border=1>
<tr><td align=center>



<p><font size=6><em><strong><u>State Trivia</u></strong></em></font><br>
<font size=3><strong>Just select a state below.</strong></font>

Reconfigured

<form name=triviaform>



<p><table bgcolor="#ba55dc" border="1"
cellpadding="4" cellspacing="3">
<tr>
<td bgcolor="#000000" align="center" colspan="3">
<font face="arial,georgia,helvetica"color="#FFB6C1">



<p><font size=6><em><strong><u>State Trivia</u></strong></em></font><br>
<font size=3><strong>Just select a state below.</strong></font>

Explanation Of Above

The original (Default) table did not have any attributes to enhance it with a different colored border so what we did was remove the default (top two 2 lines of code - not including the opening form tag) and replaced it with the code (top five 5 lines of code - not including the opening form tag - including a complete font tag) for a table that has the attribute for a colored border and colored background.

Define The Above Reconfigurations

<table bgcolor="#ba55dc" This denotes the color of the border around the effect.
border="1" This denotes how many pixels wide the border will be. The higher the number, the wider the border. If you put a zero (0) there, the border will not be visible.
<td bgcolor="#000000" This denotes the color inside the table. This is the HEX code for black, not yellow. We could not color code it black and have it visible for you to see.

Little Extra Not Included In The Script: The <HEAD> and <BODY> sections of code are rather large and take up lots of space in your document. If you would prefer to make either both sections or just one section of code into external.js file(s) (after you make your reconfigurations*) and only have a snipplet of code in the <HEAD> and or <BODY> section(s) as opposed to the bloated overweight code, this is no problem. For the <BODY> section of code we have a [ Generator/Converter ] that takes the work out of converting all the code into an external file. All you need to do is copy and paste the <BODY> section of code into our converter and follow the steps.
[ Generator/Converter ]

* Once you put the <BODY> section of code into the converter, you can not make any more reconfigurations. That is why it is imperative you make your reconfigurations prior to adding the code into the converter.

The <HEAD> section is slightly different but just as easy. The default <HEAD> section of code has opening and closing script tags. To make it into an external.js file, you need to remove those tags, copy and paste what is left into a notepad, save as stateTriviahead.js (or any name you want), upload it to your direcory and paste a snipplet of code into the <HEAD> section to call the external file. See below on where and howto for the <HEAD> section.

Default

<SCRIPT LANGUAGE="JavaScript">

<HEAD> section of code is here
just copy and paste this section without the opening and closing script tags into a notepad, save as stateTriviahead.js (or whatever you want to call the file) to your harddrive and upload to your directory

// End -->
</script>

What's Left After You Save As

This is what you will have once you remove the opening and closing script tags and save as. Click on the icon and you will see what you have saved as and need to upload to your directory.
Once you have saved as and uploaded either both sections of code as external.js files, now paste thwe below snipplets of code into the respective sections of your document.
Snipplet of code for <HEAD> section
<script type="text/javascript" src="Your File Name.js"> </script>
Snipplet of code for <BODY> section
Paste this anywhere you want this effect to appear
<script type="text/javascript" src="Your File Name.js"> </script>

If you would like to see our example of making use of the external .js file in both the <HEAD> and <BODY> sections, grab the below link.
[ External .js Files <Head> and <BODY> Sections ]

Note Of Importance You may want to keep a copy of the original <BODY> section of code if at any time you may decide to change it. This way you will have the code to reconfigure then replace the external.js file with the updated one. If you would like to see the <BODY> section of code once it has been reconfigured in our Generator/Converter, grab the below link and you are there. Once you view this file, you will understand why you may want to keep a copy of the original <BODY> section of code.
[ Reconfigured <BODY> Section Of Code ]

For your Information: We named our external.js files stateTriviahead.js and stateTriviabody.js. This makes it easy for us to know which is which at any given moment.

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ]