Hey, I know this must sound stupid, but could someone please tell me what to do in order to get a link added to an image that changes when it hovers?

For example, on my website.
On all my link buttons, I have the image change (it's the same thing but it looks like it's lighter), when the cursor is hovered overtop.
Now, I would like to know how to actually add the links to each thing, because after all, they're the links.

Here's the place I'm trying to get the links to...well, link.

I'd know how to do this through HTML, but I don't have a clue with Javascript.

This is the code I'm working with:
<script type="text/javascript" language="javascript">


function on1() 
{if (!document.images) return; document.a.src = "images/butt_link1_sel.jpg";} 
function on2() 
{if (!document.images) return; document.b.src = "images/butt_link2_sel.jpg";}
function on3() 
{if (!document.images) return; document.c.src = "images/butt_link3_sel.jpg";}
function on4() 
{if (!document.images) return; document.d.src = "images/butt_link4_sel.jpg";}
function on5() 
{if (!document.images) return; document.e.src = "images/butt_link5_sel.jpg";}
function on6() 
{if (!document.images) return; document.f.src = "images/butt_link6_sel.jpg";}

function off1() 
{if (!document.images) return; document.a.src = "images/butt_link1.jpg";}
function off2() 
{if (!document.images) return; document.b.src = "images/butt_link2.jpg";}
function off3() 
{if (!document.images) return; document.c.src = "images/butt_link3.jpg";}
function off4() 
{if (!document.images) return; document.d.src = "images/butt_link4.jpg";}
function off5() 
{if (!document.images) return; document.e.src = "images/butt_link5.jpg";}
function off6() 
{if (!document.images) return; document.f.src = "images/butt_link6.jpg";}

var imgslist = new Array(  

var imgs=new Array(); 
for (x=0; x<imgslist.length; x++) 
 if (document.images) 
  {imgs[x]=new Image(); imgs[x].src = imgslist[x];}  

Any help would be greatly apprecieated.