The code is messy. Let's take a look.
------------------------------------------------
JS:
<SCRIPT type = "text/JavaScript">
<! --
Function showlayer (group, ID)
{
// Process item
VaR COUNT = 1;
VaR OBJ = Document. getelementbyid (group + "_ Item _" + count );
While (OBJ! = NULL)
{
OBJ. classname = "panel_item ";
Count ++;
OBJ = Document. getelementbyid (group + "_ Item _" + count );
}
Document. getelementbyid (group + "_ Item _" + id). classname = "panel_item_show ";
// Process Layer
Count = 1;
OBJ = Document. getelementbyid (group + "_ layer _" + count );
While (OBJ! = NULL)
{
OBJ. style. Display = "NONE ";
Count ++;
OBJ = Document. getelementbyid (group + "_ layer _" + count );
}
Document. getelementbyid (group + "_ layer _" + id). style. Display = "Block ";
}
// -->
</SCRIPT>
--------------------------------------------------------------
CSS:
/* Panel begin */
. Panel
{
Border-left: 1px solid # c1d5f1;
Border-Right: 1px solid # c1d5f1;
Border-bottom: 1px solid # c1d5f1;
}. Panel_head
{
Color: #004499;
Height: 24px;
Line-Height: 24px;
}
. Panel_item
{
Float: left; Border-top: 1px solid # c1d5f1;
Border-bottom: 1px solid # c1d5f1;
Background-color: # e7f1ff; Text-align: center;
}
. Panel_item_show
{
Float: left; Border-top: 1px solid # c1d5f1;
Background-color: # ffffff; Font-weight: bold; Text-align: center;
} . Panel_item_spacing
{
Float: left; Height: 25px; Border-left: 1px solid # c1d5f1;
Border-Right: 1px solid # c1d5f1;
Border-bottom: 1px solid # c1d5f1;
} . Panel_body
{
Clear: both;
} . Panel_foot
{
}
/* Panel end */
-----------------------------------------------------------
HTML:
<Div class = "Panel" style = "width: 250px;">
<Div class = "panel_head">
<Div id = "t_item_1" class = "panel_item_show" style = "width: 56px;" onmouseover = "showlayer ('T', 1);"> dizzy </div>
<Div class = "panel_item_spacing" style = "width: 6px;"> </div>
<Div id = "t_item_2" class = "panel_item" style = "width: 56px;" onmouseover = "showlayer ('T', 2);"> sweat </div>
<Div class = "panel_item_spacing" style = "width: 6px;"> </div>
<Div id = "t_item_3" class = "panel_item" style = "width: 56px;" onmouseover = "showlayer ('T', 3);"> Haha </div>
<Div class = "panel_item_spacing" style = "width: 6px;"> </div>
<Div id = "t_item_4" class = "panel_item" style = "width: 56px;" onmouseover = "showlayer ('T', 4);"> Haha </div>
</Div>
<Div class = "panel_body">
<Div id = "t_layer_1">
<P> 1 </P>
</Div>
<Div id = "t_layer_2" style = "display: none;">
<P> 2 </P> <p> 2 </P>
</Div>
<Div id = "t_layer_3" style = "display: none;">
<P> 3 </P> <p> 3 </P> <p> 3 </P>
</Div>
<Div id = "t_layer_4" style = "display: none;">
<P> 4 </P> <p> 4 </P> <p> 4 </P> <p> 4 </P>
</Div>
</Div>
</Div> |
