Today is . Page created 08/31/04, updated 05/21/06
U se form radio buttons as hyperlinks or mail links. Quick and easy way to add a unique navigation style to your site!
We have tested the code in IE6.0, Firefox1.5.0.3, Opera8.54, Netscape8.1 and AOL Explorer1.2. This script worked well in all platforms with no variations observed.
D epending on your knowledge of HTML and java script, this is an easy, two part copy and paste code with minimal reconfigurations. The first part will go in the <HEAD> section of your document with "NO" reconfigurations. The second part will be pasted into the <BODY> section of your document where you want it to be located. This part is where you will reconfigure your URL's and or e-mail address(es) you want. Below you can see where to make the reconfigurations to adapt to your site.
Reconfigurations
<form name="form">
<input type="radio" name="loc" onClick="go('URL Goes Here');"> Link Name Here <br>
<input type="radio" name="loc" onClick="go('URL Goes Here');"> Link Name Here <br>
<input type="radio" name="loc" onClick="go('mailto:E-mail Address Here');"> Send Us Email
</form>
I f you will take notice in the above reconfigurations, the attribute mailto: is added in the e-mail link. (Selecting this will open the default email server.) This is the only difference between the URL links and the email link(s). You can add as many links as you need as long as you added the below part for each link. Be sure to place each additional link in between the opening and closing <form> </form> tags. Remember, if you are going to add another e-mail link, add the mailto: attribute where needed.
<input type="radio" name="loc" onClick="go('URL Goes Here');"> Link Name Here<br>
Little Extra Not Included In The Script: If you notice on the above radio button links we have it enclosed in a table. This is not part of the script. If you want to add a table around the radio buttons, see the below example:
<p><table bgcolor="#ba55dc" border="10"
cellpadding="4" cellspacing="3"> |
I
f you would like to learn or brush up on your <table> skills, grab the below link
[ <Tables> ]
T he only downside to this script is that the links will not open in a new window. The e-mail link(s) will open your default email in a new window but as far as the regular links, they will open in the same window.
W
e 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 ]
Search Our Site By Individual letter
[ A ]
[ B ]
[ C ]
[ D ]
[ E ]
[ F ]
[ G ]
[ H ]
[ I ]
[ J-K ]
[ L ] |
Little Tips Directory [ Page 1 ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5 ] [ Page 6 ] [ Page 7 ] |
[ Index Page 1 ]
[ Index Page 2 ]
[ Index Page 3 ]
[ Index Page 4 ]
[ Index Page 5 ] [ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ] [ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ] [ News Letter Archives ]
[ Navigation Page ]
[ Archives Of Published Material ] |
If you are part of the ever growing number of webmasters who enjoy
sharing your knowledge with others on web design, join The
Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today
This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.
Copyright © Consigliere Ltd., All Rights Reserved. 2001-