I'm very much a beginner and have put together some JavaScript to control a pair of radio buttons which essentially behave as links.

I'm doing this as sort of a self-initiated project, or bit of fun. I know I don't have to use radio buttons, but it's something I just wanted to do.

It simply checks the radio button when you hover over it, and at the same time highlights the accompanying text. Or, highlights the text when hovered over, and also checks the accompanying radio button.

When the cursor moves out, no longer hovering over, the elements go back to their normal states.

I feel like there has to be a much cleaner way of implementing this.

Here is my mark up of the two radio buttons:

<form name=links>
    <div id="aaa">
        <input type="radio" name="fb" onMouseOut="out_event_01()" onMouseOver="over_event_01()" />
        <br /><span class="sl" id="fb_link" onMouseOut="out_event_03()" onMouseOver="over_event_03()">Button1</span>
    </div>
    <div id="bbb">
        <input type="radio" name="tw" onMouseOut="out_event_02()" onMouseOver="over_event_02()" />
        <br /><span class="sl" id="tw_link" onMouseOut="out_event_04()" onMouseOver="over_event_04()">Button2</span>
    </div>
</form>

As you can see I have a lot of onMouseOut and onMouseOver events.

This is the javascript I'm using:

function over_event_01()
{
var links = document.links.fb;
links.checked = true;
document.getElementById('fb_link').style.color = 'black';
}
function out_event_01()
{
var links = document.links.fb;
links.checked = false;
document.getElementById('fb_link').style.color = 'rgb(153,153,153)';
}
function over_event_02()
{
var links = document.links.tw;
links.checked = true;
document.getElementById('tw_link').style.color = 'black';
}
function out_event_02()
{
var links = document.links.tw;
links.checked = false;
document.getElementById('tw_link').style.color = 'rgb(153,153,153)';
}
function over_event_03()
{
var links = document.links.fb;
links.checked = true;
document.getElementById('fb_link').style.color = 'black';
}
function out_event_03()
{
var links = document.links.fb;
links.checked = false;
document.getElementById('fb_link').style.color = 'rgb(153,153,153)';
}
function over_event_04()
{
var links = document.links.tw;
links.checked = true;
document.getElementById('tw_link').style.color = 'black';
}
function out_event_04()
{
var links = document.links.tw;
links.checked = false;
document.getElementById('tw_link').style.color = 'rgb(153,153,153)';
}

Thank you for your help and suggestions.

I'm very much a beginner and have put together some JavaScript to control a pair of radio buttons which essentially behave as links.

I'm doing this as sort of a self-initiated project, or bit of fun. I know I don't have to use radio buttons, but it's something I just wanted to do.

It simply checks the radio button when you hover over it, and at the same time highlights the accompanying text. Or, highlights the text when hovered over, and also checks the accompanying radio button.

When the cursor moves out, no longer hovering over, the elements go back to their normal states.

I feel like there has to be a much cleaner way of implementing this.

Here is my mark up of the two radio buttons:

<form name=links>
    <div id="aaa">
        <input type="radio" name="fb" onMouseOut="out_event_01()" onMouseOver="over_event_01()" />
        <br /><span class="sl" id="fb_link" onMouseOut="out_event_03()" onMouseOver="over_event_03()">Button1</span>
    </div>
    <div id="bbb">
        <input type="radio" name="tw" onMouseOut="out_event_02()" onMouseOver="over_event_02()" />
        <br /><span class="sl" id="tw_link" onMouseOut="out_event_04()" onMouseOver="over_event_04()">Button2</span>
    </div>
</form>

As you can see I have a lot of onMouseOut and onMouseOver events.

This is the JavaScript I'm using:

function over_event_01()
{
var links = document.links.fb;
links.checked = true;
document.getElementById('fb_link').style.color = 'black';
}
function out_event_01()
{
var links = document.links.fb;
links.checked = false;
document.getElementById('fb_link').style.color = 'rgb(153,153,153)';
}
function over_event_02()
{
var links = document.links.tw;
links.checked = true;
document.getElementById('tw_link').style.color = 'black';
}
function out_event_02()
{
var links = document.links.tw;
links.checked = false;
document.getElementById('tw_link').style.color = 'rgb(153,153,153)';
}
function over_event_03()
{
var links = document.links.fb;
links.checked = true;
document.getElementById('fb_link').style.color = 'black';
}
function out_event_03()
{
var links = document.links.fb;
links.checked = false;
document.getElementById('fb_link').style.color = 'rgb(153,153,153)';
}
function over_event_04()
{
var links = document.links.tw;
links.checked = true;
document.getElementById('tw_link').style.color = 'black';
}
function out_event_04()
{
var links = document.links.tw;
links.checked = false;
document.getElementById('tw_link').style.color = 'rgb(153,153,153)';
}