Link to home
Start Free TrialLog in
Avatar of rc090797
rc090797

asked on

onMouseOver and onClick event glitches

I'm using the following script to enable image flipping on six buttons. When VAR SIZE = 1, image #1 works properly, but none of the others work correctly at any value. All suggestions will be greatly appreciated.
Thanks,
Rick

     <!--

     var browser = navigator.appName.substring(0,8);
     var version = parseInt(navigator.appVersion);
     var javasupport = ((browser == "Netscape") && (version >= 3)) ||
     ((browser == "Microsoft") && (version >= 4));

     if (javasupport) {
     var normal = new makeArray(10);
     var hilite = new makeArray(10);
     var glow = new makeArray(10);
     var size = 1;


     hilite[1].src = "2_2graf.jpg"
     hilite[2].src = "2_3graf.jpg"
     hilite[3].src = "2_4graf.jpg"
     hilite[4].src = "3_2graf.jpg"
     hilite[5].src = "3_3graf.jpg"
     hilite[6].src = "3_4graf.jpg"

     normal[1].src = "2_2a.jpg"
     normal[2].src = "2_3a.jpg"
     normal[3].src = "2_4a.jpg"
     normal[4].src = "3_2a.jpg"
     normal[5].src = "3_3a.jpg"
     normal[6].src = "3_4a.jpg"

     glow[1].src = "2_2glow.jpg"
     glow[2].src = "2_3glow.jpg"
     glow[3].src = "2_4glow.jpg"
     glow[4].src = "3_2glow.jpg"
     glow[5].src = "3_3glow.jpg"
     glow[6].src = "3_4glow.jpg"

     }

     function makeArray(n) {
     this.length = n
     for (var i = 1; i<=n; i++) {
     this[i] = new Image()
     }
     return this
     }

     function onImage(num) {
     if (javasupport) {
     document.images[num + size].src = hilite[num].src;
     }
     }

     function offImage(num) {
     if (javasupport) {
     document.images[num + size].src = normal[num].src;
     }
     }

     function onGlow (num) {
     if (javasupport) {
     document.images[num + size].src = glow[num].src;
     }
     }

     // -->


     </script>


     </HEAD>

     <BODY BGCOLOR="#FFFFFF" LEFTMARGIN="0" TOPMARGIN="0">


     <TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0
     WIDTH=640 ALIGN="CENTER" VALIGN="MIDDLE">
     <TR ALIGN="CENTER" VALIGN="MIDDLE">
     <TD WIDTH=640 HEIGHT=55 COLSPAN=5 ALIGN="CENTER"
     VALIGN="MIDDLE" NOWRAP><IMG SRC="r1.jpg" WIDTH=640
     HEIGHT=55 BORDER=0></TD>
     </TR>
     <TR>
     <TD WIDTH=45 HEIGHT=277 ROWSPAN=2><IMG SRC="2-3_1.jpg"
     BORDER=0 HEIGHT=277 WIDTH=45></TD>

     <TD WIDTH=146 HEIGHT=131>
     <A HREF="about.htm" onMouseOver="onImage(1)"
     onMouseOut="offImage(1)" onClick="onGlow(1)">
     <IMG SRC="2_2a.jpg" BORDER=0 HEIGHT=131
     WIDTH=146></A></TD>

     <TD WIDTH=152 HEIGHT=131>
     <A HREF="services.htm" onMouseOver="onImage(2)"
     onMouseOut="offImage(2)" onClick="onGlow(2)">
     <IMG SRC="2_3a.jpg" BORDER=0 HEIGHT=131 WIDTH=152></TD>

     <TD WIDTH=145 HEIGHT=131>
     <A HREF="equip.htm" onMouseOver="onImage(3)"
     onMouseOut="offImage(3)" onClick="onGlow(3)">
     <IMG SRC="2_4a.jpg" BORDER=0 HEIGHT=131 WIDTH=145></TD>

     <TD WIDTH=152 HEIGHT=277 ROWSPAN=2><IMG SRC="2-3_5.jpg"
     BORDER=0 HEIGHT=277 WIDTH=152></TD>
     </TR>
     <TR>
     <TD WIDTH=146 HEIGHT=146>
     <A HREF="empops.htm" onMouseOver="onImage(4)"
     onMouseOut="offImage(4)" onClick="onGlow(4)">
     <IMG SRC="3_2a.jpg" BORDER=0 HEIGHT=146
     WIDTH=146></A></TD>

     <TD WIDTH=152 HEIGHT=146>
     <A HREF="ref.htm" onMouseOver="onImage(5)"
     onMouseOut="offImage(5)" onClick="onGlow(5)">
     <IMG SRC="3_3a.jpg" BORDER=0 HEIGHT=146 WIDTH=152></TD>

     <TD WIDTH=145 HEIGHT=146><A HREF="app.htm"
     onMouseOver="onImage(6)" onMouseOut="offImage(6)"
     onClick="onGlow(6)">
     <IMG SRC="3_4a.jpg" BORDER=0 HEIGHT=146 WIDTH=145></TD>
     </TR>
     <TR>
     <TD WIDTH=640 HEIGHT=148 COLSPAN=5><IMG SRC="r4.jpg"
     WIDTH=640 HEIGHT=148 BORDER=0></TD>
     </TR>
     </TABLE>
ASKER CERTIFIED SOLUTION
Avatar of kollegov
kollegov
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rc090797
rc090797

ASKER

This answer is a great idea, but not the problem solver. The table is necessary for the images to combine seamlessly to create one image.

I can't give you the URL, but I can tell you that the color coding that my html editor uses for different types of tags, changes at the last two functions statements of this script. This would indicate that the problem is not in the html itself, but in the script and how I've set the variables or defined the images. I need to know what error I've made in this area and was hoping the answer would be easily identified by someone more aquainted with JavaScript than I. I'm only able to hack a script.

Thanks,

Rick