So I'm really new to the whole javascript thing. I have a pretty good understanding of html and css, but javascript pretty much confuses me. I have a portfolio website that I'd like to get up and running eventually for my design. The part that I am not sure how to make work, or even where to start is the really simple image gallery idea I was thinking about using. Basically I only have a div on one side with the categories I would be putting my portfolio photos into, and then the right side would have a div where the big photo would show with the thumbnail selector div below that one. Basically I want to link the thumbnails to the big photo, so that when a user clicks on one it changes the big photo. I have no idea where to start. I have the base for my code here, but I am not sure how to even make the thumbnails link to the bigger div. I tried to walk through a few peoples example on other threads for galleries and linking photos in the same way, but couldn't get any of them to work. Does anyone have any suggestions?

Below is what I have so far for code:

HTML Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Photo Gallery</title>
<style type="text/css">
body
	{
	margin: 0px;
	padding: 0px;
	}

#mainContain
	{
	position: relative;
	top: 20px;
	left: 0px;
	width: 860px;
	height: 600px;
	margin: 0px auto;
	background: #CCFFFF;
	padding: 0px;
	border: none;
	}

#categories
	{
	position: relative;
	top: 0px;
	left: 0px;
	width: 200px;
	height: 600px;
	margin: 0px 10px 0px 0px;
	padding: 0px;
	background: #6699CC;
	border: none;
	float: left;
	}
	
#rightContain
	{
	postion: relative;
	top: 0px;
	left: 0px;
	width: 650px;
	height: 600px;
	margin:  0px;
	padding: 0px;
	background: #FFFFCC;
	border: none;
	float: left;
	}
	
#photoView
	{
	position: relative;
	top: 0px;
	left: 0px;
	width: 650px;
	height: 425px;
	margin: 0px 0px 10px 0px;
	padding: 20px 0px;
	background: #333333;
	border: none;
	}
	
#photoContain
	{
	position: relative;
	top: 0px;
	left: 0px;
	width: 580px;
	height: 424px;
	margin: 0px auto;
	padding: 10px 0px;
	background: #CC9933;
	}	
	
#selector
	{
	position: relative;
	top: 0px;
	left: 0px;
	width: 640px;
	height: 115px;
	margin: 0px;
	padding: 10px 0px 0px 10px;
	border: none;
	background: #33FFFF;
	overflow-x: scroll;
	overflow-y: hidden;
	}

img.thumb
	{
	margin-right: 10px;
	float: left;
	}			
</style>				
</style>
</head>

<body>
<div id="mainContain">
    <div id="categories">
    </div>
    
    <div id="rightContain">
        <div id="photoView">
        	<table id="photoContain" border="0" cellspacing="0" cellpadding="0">
              <tr align="center">
                <td><img id="bigImage" src="img/testPic.png" /></td>
              </tr>
            </table>  
        </div>
        
      <div id="selector">
        	<table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td width="18%">
                	<img class="thumb" src="img/testThumb.png" />               
                </td>
                <td width="18%">
                	<img class="thumb" src="img/testThumb2.png" />               
                </td>
                <td width="18%">
                	<img class="thumb" src="img/testThumb3.png" />               
                </td>
              </tr>
            </table>
        
      </div>
    </div>
    
</div>
</body>
</html>
Any suggestions on where to go from here would be so helpful. I know I need to create a function, and then an onClick kinda thing for the thumbnails to link to the big image, but I'm just not sure how to build it.