"Sketcher" <sk******@eirco m.net> wrote in message
news:DF******** **********@news .indigo.ie...
Hi all,
I have a basic menu (compatible with IE and N6), the code of which is
shown below.
Is there any way that I can tidy this up - perhaps define the criteria
once only for the entire menu.
It seems like a lot of code for such a simple menu and repeatative in
parts.
Also, I take it that it should work with other popular browsers aswell
e.g. Opera.
Sketch
<CENTER>
<table width=100 border=0>
<tr>
<td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
onMouseout="thi s.style.backgro undColor='#ffff ff'"><ilayer
width=100%><lay er width=100% onMouseover="th is.bgColor='yel low'"
onMouseout="thi s.bgColor='whit e'"><FONT COLOR="#000000" FONT
FACE="VERDANA, ARIAL, HELVETICA, SANS-SERIF" SIZE=2><B>Item 1</ilayer></layer></td>
</tr>
<tr>
<td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
onMouseout="thi s.style.backgro undColor='#ffff ff'"><ilayer
width=100%><lay er width=100% onMouseover="th is.bgColor='yel low'"
onMouseout="thi s.bgColor='whit e'"><FONT COLOR="#000000" FONT
FACE="VERDANA, ARIAL, HELVETICA, SANS-SERIF" SIZE=2><B>Item 2</ilayer></layer></td>
</tr>
<tr>
<td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
onMouseout="thi s.style.backgro undColor='#ffff ff'"><ilayer
width=100%><lay er width=100% onMouseover="th is.bgColor='yel low'"
onMouseout="thi s.bgColor='whit e'"><FONT COLOR="#000000" FONT
FACE="VERDANA, ARIAL, HELVETICA, SANS-SERIF" SIZE=2><B>Item 3</ilayer></layer></td>
</tr>
</FONT></B>
</TABLE>
</CENTER>
Below are two solutions; watch for word-wrap.
Solution 1 uses CSS to reduce code:
<html>
<head>
<title>menues.h tm</title>
<style type="text/css">
td { font-family:verdana, arial,helvetica ,sans-serif; font-size:9pt;
font-weight:bold }
</style>
</head>
<body>
<center>
<table border="0" width="100">
<tr>
<td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
onMouseout="thi s.style.backgro undColor='#FFFF FF'">
<ilayer width=100%>
<layer width=100% onMouseover="th is.bgColor='yel low'"
onMouseout="thi s.bgColor='whit e'">
Item 1
</layer>
</ilayer>
</td>
</tr>
<tr>
<td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
onMouseout="thi s.style.backgro undColor='#FFFF FF'">
<ilayer width=100%>
<layer width=100% onMouseover="th is.bgColor='yel low'"
onMouseout="thi s.bgColor='whit e'">
Item 2
</layer>
</ilayer>
</td>
</tr>
<tr>
<td onMouseover="th is.style.backgr oundColor='#D5E 0B8'"
onMouseout="thi s.style.backgro undColor='#FFFF FF'">
<ilayer width=100%>
<layer width=100% onMouseover="th is.bgColor='yel low'"
onMouseout="thi s.bgColor='whit e'">
Item 3
</layer>
</ilayer>
</td>
</tr>
</table>
</center>
</body>
</html>
Solution 2 requires that JavaScript be enabled on the client's browser.
<html>
<head>
<title>menuez.h tm</title>
<style type="text/css">
td { font-family:verdana, arial,helvetica ,sans-serif; font-size:9pt;
font-weight:bold }
</style>
</head>
<body>
<center>
<script type="text/javascript">
var bgc1 = 'this.style.bac kgroundColor="# D5E0B8"';
var bgc2 = 'this.style.bac kgroundColor="# FFFFFF"';
var item = new Array();
item[0] = "Item 1";
item[1] = "Item 2";
item[2] = "Item 3";
var menu = "<table border='0' width='100'>\n" ;
for (var i=0; i<item.length; i++) {
menu += "<tr>\n";
menu += " <td onMouseover='" + bgc1 + "'\n";
menu += " onMouseout='" + bgc2 + "'>\n";
menu += " <ilayer width='100%'>\n ";
menu += " <layer width='100%' onMouseover='th is.bgColor=#FFF F00'
onMouseout='thi s.bgColor=#FFFF FF'>\n";
menu += " " + item[i] + "\n";
menu += " </layer>\n";
menu += " </ilayer>\n";
menu += " </td>\n";
menu += "</tr>\n";
}
menu += "</table>";
document.write( menu);
</script>
</center>
</body>
</html>
Your code had several mistakes.
1) </FONT></B> is at the end but should follow each set of <FONT ...><B>
tags
2) tags should be paired within each other; that is: your
</ilayer ...></layer> </ilayer></layer>
should be
</ilayer ...></layer> </layer></ilayer>
note the order of the closing tags.
Also, I don't see what the <layer> and <ilayer> tags do.
