Switching from Layer to Table [Archive]

florida

12-10-2002, 09:40 AM

Please advise if I can switch this from Layers to a Table? I have tried but cant seem to get it to work.

<LAYER ID=WoodMenuImgLayer
onmouseover="showNNMenu(event)"
onmouseout="hideNNMenu(event)"
LEFT=10

TOP=10>
<IMG SRC="WoodButton.gif" BORDER=0>
</LAYER>
<LAYER ID=MetalMenuImgLayer
onmouseover="showNNMenu(event)"
onmouseout="hideNNMenu(event)"
TOP=50

LEFT=10>
<IMG SRC="MetalButton.gif" BORDER=0>
</LAYER>
<LAYER ID=BricksMenuImgLayer
onmouseover="showNNMenu(event)"
onmouseout="hideNNMenu(event)"
TOP=90

LEFT=10>
<IMG SRC="BricksButton.gif" BORDER=0>
</LAYER>

<LAYER ID="WoodMenuLayer" onmouseout="this.top = -1400;" LEFT=120 TOP=-1400 ZINDEX=99>
<LAYER ID="WoodOak" TOP=0 LEFT=0 CLASS="LayerItemMenu" WIDTH=175 HEIGHT=20 BGCOLOR="orange" onmouseover="showOverMenu(this,'Oak Timber','OakWood.htm')" onmouseout="showOutMenu(this,'Oak Timber')">Oak Timber
</LAYER>
<LAYER ID="WoodTeak" TOP=22 LEFT=0 CLASS="LayerItemMenu" WIDTH=175 HEIGHT=20 BGCOLOR="orange" onmouseover="showOverMenu(this,'Teak Timber','TeakWood.htm')" onmouseout="showOutMenu(this,'Teak Timber')">Teak Timber</LAYER>

</LAYER>

Stefan

12-10-2002, 09:58 AM

Why not skip both Layers and Table and use CSS instead?

The code you provide however isn't enough to determine what you are really trying to do.
Eg you have a lot of JavaScript interaction, but you don't show the code or state what it's doing.

If you provide more info, I can help you with some CSS codeexamples.

florida

12-10-2002, 10:03 AM

Here is the rest of it. I really need to do put it in a Table if possible?

<HTML>
<HEAD>

<STYLE>
LAYER { border : none 0px;}
IMG { border : none 0px;}
.LayerItemMenu {
font-family:verdana;
font-size:60%;
margin:0;
padding:0;
border: 3px groove lightgrey;
}
.textLink { color: white; text-decoration: none;}
</STYLE>

<SCRIPT LANGUAGE=JavaScript>

function createMenu(menuName, menuItems)
{
var outerLayerHTML = '<LAYER ID="' + menuName + 'MenuLayer" '
outerLayerHTML = outerLayerHTML +
' onmouseout="this.top = -1400;" LEFT=120 TOP=-1400 ZINDEX=99>'

var totalLayers = menuItems.length;
var layerCount;
var innerLayerHTML = "";
var layerName = "";
for (layerCount = 0; layerCount < totalLayers; layerCount++)
{
layerName = menuName + menuItems[layerCount][0];
innerLayerHTML = innerLayerHTML + '<LAYER ID="' + layerName + '" '
innerLayerHTML = innerLayerHTML + ' TOP=' + menuItems[layerCount][3]
+ ' LEFT=0 '
innerLayerHTML = innerLayerHTML + ' CLASS="LayerItemMenu" '
innerLayerHTML = innerLayerHTML + ' WIDTH=175 HEIGHT=20 BGCOLOR="orange" '
innerLayerHTML = innerLayerHTML + ' onmouseover="showOverMenu(this,\''
+ menuItems[layerCount][2] + '\''
innerLayerHTML = innerLayerHTML + ',\''
+ menuItems[layerCount][1] + '\')" '
innerLayerHTML = innerLayerHTML + ' onmouseout="showOutMenu(this,\''
+ menuItems[layerCount][2] + '\')">'
innerLayerHTML = innerLayerHTML + menuItems[layerCount][2] + '</LAYER>';
}

return outerLayerHTML + innerLayerHTML + '</LAYER>';
}

function showNNMenu(evt)
{
var srcLayer = evt.target;
var menuLayerId = new String(srcLayer.name).replace("ImgLayer","Layer");
document.layers[menuLayerId].top = srcLayer.pageY + 10;
document.layers[menuLayerId].left = parseInt(srcLayer.pageX
+ srcLayer.clip.width + 4);
}

function hideNNMenu(evt)
{
var srcLayer = evt.target;
if (evt.pageX < srcLayer.clip.right)
{
var menuLayerId = new String(srcLayer.name).replace("ImgLayer","Layer");
document.layers[menuLayerId].top = -1400;
}
}

function showOverMenu(menuLayer, menuText, menuPage)
{
menuLayer.bgColor = "blue";
menuLayer.document.open();
menuLayer.document.write('<DIV CLASS="LayerItemMenu">');
menuLayer.document.write('<A HREF="' + menuPage
+ '" CLASS="textLink">' + menuText + '</A>');
menuLayer.document.write('</DIV>')
menuLayer.document.close();
}

function showOutMenu(menuLayer, menuText)
{
menuLayer.bgColor = "orange";
menuLayer.document.open();
menuLayer.document.write('<DIV CLASS="LayerItemMenu">'
+ menuText + '</DIV>');
menuLayer.document.close();
}

</SCRIPT>
</HEAD>

<BODY>

<LAYER ID=WoodMenuImgLayer
onmouseover="showNNMenu(event)"
onmouseout="hideNNMenu(event)"
LEFT=10

TOP=10>
<IMG SRC="WoodButton.gif" BORDER=0>
</LAYER>
<LAYER ID=MetalMenuImgLayer
onmouseover="showNNMenu(event)"
onmouseout="hideNNMenu(event)"
TOP=50

LEFT=10>
<IMG SRC="MetalButton.gif" BORDER=0>
</LAYER>
<LAYER ID=BricksMenuImgLayer
onmouseover="showNNMenu(event)"
onmouseout="hideNNMenu(event)"
TOP=90

LEFT=10>
<IMG SRC="BricksButton.gif" BORDER=0>
</LAYER>

<LAYER ID="WoodMenuLayer" onmouseout="this.top = -1400;" LEFT=120 TOP=-1400 ZINDEX=99>
<LAYER ID="WoodOak" TOP=0 LEFT=0 CLASS="LayerItemMenu" WIDTH=175 HEIGHT=20 BGCOLOR="orange" onmouseover="showOverMenu(this,'Oak Timber','OakWood.htm')" onmouseout="showOutMenu(this,'Oak Timber')">Oak Timber
</LAYER>
<LAYER ID="WoodTeak" TOP=22 LEFT=0 CLASS="LayerItemMenu" WIDTH=175 HEIGHT=20 BGCOLOR="orange" onmouseover="showOverMenu(this,'Teak Timber','TeakWood.htm')" onmouseout="showOutMenu(this,'Teak Timber')">Teak Timber</LAYER>

</LAYER>

</BODY>
</HTML>

Stefan

12-10-2002, 11:03 PM

Sorry, still don't know even where to start since not even the images are available to give a hint of what look you are aming for.

Perhaps it would be easier if you just explained what you wanted and/or showed an image or sketch of how you want the page to look.