如何为image map中已关联的图片添加热点映射？

核心问题分析 #

直接用<area>的href指向图片文件，会在新页面/标签打开纯图片，这种环境下无法添加<map>映射。必须把所有图片和对应的map都放在同一个HTML页面里，通过切换显示来实现导航。

具体实现步骤 #

1. 页面结构设计 #

把所有需要展示的图片和对应的<map>都写在页面中，默认只显示初始图片，其他图片设为隐藏。

2. 用JavaScript控制图片切换 #

给每个<area>添加点击事件，点击时切换显示对应的图片和map，同时隐藏当前的图片和map。

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        .image-container {
            display: none;
        }
        .image-container.active {
            display: block;
        }
    </style>
</head>
<body>
    <!-- 初始显示的图片 -->
    <div class="image-container active" id="system-setting-screen">
        <img usemap="#mymap" src="IV 1.10 System Setting Screen.png" width="1920px">
        <map name="mymap">
            <area alt="IV 1.10 System Menu" title="System Settings Menu" 
                  coords="1520,5,1570,53" shape="rect" 
                  onclick="showImage('system-menu-screen')">
            <area alt="Detector Status" title="Detector Status" 
                  coords="1496,2,1407,60" shape="rect" 
                  onclick="showImage('detector-status-screen')">
            <area alt="Help Menu" title="Help Menu" 
                  coords="1575,-2,1662,74" shape="rect" 
                  onclick="showImage('help-menu-screen')">
            <area alt="Worklist" title="Worklist" 
                  coords="929,3,1030,53" shape="rect" 
                  onclick="showImage('worklist-screen')">
            <area alt="Views Menu" title="Views Menu" href="" coords="1332,3,1402,50" shape="rect">
        </map>
    </div>

    <!-- System Menu图片及对应map -->
    <div class="image-container" id="system-menu-screen">
        <img usemap="#system-menu-map" src="IV 1.10 System Setting Screen Menu Drop Down.png" width="1920px">
        <map name="system-menu-map">
            <!-- 示例：返回按钮，根据实际坐标调整 -->
            <area alt="返回系统设置" title="返回系统设置" 
                  coords="10,10,50,50" shape="rect" 
                  onclick="showImage('system-setting-screen')">
            <!-- 其他热点按需求添加 -->
        </map>
    </div>

    <!-- Detector Status图片及对应map -->
    <div class="image-container" id="detector-status-screen">
        <img usemap="#detector-status-map" src="IV 1.10 System Setting Screen with Detector Quicklink.png" width="1920px">
        <map name="detector-status-map">
            <area alt="返回系统设置" title="返回系统设置" 
                  coords="10,10,50,50" shape="rect" 
                  onclick="showImage('system-setting-screen')">
            <!-- 其他热点区域 -->
        </map>
    </div>

    <!-- Help Menu图片及对应map -->
    <div class="image-container" id="help-menu-screen">
        <img usemap="#help-menu-map" src="Record Issue & Help_About_K_Console_InfoMenu.png" width="1920px">
        <map name="help-menu-map">
            <area alt="返回系统设置" title="返回系统设置" 
                  coords="10,10,50,50" shape="rect" 
                  onclick="showImage('system-setting-screen')">
            <!-- 其他热点区域 -->
        </map>
    </div>

    <!-- Worklist图片及对应map -->
    <div class="image-container" id="worklist-screen">
        <img usemap="#worklist-map" src="IV 1.10 Worklist screen.png" width="1920px">
        <map name="worklist-map">
            <area alt="返回系统设置" title="返回系统设置" 
                  coords="10,10,50,50" shape="rect" 
                  onclick="showImage('system-setting-screen')">
            <!-- 其他热点区域 -->
        </map>
    </div>

    <script>
        function showImage(containerId) {
            // 隐藏所有图片容器
            const allContainers = document.querySelectorAll('.image-container');
            allContainers.forEach(container => {
                container.classList.remove('active');
            });
            // 显示目标容器
            const targetContainer = document.getElementById(containerId);
            targetContainer.classList.add('active');
        }
    </script>
</body>
</html>

关键说明 #

• 所有图片和对应的<map>都放在同一个HTML文件里，通过CSS的display属性控制显示/隐藏。
• 每个<area>不再用href，而是改用onclick调用JS函数切换图片容器。
• 每个子图片的<map>可以独立设置自己的热点，包括返回上一级的按钮（示例中添加了返回初始页面的热点，你可以根据实际坐标调整）。
• 所有图片文件和这个HTML文件放在同一个目录下，直接打开HTML就能离线运行。

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