I'm creating a tabbed page. I'm stuck with setting the images to the tab headers.

Code:
<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Try Tabbed Page Example</title>

<script type="text/javascript" >

// ----- Auxiliary -------------------------------------------------------------

function tabview_aux(TabViewId, id)
{
  var TabView = document.getElementById(TabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if (Tab.tagName == "A")
    {
      i++;
      Tab.href      = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
      Tab.className = (i == id) ? "Active" : "";
      Tab.blur();
    }
  }
  while (Tab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while (Pages.className != 'Pages') Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if (Page.className == 'Page')
    {
      i++;
      if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
      Page.style.overflow = "auto";
      Page.style.display  = (i == id) ? 'block' : 'none';
    }
  }
  while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId,  1); }


</script>

<style>

div.TabView div.Tabs {
  height: 36px; /* 24px; */
  overflow: hidden;
}


div.TabView div.Tabs a {
  float: left;
  display: block;
  width:  148px;/* 90px; */
  text-align: center;
  height:   36px;   /* 24px; */
  line-height: 30px; /*  To position the text of a inside the menu box */
  vertical-align: middle;
  background: url('images/tab1-h.jpg') no-repeat; /* url('tabs.png') no-repeat -2px -1px; */ 
  text-decoration: none;
  font-family: "Times New Roman", Serif;
  font-weight: 900;
  font-size: 13px;
  color: #fff; /* #000080; */
  margin-right:1px;
}


div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active {
  background: url('images/tab1.jpg') no-repeat; /* url('tabs.png') no-repeat -2px -31px; */
}

div.TabView div.Pages {
  clear: both;
   /* border: 1px solid #404040; */
  overflow: hidden;
}

div.TabView div.Pages div.Page {
  height: 100%;
  padding: 0px;
  overflow: hidden;
}

div.TabView div.Pages div.Page div.Pad {
  padding: 3px 18px;
}

</style>
</head>

<body>

<div class="TabView" id="TabView-demo" style="width: 740px; height: 192px; text-align: left; background: url('images/bgTabMenu 2.jpg') no-repeat;">

    <!-- *** Tabs ************************************************************** -->
    
    <div class="Tabs" style="width: 740px;">
      <a>Academics</a>
      <a>Notifications</a>
      <a>Opportunities</a>
      <a>Announcements</a>
      <div style="width:144px; height:36px; float:right; top:0; margin:0; padding:0; background: url('images/tab2-h.jpg') no-repeat">                           </div>
    </div>
    
    <!-- *** Pages ************************************************************* -->
    
    <div class="Pages" style="width: 740px; height: 156px; text-align: left;">
        
    	<!-- *** Page1 Start *** -->
          
    	<div class="Page">
    		<div class="Pad">    
            	<br>
            	<p>    You are Viewing Tab Page 1.</p>  
    		</div>
    	</div>
          
    	<!-- *** Page1 End ***** -->
          
    	<!-- *** Page2 Start *** -->  
            
     	<div class="Page">
    		<div class="Pad">
        		<br>Categories include:<br>    
            	<br>
            	<p>    You are Viewing Tab Page 2.</p>
        
    		</div>
    	</div>
        
    	<!-- *** Page2 End ***** -->
        
        
    	<!-- *** Page3 Start *** -->
          
        <div class="Page">
            <div class="Pad">    
            	<br>
            	<p>    You are Viewing Tab Page 3.</p>    
            </div>
        </div>
    
    	<!-- *** Page3 End ***** -->
    	
    	<!-- *** Page4 Start *** -->
          
        <div class="Page">
            <div class="Pad">    
            	<br>
        		<br>Categories include:<br>          		
        		<br>Categories include:<br>   

            	<p>    You are Viewing Tab Page 3.</p>    
            </div>
        </div>
    
    	<!-- *** Page4 End ***** -->

</div>
  
<script type="text/javascript">
  tabview_initialize('TabView-demo');
</script>

</body>

</html>
The above coding is working fine how i need. But still i need some modifications which satisfies my work defenition..

And the modifications which i need to satisfy client requirement are mentioned as below.


Modifications needed only in setting the background of the tabs as follows:
1. Acadamics tab contains 2 images (tab1-h.jpg) as background and when hover/clicked the image (tab1.jpg) should get displayed.

2. All the other 3 tabs uses the images (centre-h.jpg) and (centre.jpg) during hover/clicked of the tabs.

I need the same functionality which is currently present in my code. Only i need the modifications which i've mentioned...

I need it urgently.

Thanks
M.Sworna Vidhya