www.webdeveloper.com
Results 1 to 5 of 5

Thread: table and div help

  1. #1
    Join Date
    Nov 2002
    Posts
    94

    table and div help

    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=?

    Code:
    <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>
    -=[ kdcgrohl.com ]=- JavaScripts, Site Protection, Etc...

  2. #2
    Join Date
    Jul 2005
    Location
    USA
    Posts
    3,910
    Learn CSS. | SSI | PHP includes | X/HTML Validator | CSS validator | Dynamic Site Solutions

    Design/program for Firefox (and/or Opera), apply fixes for IE, not the other way around.

    Check out my blog.

  3. #3
    Join Date
    Nov 2002
    Posts
    94
    hmm. other than that, I answered my own question, so thanks for looking and if you care, here's my solution:
    Code:
    <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>
    -=[ kdcgrohl.com ]=- JavaScripts, Site Protection, Etc...

  4. #4
    Join Date
    May 2005
    Posts
    2,040
    Despite that, as Kravitz said, ids cannot begin with a number which could make this unstable or unreliable.

  5. #5
    Join Date
    Nov 2002
    Posts
    94
    point taken, letter added.
    -=[ kdcgrohl.com ]=- JavaScripts, Site Protection, Etc...

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles