HTML可点击地图点击无响应问题排查求助

• 修正area标签的坐标属性名：代码中<area>的coord属性是错误的，HTML标准中该属性名为coords（末尾需加s）。属性名错误会导致浏览器无法识别点击区域的坐标范围，这是rect区域无响应的直接原因。
• 修正DOCTYPE声明：代码开头的<!DOCTYPE_html>写法错误，正确格式为<!DOCTYPE html>（下划线替换为空格）。错误的DOCTYPE会触发浏览器怪异模式，可能进一步影响图像映射的解析逻辑。
• 确保图像尺寸与坐标匹配：虽然你设置了图像的显示尺寸为500px×250px，但需确认原始ClickMap.gif的实际像素尺寸也为500×250px。若原始图像尺寸不同，即使坐标在画图工具中验证正确，缩放后的显示区域也会导致坐标偏移。建议使用<img>的width和height属性（而非仅CSS样式）定义尺寸，保持显示与原始尺寸一致。

修正后的完整代码：

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>いろんなところにジャンプ</title>
    </head>
    <body>
        <h1>いろんなところにジャンプ</h1>
        <img src="ClickMap.gif" alt="clickmap" usemap="#map1" width="500" height="250">
        <map name="map1">
            <area shape="rect" coords="105,72,395,195" alt="piku1" href="https://www.nintendo.com/jp/character/pikmin/index.html" />
            <area shape="default" alt="Other" href="https://www.nintendo.com/jp/character/pikmin/schedule/index.html?date=20240504" />
        </map>
    </body>
</html>

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