.mouseover/.hover help!

.mouseover/.hover help!

OK So I got 5 images, 3 are headers and layered using z-index(head, head-templates, head-projects) to be on-top of each other; the other 2 are just images for the mouseover(templates, projects). What I want to happen is when you hover over the image templates I want it to animate head to head-templates and when you put your mouse over projects it animates head to head-projects. When your mouse take your mouse off, so mouseout is used, I want it to animate back to head. The code for my website is as follows:
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <link rel="stylesheet" href="style.css" media="screen" />
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <title>PRENTICE.tk</title>
  8. <script type="text/javascript" src="jquery.min.js"></script>
  9. <script type="text/javascript">
  10. $(function() {
  11.     $('img.head-templates,img.head-projects').hide();
  12.     $('img.templates').hover(function() {
  13.         fadeBetween('img.head', 'img.head-templates');
  14.     },function() {
  15.         fadeBetween('img.head-templates', 'img.head');
  16.     });
  17.     $('img.projects').hover(function() {
  18.         fadeBetween('img.head', 'img.head-projects');
  19.     },function() {
  20.         fadeBetween('img.head-projects', 'img.head');
  21.     });
  22. });

  24. function fadeBetween(from, to) {
  25.     $(from).stop(true, true).fadeOut();
  26.     $(to).stop(true, true).fadeIn();
  27. }
  28. </script>
  29. <script type="text/javascript" src="rollover.js"></script>
  30. </head>
  31. <body onload="MM_preloadImages('images/navbar/home-hover.png','images/navbar/templates-hover.png','images/navbar/projects-hover.png','images/navbar/blog-hover.png','images/navbar/contact-hover.png')">
  32. <div id="header">
  33.      <img src="images/header.png" class="head" alt="HEADER" height="200px"  />
  34.         <img src="images/header-templates.png" class="head-templates" alt="HEADER" height="200px"  />
  35.         <img src="images/header-projects.png" class="head-projects" alt="HEADER" height="200px"  />
  36.     </div>
  37. <div id="navbar">
  38.      <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home','','images/navbar/home-hover.png',1)"><img src="images/navbar/home.png" name="Home" width="100" height="50" border="0" id="Home" class="first"/></a>
  39.         <a href="templates.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Templates','','images/navbar/templates-hover.png',2,'Head','','images/head-templates.png')"><img src="images/navbar/templates.png" alt="Templates" name="Templates" width="120" height="50" border="0" id="Templates" class="templates"/></a>
  40.         <a href="projects.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Projects','','images/navbar/projects-hover.png',1)"><img src="images/navbar/projects.png" alt="Projects" name="Projects" width="110" height="50" border="0" id="Projects" class="projects"/></a>
  41.         <a href="http://blog.prentice.tk" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Blog','','images/navbar/blog-hover.png',1)"><img src="images/navbar/blog.png" alt="Blog" name="Blog" width="90" height="50" border="0" id="Blog" /></a>
  42. <a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','images/navbar/contact-hover.png',1)"><img src="images/navbar/contact.png" alt="Contact" name="Contact" width="110" height="50" border="0" id="Contact" /></a>
  43. </div>
  44. </body>
  45. </html>
And the css
  2. @charset "utf-8";
  3. /* CSS Document */
  4. body {
  5. background:url(images/bg.png) repeat;
  6. width: 1000px;
  7. margin-left:auto;
  8. margin-right:auto;
  9. text-align:center;
  10. }
  11. #navbar {
  12. width:1000px;
  13. border:1px #000 solid;
  14. background-image:url(images/navbar/bg.png);
  15. height:50px;
  16. text-align:left;
  17. }
  18. #navbar img{
  19. border-right:1px #000 solid;
  20. border-left:1px #3C3C3C solid;
  21. margin-right:-4px;
  22. }
  23. .first {
  24. border-left:none;
  25. }
  26. #header{
  27. position: relative;
  28. height:200px;
  29. }
  30. #bookmark img{
  31. padding:5px;
  32. }
  33. .head{
  34. position: absolute;
  35. left: 0;
  36. top: 0;
  37. z-index: 10;
  38. }
  39. .head-templates{
  40. position: absolute;
  41. left: 0;
  42. top: 0;
  43. z-index:9;
  44. }
  45. .head-projects{
  46. position: absolute;
  47. left: 0;
  48. top: 0;
  49. z-index:8;
  50. }
Please help I dunno what to do?