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?

^hyd^ · March 15th, 2003, 12:53 AM

I seem to remember this as being one of those stupid "quirks" that I ran into a long time ago...
try removing any spaces between the tags.

for example: (note the red sections)

Code:

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

instead of:

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

I know it makes for ugly code, so indent as you would like... not sure if it'll fix it, but giver a try!

Cheers!

thronka · March 15th, 2003, 12:55 AM

make sure you use the <br> instead of a hard enter that seems like a double enter.

Fade2Grey · March 15th, 2003, 01:27 AM

Quote:

Originally posted by ^hyd^
I seem to remember this as being one of those stupid "quirks" that I ran into a long time ago...
try removing any spaces between the tags.

for example: (note the red sections)

Code:

<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> instead of: <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>

I know it makes for ugly code, so indent as you would like... not sure if it'll fix it, but giver a try!

Cheers!

Yay! It worked... thanks so much, this forum never fails to amaze me. And yeah it does make ugly code, but it also makes a pretty webpage so im happy.

Thanks again ^hyd^

Woohoo...

DarkLord33 · March 18th, 2003, 11:36 PM

just by looking i now know not to run into that problem too Woo-Hoo!