	<a href="http://leader.linkexchange.com/X1515329/clickle" target="_top"><img width=468 height=60 border=0 ismap alt="" src="http://leader.linkexchange.com/X1515329/showle?"></a>



		SEARCH THE SITE advanced search <A HREF="http://www.eurosubmit.com/eurosubcgi/ads.pl?member=me853;banner=NonSSI;page=01" TARGET="_blank"><IMG SRC="http://www.eurosubmit.com/eurosubcgi/ads.pl?member=me853;page=01" WIDTH=120 HEIGHT=50 ALT="EuroSubmit MiniBanners" BORDER=0></A> CATEGORIES Home Getting Started HTML Cheat Sheet Webmaster Tools HTML Help Forum Color Codes Link to us

Menu Select

Home/JavaScript Categories/Menus/Menu Select

Menu Select

Credits: TheHTMLSource.com

Description: This script allows you to go to a new webpage with a simple click of a radio button.

Demo:

Click on one of the radio buttons and you will be sent to a new page.
(Don't forget to hit the "BACK" button on your browser to come back here)

Directions

Step 1: Copy and Paste the following script into the <HEAD> section of your page:

/*
Menu Select - 
© TheHTMLSource.com (www.TheHTMLSource.com)
For full source code, installation, and instructions, 
vist www.TheHTMLSource.com
*/

function leapTo (link)
   {
   var new_url=link;
   if (  (new_url != "")  &&  (new_url != null)  )
      window.location=new_url;
   else
      alert("\nYou must make a selection.");
   }

// Called by View Source button - displays source of file.
function viewSource()
   {
   var current_url="";
   current_url=document.location;
   window.location="view-source:"+current_url;
   }

// Called by Full Window button - loads file to full window for easy saving.
function WinOpen() 
   {
   alert('\nPage will load to full screen.\n\nUse View/Document Source from menu bar to view source.\n\nUse File/Save As from menu bar to save.\n\nClose new window to return to this page. ');
   window.open("radioleap.html","DisplayWindow","menubar=yes,scrollbars=yes");
   window.open("radioleap.html","DisplayWindow","menubar=yes,scrollbars=yes");   // double for Macs
   }
// Deactivate Cloaking -->
</SCRIPT>

Step 2: Insert the follwing code into the <BODY> section of your page where you would like the radio buttons to appear:

Configuring the menu

To use your own links, you need to edit the code from Step 2, don't edit anything from Step 1. Editing this code is very simple, Heres an example, this is what the code looks like:

          <TD align="center" BGCOLOR=000080>
                    <INPUT TYPE="radio" NAME="buttons1" onClick="leapTo('test1.html')">
                    <FONT COLOR=00FFFF><B>Test Page 1</B></FONT>
          <TD align="center" BGCOLOR=FF0000>
                    <INPUT TYPE="radio" NAME="buttons1" onClick="leapTo('test2.html')">
                    <FONT COLOR=000000><B>Test Page 2</B></FONT>
          <TD align="center" BGCOLOR=C0C0C0>
                    <INPUT TYPE="radio" NAME="buttons1" onClick="leapTo('test3.html')">
                    <FONT COLOR=800000><B>Test Page 3</B></FONT>
          <TD align="center" BGCOLOR=008080>
                    <INPUT TYPE="radio" NAME="buttons1" onClick="leapTo('test4.html')">
                    <FONT COLOR=FFFF00><B>Test Page 4</B></FONT>

Now let's say I wanted to change the first link to www.yahoo.com, the second to www.thehtmlsource.com, the third to www.google.com, and the forth to www.monster.com, this is what the code would look like:

          <TD align="center" BGCOLOR=000080>
                    <INPUT TYPE="radio" NAME="buttons1" onClick="leapTo('www.yahoo.com)">
                    <FONT COLOR=00FFFF><B>Yahoo</B></FONT>
          <TD align="center" BGCOLOR=FF0000>
                    <INPUT TYPE="radio" NAME="buttons1" onClick="leapTo('www.thehtmlsource.com')">
                    <FONT COLOR=000000><B>TheHTMLSource</B></FONT>
          <TD align="center" BGCOLOR=C0C0C0>
                    <INPUT TYPE="radio" NAME="buttons1" onClick="leapTo('www.google.com')">
                    <FONT COLOR=800000><B>Google</B></FONT>
          <TD align="center" BGCOLOR=008080>
                    <INPUT TYPE="radio" NAME="buttons1" onClick="leapTo('www.monster.com')">
                    <FONT COLOR=FFFF00><B>Monster.com</B></FONT><br>

See that wasn't that hard was it

To change the background colors of the link, simply change the colorcode next to "BGCOLOR", to change the text color, change the colorcodes in "FONT COLOR". If you don't know the color codes Click Here to see them.

Company | Careers | Partners | Advertising | Help
Privacy Policy | Trademark Notices | User Agreement
© 2001 TheHTMlSource.com, INC. All Rights Reserved.

Site hosted by Angelfire.com: Build your free website today!