Solved

onMouseOver and onClick event glitches

Posted on 1997-09-07
2
483 Views
Last Modified: 2011-10-03
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>
0
Comment
Question by:rc090797
2 Comments
 
LVL 10

Accepted Solution

by:
kollegov earned 50 total points
ID: 1269974
Problem in table. Netscape not always work correctly with
images placed in tables.
1. Try to remove table
and check would your script work or not.
(hope it will)
2. check your table and corresponding image sizes.
probably your images do not fit in predefined table
cells.
3. If you have this document on-line
drop me URL and I'll try to solve this puzzle.
(you are not first one who have such problems)
Give me some time and URL and I'll give you your html
back with corrected problems.
0
 

Author Comment

by:rc090797
ID: 1269975
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


0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
HTTPS jquery doesn't work 9 61
Removing HTML elements using javascript 4 45
javascript: add id amounts 5 47
jqury 17 29
In my daily work (mainly using ASP.net), I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
Introduction HTML checkboxes provide the perfect way for a web developer to receive client input when the client's options might be none, one or many.  But the PHP code for processing the checkboxes can be confusing at first.  What if a checkbox is…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

776 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question