Switching from Layer to Table

windows · Jan 9, 2008

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=http://www.webdeveloper.com/forum/archive/index.php/"WoodButton.gif" BORDER=0> 
</LAYER> 
<LAYER ID=MetalMenuImgLayer 
onmouseover="showNNMenu(event)" 
onmouseout="hideNNMenu(event)" 
TOP=50 
 
LEFT=10> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"MetalButton.gif" BORDER=0> 
</LAYER> 
<LAYER ID=BricksMenuImgLayer 
onmouseover="showNNMenu(event)" 
onmouseout="hideNNMenu(event)" 
TOP=90 
 
LEFT=10> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"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>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.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=http://www.webdeveloper.com/forum/archive/index.php/"' + 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=http://www.webdeveloper.com/forum/archive/index.php/"WoodButton.gif" BORDER=0> 
</LAYER> 
<LAYER ID=MetalMenuImgLayer 
onmouseover="showNNMenu(event)" 
onmouseout="hideNNMenu(event)" 
TOP=50 
 
LEFT=10> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"MetalButton.gif" BORDER=0> 
</LAYER> 
<LAYER ID=BricksMenuImgLayer 
onmouseover="showNNMenu(event)" 
onmouseout="hideNNMenu(event)" 
TOP=90 
 
LEFT=10> 
<IMG SRC=http://www.webdeveloper.com/forum/archive/index.php/"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>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.

Switching from Layer to Table

windows

Guest