如何在HTML全屏图片上划分区域实现点击弹窗等交互？

你想要给全屏图片划分可点击区域，触发不同操作？这其实很容易实现，我给你两种常用的方案，结合你现有的Materialize框架来做，直接就能用：

方案一：使用HTML原生<map>+<area>标签（推荐简单场景） #

这是HTML自带的图片热区功能，不需要额外JS，适合规则形状的区域（矩形、圆形、多边形）。

修改后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <title>Parallax Template - Materialize</title>
  <!-- CSS -->
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
  <style>
    /* 让图片全屏显示 */
    img.fullscreen {
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      display: block;
    }
  </style>
</head>
<body>
  <!-- 给图片加上usemap属性，关联对应的map -->
  <img src="background1.jpg" alt="Unsplashed background img 1" class="fullscreen" usemap="#imageMap">

  <!-- 定义热区map -->
  <map name="imageMap">
    <!-- 右上角矩形区域：coords是 左,上,右,下 坐标，支持百分比适配不同屏幕 -->
    <area shape="rect" coords="80%,0,100%,20%" alt="右上角区域" href="#" onclick="showModal()">
    <!-- 额外示例：右下角圆形区域 -->
    <area shape="circle" coords="90%,90%,5%" alt="右下角圆形" href="#" onclick="alert('点击了右下角圆形区域')">
  </map>

  <!-- Materialize的弹窗组件 -->
  <div id="modal1" class="modal">
    <div class="modal-content">
      <h4>右上角区域被点击啦！</h4>
      <p>这是你触发的弹窗内容~</p>
    </div>
    <div class="modal-footer">
      <a href="#!" class="modal-close waves-effect waves-green btn-flat">关闭</a>
    </div>
  </div>

  <!-- Scripts-->
  <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script src="js/materialize.js"></script>
  <script src="js/init.js"></script>
  <script>
    // 初始化Materialize弹窗
    $(document).ready(function(){
      $('.modal').modal();
    });

    // 触发弹窗的函数
    function showModal() {
      $('#modal1').modal('open');
    }
  </script>
</body>
</html>

关键说明 #

• usemap="#imageMap"：把图片和<map>标签绑定，实现热区关联
• <area>标签的shape可选rect（矩形）、circle（圆形）、poly（多边形），coords支持百分比或像素定义区域范围
• 直接复用Materialize的Modal组件，完美契合你的现有技术栈

方案二：使用绝对定位的透明Div（适合复杂交互/自定义样式） #

如果需要更灵活的交互（比如hover效果、自定义异形区域），可以用绝对定位的透明div覆盖在图片上：

核心代码示例 #

<body>
  <div class="image-container">
    <!-- 全屏图片作为容器背景 -->
    <img src="background1.jpg" alt="Unsplashed background img 1" class="fullscreen">
    <!-- 右上角可点击区域 -->
    <div class="click-area top-right" onclick="showModal()"></div>
    <!-- 左下角可点击区域 -->
    <div class="click-area bottom-left" onclick="alert('点击了左下角区域')"></div>
  </div>

  <!-- 弹窗部分和方案一一致 -->
  <div id="modal1" class="modal">...</div>

  <style>
    .image-container {
      position: relative;
      width: 100vw;
      height: 100vh;
    }
    img.fullscreen {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .click-area {
      position: absolute;
      cursor: pointer;
      /* 透明背景，hover时可添加视觉反馈 */
      background-color: rgba(255,255,255,0.1);
      transition: background-color 0.3s;
    }
    .click-area:hover {
      background-color: rgba(255,255,255,0.3);
    }
    .top-right {
      top: 0;
      right: 0;
      width: 20%;
      height: 20%;
    }
    .bottom-left {
      bottom: 0;
      left: 0;
      width: 25%;
      height: 30%;
    }
  </style>

  <!-- 脚本部分和方案一一致 -->
</body>

优势 #

• 可以给区域添加hover、active等视觉反馈
• 支持任意异形区域（通过border-radius或clip-path实现）
• 更容易结合JS实现复杂交互逻辑

两种方案都能满足你的需求，根据实际场景选择即可~

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