Hi all,
I have an "image gallery". I have four links that go to external pages, not defined yet, and one main image. When rolling over each link, the main image should change to the corresponding one. When I take the javascript and meat of the html out of context it works. When I use it on this page where it is supposed to be used, it does not work. The error console tells me my functions (switch_One() etc.) are not defined. Any help would be greatly appreciated.

Code JavaScript:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
  <title>SacWide Web Design and Development</title>
  <link rel="stylesheet" href="style.css" type="text/css" />
<script language="javascript" type="text/javascipt">
function switch_One()
	document.images["imageflip"].src = "bigmaroonfun.gif";
function switch_Two()
	document.images["imageflip"].src = "lightneasy.gif";
function switch_Three()
	document.images["imageflip"].src = "greenwave.gif";
function switch_Four()
	document.images["imageflip"].src = "onthereef.gif";
  <div id="wrapper">
    <div id="header">
    </div><!-- HEADER -->
   <div id="main">
    <div id="leftbar">
      <ul id="navlist">
         <li><a href="home.html">Home</a></li>
         <li><a href="information.html">Information</a></li>
         <li><a href="services.html">Services</a></li>
         <li><a href="aboutus.html">About Us</a></li>
         <li><a href="creations.html">Creations</a></li>
         <li><a href="faq.html">FAQ</a></li>
    </div><!-- LEFTBAR -->
    <div id="content">
      <div id="templates">
        <a href="" class="thelinks" onMouseOver="switch_One()">Big Maroon Fun</a>
        <a href="" class="thelinks" onMouseOver="switch_Two()">Light N' Easy</a>
	 <a href="" class="thelinks" onMouseOver="switch_Three()">Green Wave</a>
	 <a href="" class="thelinks" onMouseOver="switch_Four()">On The Reef</a>
             <img name="imageflip" src="bigmaroonfun.gif"  />  
      </div><!-- TEMPLATES -->
     </div><!-- CONTENT -->
    <div id="clearone">&nbsp;</div>
   </div><!-- MAIN -->
    <div id="footer">
    </div><!-- FOOTER --> 
   </div><!-- WRAPPER -->