Member Avatar for penguino138

I've had this problem before, but couldn't get it fixed. I have done a little experiment for an interactive menu using onmouseover and onmouseout. But it only works in Chrome, but I would like it to work in IE as well. Hope you can help.

<!DOCTYPE html>
<html>
<title>Menu Experiment</title>
<head>


</head>

<body>
<p><img src="menu.jpg" alt="Menu Screen" name="mainlogo" usemap="map1"/>

<map name="map1">
<area shape="rect" coords="0,0,120,59" href="main.html" onmouseover="document.mainlogo.src='homemenu.jpg'" onmouseout="document.mainlogo.src='menu.jpg'" />
<area shape="rect" coords="121,0,290,59" href="random.html" onmouseover="document.mainlogo.src='randommenu.jpg'" onmouseout="document.mainlogo.src='menu.jpg'" />
<area shape="rect" coords="122,0,479,59" href="aboutus.html" onmouseover="document.mainlogo.src='aboutusmenu.jpg'" onmouseout="document.mainlogo.src='menu.jpg'" />
</map>
</p>
</body>


</html>
aboutusmenu.jpg 26.52 KB homemenu.jpg 26.58 KB menu.jpg 26.31 KB randommenu.jpg 26.88 KB
  • 3 Contributors
  • 3 Replies
  • 235 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Short diagnosis and why it worked in Chrome but not in IE (refs: , , )

The markup in the original post is tolerated by modern Chrome but trips stricter parsers. The two most common causes here are: the image’s usemap value must include a leading hash (for example usemap="#map1"), and the document structure (doctype/head/title) must be correct so IE does not fall back into quirks mode. Also, relying on name + document.mainlogo is brittle across engines — prefer id + getElementById. (developer.mozilla.org)

Minimal, pragmatic fixes (keeps the image-map approach)

  • Place the <!DOCTYPE html> at the very top and put <title> inside <head>.
  • Give the image an id, use usemap="#map1", and have the <map> use name="map1".
  • Reference the image with document.getElementById('mainlogo') in the area event handlers (more robust than document.mainlogo).

Example (corrected structure and JS call):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Menu Experiment</title>
</head>
<body>
  <img id="mainlogo" src="menu.jpg" alt="Menu Screen" usemap="#map1">

  <map name="map1" id="map1">
    <area shape="rect" coords="0,0,120,59" href="main.html"
      onmouseover="document.getElementById('mainlogo').src='homemenu.jpg';"
      onmouseout="document.getElementById('mainlogo').src='menu.jpg';">
    <!-- adjust other areas similarly -->
  </map>
</body>
</html>

The <map>/usemap pairing and named-access rules are explained in the HTML docs; using id+getElementById avoids cross-browser pitfalls. (developer.mozilla.org)

Troubleshooting checklist and alternatives

  • Confirm document.compatMode (or use IE’s F12 tools) to make sure the page isn’t rendering in quirks/compatibility mode. (developer.mozilla.org)
  • Ensure every <area> has an href (older IE historically needs it for events to behave). Check for overlapping coords — overlaps can mask hover behavior. (docstore.mik.ua)
  • For responsive layouts, image-map coords may need recalculation when the image is scaled; consider a responsive image-map helper or switch to CSS-positioned links or SVG for scalable, accessible hotspots (this is the CSS approach suggested).

Summary: fixing usemap="#map1", correcting head/doctype placement, and switching to id+getElementById will usually make the existing code work in IE; consider replacing the image-map with CSS/SVG for a more modern, robust menu.

Recommended Answers

All 3 Replies

Member Avatar for Dandello

What's it supposed to be doing? Is there a page to actually look at?

Member Avatar for penguino138

What's it supposed to be doing? Is there a page to actually look at?

No. It's a menu experiment. I used onmouseover and onmouseout to create an interactive menu. But it only works in Chrome, not IE

Member Avatar for almostbob

correct the doctype
html version dependent code fails

would likely be better in css than javascript, a large, and growing larger, proportion of users disable javascript as security risk, javascript menu doesnt work
css menus are much easier to code than image maps,
what happens when the user has the auto resize function (ie>7 ff=all saf=all) & the image is not the size you anticipate & coded for

Yeah I know paranoid, but if you plan for the worst, when **expletive** happens its only a pleasant suprise

Edited by almostbob because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.