Hello everyone,
I'm just learning Javascript and HTML and I'm ok with analyzing code
but not so great at creating it. I am trying to create a table about 2
x 2. In (1,1) I will put in a map and in (1,2), (2,1) and (2,2) I want
to put in windows with tabs on top of each square ((1,2), (2,1) and
(2,2)). When someone clicks on the tab I want the information in the
square to either be updated or to link to a page in that square. I
have tried to find other sites which have html and javascript tab menus
and then place them into the table but it doesnt seem to work as I dont
see anything in the table squares. Maybe I'm writting the code wrong or
just not formating it correctly, any help would be appreciated.
The code I have here is similar to what I have been working on, any
help with this will help me with my example, unless someone can help
with a simple code to get it working or point out the error in my code
structure. THANK YOU!!
<<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css" media="all">
body, td
{
font:13px Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#000;
margin: 0px;
}
..tabFrame
{
BORDER: 0;
HEIGHT: 90%;
WIDTH: 100%;
BORDER-TOP: #93BEE2 9PX SOLID;
BORDER-BOTTOM: #93BEE2 9PX SOLID;
BORDER-LEFT: #93BEE2 9PX SOLID;
BORDER-RIGHT: #93BEE2 9PX SOLID;
}
..tabOff
{
FONT-FAMILY: Verdana;
FONT-WEIGHT: 700;
TEXT-ALIGN: CENTER;
COLOR: #003399;
BACKGROUND-COLOR: #c4e0f0;
BORDER-BOTTOM: #c4e0f0 1PX SOLID;
HEIGHT: 25px;
}
..tabOn
{
FONT-FAMILY: Verdana;
FONT-WEIGHT: 700;
TEXT-ALIGN: CENTER;
COLOR: #003399;
BACKGROUND-COLOR: #93BEE2;
BORDER-BOTTOM: #93BEE2 1PX SOLID;
HEIGHT: 35px;
}
</style>
</head>
<body link="Blue" vlink="Purple" alink="Red" background="backimage.gif"
bgcolor="#FFFFFF"
<table width="725" border="0" cellspacing="0" cellpadding="0"
align="left">
<tr>
<td colspan="2"><img
src="http://www.greecetourguides.com/imgs/logo.jpg"></td>
</tr>
<tr>
<td valign="top" width="130" background="LEFT.gif">
<DIV id="Layer1" style="position:absolute; width:130px; z-index:1; top:
120">
</div>
<img src="LEFT.gif"></td>
<td valign="top" width="595">
<table width="550" border="0" cellpadding="8" cellspacing="0">
<tr>
<td width="15"> </td>
<td>
<SCRIPT LANGUAGE="JavaScript">
// Tab Name | URL | * (Default Selected Tab)
var tabs = new Array (
"Description|http://en.wikipedia.org/wiki/Central_Greece",
"People|#",
"History|#",
"Economy|#",
"Culture|#" );
// Align Tab: LEFT, CENTER, RIGHT
var tabAlign = "left";
/***/
function tabOnClick(ID)
{
var oElement = null;
for (var i = 0; i < tabs.length; i++)
{
oElement = document.getElementById(i);
oElement.className = "tabOff";
}
oElement = document.getElementById(ID);
oElement.className = "tabOn";
var tab = tabs[ID].split("|");
divTabFrame.innerHTML = "<IFRAME SRC="+tab[1]+"
CLASS='tabFrame'></IFRAME>";
document.body.focus();
}
function tabLoad()
{
var HTML = "";
HTML += "<P ALIGN="+tabAlign+">";
for (var i = 0; i < tabs.length; i++)
{
var tab = tabs[i].split("|");
HTML += "<INPUT TYPE='BUTTON' ID="+i+" CLASS='tabOff'
VALUE="+tab[0]+" onClick='tabOnClick("+i+")'> ";
}
divTabButtons.innerHTML = HTML;
for (var i = 0; i < tabs.length; i++)
{
var tab = tabs[i].split("|");
if (tab[2] == "*")
{
tabOnClick(i);
break;
}
}
}
//-->
</SCRIPT>
<style type="text/css" media="all">body, td
{
font:13px Verdana, Geneva, Arial, Helvetica, sans-serif;
color:#000; margin: 0px; }
</style></head><p align="Left">
<body onload ="tabLoad()" link="Blue" vlink="Purple" alink="Red"
background="backimage.gif" bgcolor="#FFFFFF">Select the region you want
to learn about
:</br><table width="580" border="0" <tr <th
width="300" scope="col"><div align="top"><img src="" alt="map"
name="mainmap" width="300" height="295" border="0" align="top"
usemap="#greece_small_image_map_Map" <map
name="greece_small_image_map_Map" </map </div></th>
<th width="308" height="220" scope="col">
<DIV ID="divTabButtons"></DIV><DIV ID="divTabFrame"></DIV> <p
align="Left">
</td <tr <th height="57" colspan="2" scope="col">
<DIV ID="divTabButtons"></DIV> </td> <DIV
ID="divTabFrame"></DIV></th </tr></table><p> </p><p<p
align="Left">
<br>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Tabed menu in a table 
