Small image gallery problems

**boneyendoplasm** · Aug 21, 2007, 17:18

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"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <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";
}
</script>
</head>
<body>
  <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>
      </ul>   
    </div><!-- LEFTBAR -->
    <div id="content">
 
<h3>Templates</h3>
      <div id="templates">
    <table>
       <tr>
         <td>
 
        <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>
          </td>
          <td>      
 
             <img name="imageflip" src="bigmaroonfun.gif"  />  
          </td>
         </tr>
      </table>      
      </div><!-- TEMPLATES -->
 
     </div><!-- CONTENT -->
    <div id="clearone">&nbsp;</div>
   </div><!-- MAIN -->
    <div id="footer">
 
    </div><!-- FOOTER --> 
   </div><!-- WRAPPER -->
</body>
</html>