Tech Support Forums - TechIMO.com - View Single Post - Added JavaScript and it totally cocked up my menu bar :(

Fade2Grey · March 15th, 2003, 12:28 AM

stuff like this annoys me

i made myself a menu bar, basically it was 8 or 9 images downwards, each one was a button with some text on. When i just put the images on top of each other it worked fine... when i made them all links it still looked fine.

Then when i added my JavaScript function to put image swaps in it spaced them all out even though ive specified BORDER=0 in the img tag.

You can see what i mean in the attached image (ive made the bgcolor=red so you can see the space more clearly).

This is the code:

Code:

<HTML>


<HEAD>
<TITLE>Gergehtrhrth</TITLE>
 
<SCRIPT LANGUAGE="JavaScript">
  function menuSwap(name, type)  
  {
   eval("document." + name + ".src = 'images/menu_" + type + ".gif'");
  }
</SCRIPT>

</HEAD>



<BODY TOPMARGIN=0 BOTTOMMARGIN=0 LEFTMARGIN=0 RIGHTMARGIN=0 BGCOLOR=RED>
            <TABLE WIDTH=118 CELLSPACING=0 CELLPADDING=0>
             <TR HEIGHT=37>
              <TD>
               <A HREF="index.html"
                ONMOUSEOVER="menuSwap('news', 'news2');"
                ONMOUSEOUT="menuSwap('news', 'news1');">
                <IMG SRC="images/menu_news1.gif" WIDTH=118 HEIGHT=37 BORDER=0 ALT="News" NAME=news>
               </A>
             </TD>
             </TR>
             <TR HEIGHT=37>
              <TD>
               <A HREF="history.html"
                ONMOUSEOVER="menuSwap('history', 'history2');"
                ONMOUSEOUT="menuSwap('history', 'history1');">
                <IMG SRC="images/menu_history1.gif" WIDTH=118 HEIGHT=37 BORDER=0 ALT="History" NAME=history>
               </A>
             </TD>
             </TR>
             <TR HEIGHT=37>
              <TD>
               <A HREF="roster.html"
                ONMOUSEOVER="menuSwap('roster', 'roster2');"
                ONMOUSEOUT="menuSwap('roster', 'roster1');">
                <IMG SRC="images/menu_roster1.gif" WIDTH=118 HEIGHT=37 BORDER=0 ALT="Roster" NAME=roster>
               </A>
             </TD>
             </TR>
             <TR HEIGHT=37>
              <TD>
               <A HREF="rules.html"
                ONMOUSEOVER="menuSwap('rules', 'rules2');"
                ONMOUSEOUT="menuSwap('rules', 'rules1');">
                <IMG SRC="images/menu_rules1.gif" WIDTH=118 HEIGHT=37 BORDER=0 ALT="Rules" NAME=rules>
               </A>
             </TD>
            </TR>
           </TABLE>
</BODY>


</HTML>

It really irritates me when ive got something to work then i add something that should make no difference to the layout and it does ><!

Anyone know what the crack is with this?