Today is . Page created 08/31/04, updated 05/21/06

Radio Link And E-mail Buttons

Mailing List
Alphabet Index
Contact Us

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>

Add-On Not Included In Script 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">
<tr>
<td bgcolor="#000000" align="left" colspan="3">

Place entire <BODY> section of code here! with the exception of closing </form> tag. the The closing </form> tag needs to be outside the table or you will get a space between the last button and the table as you see in the example to the right.

</tr>
</td></table>
</form>

                   
Mailing List
Alphabet Index
Contact Us
</form>
Buttons Deactivated

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. Unhappy Smiley

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 ]  

Talk Live To A Support Technician

Search Our Site By Individual letter

A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ G ]  [ H ]  [ I ]  [ J-K ]  [ L ] 
M ]  [ N-O ]  [ P-Q ]  [ R ]  [ S ]  [ T ]  [ U-V ]  [ W ]  [ X-Y-Z ] 

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 ]
Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [  Advanced Site Search ]

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-