Problem in Javascript {Pop-it menu}

[rdasheiff]

First, I'm well aware that differences exist between browsers.
This code runs well on Netscape 4.79 and IE 5.5, but not Firefox 1.02
How can I modified it to run on Firefox and Netscape and IE ?

Example http://www.magnesium.net/~rdasheif/travel/nm_map.htm

The problem is the pop up menu comes out first time, and only once.
It should hide and reappear each time you mouseover, but it
stays hidden unless the page is refreshed. Is it something with
onMouseout="delayhidemenu()"

Try the city Albuquerque
http://www.magnesium.net/~rdasheif/travel/nm_map.htm#

The other links work ok unless everything is killed by
the one time use of the menu tag.
Try the city Truth or Consequences
http://www.magnesium.net/~rdasheif/t...m#truth_conseq

[jscheuer1]

I checked the original code for this script and it works fine on FF. The JavaScript console gives an error on your page. Says it doesn't like the image map. It doesn't say that exactly but, I am sure that is what it means. I'd try with just one map coordinate and build up from there if you can get that working.

[rdasheiff]

I originally posted this on Mozilla's forum (no replies),
with the title "Problem in Javascript and/or CSIM", since
I also considered the Client Side Image Map one possible
source of error. I had reviewed the Javascript Console report
and was puzzled by it's rejection of all the map coordinates:

Error: The "coords" attribute of the <area shape="rect"> tag is
not in the "left,top,right,bottom" format.
Source File: http://www.magnesium.net/~rdasheif/travel/nm_map.htm
Line: 0

But the coordinates are coded correctly, according to the program
(MapThis! by Todd Wilson) and uses
Rectangle: x1,y1,x2,y2 [top-left, bottom-right]

Although starting with "one" map coordinate and re-building is
a good approach, it's not practical since my site has a 1000.

[jscheuer1]

Although starting with "one" map coordinate and re-building is
a good approach, it's not practical since my site has a 1000.

That's why I suggested you do it. Seriously though, it is clear to me that the error message you and I both saw is itself somewhat erroneous, as there are no coords on line 0. And, you are correct, the coords are given in the proper format. One spot where you are mistaken is that starting from one and building is impractical as, in all likelihood, if you get one working it will become the template for all of them.

[mwinter]

Your mark-up is invalid, which is why it fails. However, this particular issue isn't something an SGML validator could warn you about - you must have read the HTML specification. That said, the validator will have pointed out other errors, such as the malformed height attribute in the img tag, and the missing quotation marks on many of the href attributes.

The problem at hand is the div element nested within the map element. If you read the section on client-side image maps you'll see that block-level and area elements are mutually exclusive. When the script adds links into that div without coords attributes, the browser is left in a no-win situation: it must ignore the area elements as defined by the specification, but it can't use the new links as they aren't valid, either.

I've taken the liberty of correcting the issue and tidying things up a little bit. You might want to look closely at:

• The updated metadata.
• The new rules in the style sheet.
• Structural and grammar changes to the introduction.
• Structural changes to the links at the end of the document.

in the new version. I've also made a few minor alterations to the script, as well as reformatting it. The script is actually a candidate for rewriting, but I'm not up for doing that at the moment. As well as improving form, it should be updated to work with documents rendered in Standards mode (which is, incidentally, why there's no document type declaration in the mark-up.)

Mike

[jscheuer1]

The problem at hand is the div element nested within the map element.

Since I complain when I think you throw us off the track, I think it is only fair I congratulate you on this good catch. I didn't see that division hiding in there. Your new code works great!

[rdasheiff]

Mike,
That is amazing work. I will definitely go over it in detail.
It runs fine (as jscheuer1 notes) and there are no errors in
the Javascript Console. It ran good in IE 5.5, but crashed in
Netscape 4.79. I reloaded, had some format problems in the header
but the script itself ran well. So I need to tweak it for all
three browsers before final release. Likely as it's on your server,
it doesn't link to the pages on my server if the link is in the pop up
menu. Will check if that is server specific because of the form of
the href or something else.
Again, great job. I'm impressed and thankful for your time and interest.
Ric

[jscheuer1]

Although Mike may object after all his work on this, all that is needed to make your old page 'work' is to move the:

<DIV class=menuskin id=popmenu 
  onmouseover="clearhidemenu();highlightmenu(event,'on')" 
  onmouseout="highlightmenu(event,'off');dynamichide(event)"></DIV>

division outside of the code for the image map. By doing only this much and no more, it will preserve the full look and feel of your original page and perhaps its functionality in that older browser - works fine in NS4.79 here as well as NS7.2 and IE6 and FF1.0.2

[rdasheiff]

That's another stroke of genius (and a saving of carpal tunnel for re-coding for 50 states and Canada). I had been working on trying to pick out pieces of code from Mike's revision to save time, but this simple cut-and-paste of one line and moving it above the start of the image map code does the trick. Javascript Console still reports all the coord errors. And all the #'s without qoutes and other errors it doesn't report which are still there are forgiven in IE5.5, NS4.79 and FF1.02
Hooray
ric

[mwinter]

It [...] crashed in Netscape 4.79. I reloaded, had some format problems in the header [...].

As you know, NN4 has weak support for CSS, which is certainly the reason for the display problems, and probably the reason for the crash, too. However, I couldn't replicate the problem so I couldn't tell you exactly what's causing it. However, I included an at-rule hack that will hide certain problematic parts from NN4 (as well as correcting a syntax error I introduced intentionally, but forgot to remove).

It doesn't look exactly the same under NN4, but

1. Trying to get pixel-perfect rendering across multiple user agents is a fools errand.
2. Unless a disproportionate number of your visitors use NN4, you should consider that user agent dead and forgotten (though making sure you don't crash it is a good idea).

Likely as it's on your server, it doesn't link to the pages on my server if the link is in the pop up menu.

That's just because you used relative URLs for those particular links. It will be fine in the same location on your server, though the URL to the map is altered in that version.

Although Mike may object [...]

No, not really. The changes should be made, but it's the OP's decision.

[Just moving the invalid div] That's another stroke of genius (and a saving of carpal tunnel for re-coding for 50 states and Canada).

If you have many pages that have that same mark-up, then there is one change I strongly recommend: move the script into an external file. Why have users download the same content again and again, when they could just download it once and use a cached version.

[After moving] Javascript Console still reports all the coord errors.

Really? Didn't get that.

In case ddadmin reads this post: The description for the pop-it menu states that the menu works in IE4 (and later versions). It does not - the script assigns to the id property of menu items when they are highlighted. The id property is read-only prior to IE5, so the script halts with an error. There is no reasonable work-around (including the use of classes).

Mike