I'm creating a tabbed page. I'm stuck with setting the images to the tab headers.
<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