table and div help

[kdcgrohl]

I'm adding some rollover action to my nav links. below is an example of what works. what I'd like to know is if there is a better way to format this so that I don't have to have all the <td width=?


<script>
function bOn(iname){
inames = iname.split('*');
for(i=0;i<inames.length;i++){document.getElementById(inames[i]).style.visibility = "visible";}}
function bOff(iname){
inames = iname.split('*');
for(i=0;i<inames.length;i++){document.getElementById(inames[i]).style.visibility = "hidden";}}
</script>

<table><tr>

<td width=5><div id="0a" style="position:absolute;"> [ </div>
<div id="0x" style="position:absolute;"> &middot; </div></td>

<td width=25><div style="position:absolute;">
<a href="blah" onMouseover="bOn('0a*0b');bOff('0x*1x');" onmouseout="bOff('0a*0b');bOn('0x*1x');">blah</a></div></td>

<td width=5><div id="0b" style="position:absolute;;"> ] </div>
<div id="1x" style="position:absolute;"> &middot; </div>
<div id="1a" style="position:absolute;;"> [ </div></td>

<td width=55><div style="position:absolute;">
<a href="blah" onMouseover="bOn('1a*1b');bOff('1x*2x');" onmouseout="bOff('1a*1b');bOn('1x*2x');">blah blah</a></div></td>

<td width=5><div id="1b" style="position:absolute;;"> ] </div>
<div id="2x" style="position:absolute;"> &middot; </div></td>

</tr></table>

<script>bOff('0a*0b*1a*1b');</script>

[Kravvitz]

IDs may not start with a number. (http://www.w3.org/TR/html401/types.html#type-name)

[kdcgrohl]

hmm. other than that, I answered my own question, so thanks for looking and if you care, here's my solution:

<script>
function bOn(iname){
inames = iname.split('*');
for(i=0;i<inames.length;i++){document.getElementById(inames[i]).style.visibility = "visible";}}
function bOff(iname){
inames = iname.split('*');
for(i=0;i<inames.length;i++){document.getElementById(inames[i]).style.visibility = "hidden";}}
</script>

<div id="0a" width=5 style="position:absolute;display:inline;"> [ </div>
<div id="0x" width=5 style="position:absolute;display:inline;"> &middot; </div>

<div style="display:inline;">&nbsp;&nbsp;
<a href="blah" onMouseover="bOn('0a*0b');bOff('0x*1x');" onmouseout="bOff('0a*0b');bOn('0x*1x');">blah</a>&nbsp;</div>

<div id="0b" width=5 style="position:absolute;display:inline;"> ] </div>
<div id="1x" width=5 style="position:absolute;display:inline;"> &middot; </div>
<div id="1a" width=5 style="position:absolute;display:inline;"> [ </div>

<div style="display:inline;">&nbsp;&nbsp;
<a href="blah_blah" onMouseover="bOn('1a*1b');bOff('1x*2x');" onmouseout="bOff('1a*1b');bOn('1x*2x');">blah blah</a>&nbsp;</div>

<div id="1b" width=5 style="position:absolute;display:inline;"> ] </div>
<div id="2x" width=5 style="position:absolute;display:inline;"> &middot; </div>

<script>bOff('0a*0b*1a*1b');</script>

[drhowarddrfine]

Despite that, as Kravitz said, ids cannot begin with a number which could make this unstable or unreliable.

[kdcgrohl]

point taken, letter added.