When you use Tab for your page navigation, you like to highlight the tab programmatically which indicate the current page. Here is a simple JavaScript to complete this task. (Save you time to program each page differently.)
1. Design a web page.
2. Pre-load highlight images by following JavaScript code. Please this code between </head> and <body> tag.
<SCRIPT language="JavaScript">
var image1=new Image()
image1.src="bn_providre_on.gif"
var image2=new Image()
image2.src="bn_client_on.gif"
var image3=new Image()
image3.src="bn_report_on.gif"
var image4=new Image()
image4.src="bn_setup_on.gif"
function getButton(button_num)
{
switch (button_num)
{
case 1:
document.images.img1.src=image1.src
break
case 2:
document.images.img2.src=image2.src
break
case 3:
document.images.img3.src=image3.src
break
case 4:
document.images.img4.src=image4.src
break
}
}
</SCRIPT>
3. Include the un-selected button images, and name them the same name as variable name in your JavaScript.
<img src="bn_providre.gif" name="img1">
4. In the same page, call getButton(number) at body tag. This will replace the highlight image on the number you selected.
<body onLoad="getButton(4)">
5. See Sample