如何为多页面image map的当前点击区域设置持久红色背景？

这问题我之前做项目时正好碰到过，核心就是要让「点击过的区域」在新页面加载时能被识别出来，然后给它加上持久的红色背景样式。结合你已经在用的mapper.js，给你两个实用的方案：

这个思路最直接，通过给每个area的跳转链接加参数，让新页面知道哪个区域是“活跃”的，加载时自动给对应区域加样式。

步骤拆解：

1. 修改你的area跳转链接，添加上唯一的区域标识参数：

   <area shape="rect" coords="0,0,100,100" href="page1.html?active=home" alt="Home">
   <area shape="rect" coords="100,0,200,100" href="page2.html?active=about" alt="About">
   <!-- 其他区域同理，给每个area的href加?active=xxx，xxx用唯一标识比如alt值/id -->
   

2. 在mapper.js里（或者单独写一段页面加载逻辑），读取URL参数并设置活跃样式：

   // 页面加载完成后执行
   window.addEventListener('load', () => {
     // 获取URL里的active参数
     const urlParams = new URLSearchParams(window.location.search);
     const activeAreaKey = urlParams.get('active');
     
     if (activeAreaKey) {
       // 找到对应标识的area元素（这里用alt匹配，你也可以用id）
       const targetArea = document.querySelector(`area[alt="${activeAreaKey}"]`);
       if (targetArea) {
         // 给它添加自定义活跃类
         targetArea.classList.add('active-area');
       }
     }
   });
   

3. 在CSS里定义活跃类的样式（优先级要覆盖hover样式的话，可以加!important）：

   .active-area {
     background-color: red !important;
     /* 如果你需要和hover样式区分，也可以调整边框等属性 */
   }
   

如果不想让URL里带参数，可以用浏览器的localStorage来存储最后点击的区域标识，页面加载时读取这个值并设置样式。

步骤拆解：

1. 给所有area绑定点击事件，存储当前区域的标识：

   document.querySelectorAll('area').forEach(area => {
     area.addEventListener('click', function() {
       // 用alt属性作为唯一标识存储到localStorage
       localStorage.setItem('activeMapArea', this.getAttribute('alt'));
     });
   });
   

2. 页面加载时读取localStorage并设置活跃样式：

   window.addEventListener('load', () => {
     const activeAreaKey = localStorage.getItem('activeMapArea');
     if (activeAreaKey) {
       const targetArea = document.querySelector(`area[alt="${activeAreaKey}"]`);
       if (targetArea) {
         targetArea.classList.add('active-area');
       }
     }
   });
   

3. 同样在CSS里定义.active-area的红色背景样式，和方案1一致。

• 确保每个area都有唯一的标识（比如alt、id），这样才能精准找到对应元素；
• 如果你的mapper.js是通过动态生成内联样式来处理hover效果的，记得让.active-area的样式优先级更高（比如用!important或者更具体的选择器）；
• URL参数方案的优势是和页面绑定，不会因为用户清除缓存丢失状态；localStorage方案则更隐蔽，不会影响URL美观，按需选择即可。

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