求助：HTML中的<map>与<area>标签无法正常工作

Let’s break down the issues in your code and fix them step by step:

1. Duplicate Closing Slash (Syntax Error) #

First, your <area> tag has an extra closing slash at the end:

<area ... shape="rect" /> />

This invalid syntax can confuse browsers, causing them to ignore the tag entirely. Remove one slash so it ends with just />.

2. Coordinates Are Outside the Image’s Bounds #

Your image is set to width="750", but your coords start with 785 (the first value is the left x-position). Since 785 is wider than the image’s 750px width, this entire clickable area is positioned outside the visible image. That’s why clicking the image does nothing—there’s no clickable area on the actual image!

To fix this:

• Re-generate the coordinates using the correct image dimensions (750px wide) in your mapping tool (like image-map.net). Make sure all x-values in coords are between 0 and 750, and y-values are within the image’s height.
• For example, if you wanted the area to span from x=501 to x=700 (within the 750px width), adjust the coords to something like 501,495,700,614.

3. Local File Path May Cause Browser Restrictions #

Using an absolute local path (C:\Users\RS\Pictures\fotoshop\ananimous.png) can lead to issues with image maps in some browsers. Many browsers restrict interactive features like image maps for local files (opened via file:// protocol) due to security policies.

A better approach:

• Move the image to the same folder as your HTML file and use a relative path: src="ananimous.png".
• If possible, serve your page via a local development server (like XAMPP, WAMP, or Python’s python -m http.server command) instead of opening it directly as a file. This avoids most local file restrictions.

Fixed Code Example #

Here’s the corrected code with the syntax error fixed, plus a note to update the coords to your desired area:

<!-- Images -->
<img align="center" src="ananimous.png" alt="ananimouse" width="750" usemap="#hacker" />
<!-- Map generated with image-map.net -->
<map name="hacker">
  <area target="_blank" alt="anonymouse" title="anonymouse" href="https://en.wikipedia.org/wiki/Anonymous_(hacker_group)" coords="501,495,700,614" shape="rect" />
</map>

(Note: I added the # prefix to usemap="#hacker"—this is the standard-compliant way to reference the map, though some browsers work without it.)

Final Quick Checks #

• Ensure the name attribute of your <map> exactly matches the usemap value in your <img> (it’s case-sensitive!).
• After updating the coords, test the page in a browser. If it still doesn’t work, try serving it via a local server instead of using file://.

内容的提问来源于stack exchange，提问作者Parham Heydari