如何实现在一张图片上的某个区域做到点击事件？div+css的布局较table布局有什么优点?

最新推荐文章于 2024-08-24 03:29:52 发布

星儿AI

最新推荐文章于 2024-08-24 03:29:52 发布

阅读量1.6k

点赞数 24

分类专栏：前端知识点 HTML+CSS 案例\效果文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_37255976/article/details/134761761

版权

前端知识点同时被 3 个专栏收录

195 篇文章 4 订阅

订阅专栏

HTML+CSS

29 篇文章 7 订阅

订阅专栏

案例\效果

11 篇文章 0 订阅

订阅专栏

本文介绍了如何在HTML中通过CSS创建图片热区以响应点击事件，同时对比了div+CSS布局相较于table布局的优点，如易维护、加载速度快和利于SEO等。

摘要由CSDN通过智能技术生成

如何实现在一张图片上的某个区域做到点击事件？

请添加图片描述

下面是一个使用图片热区技术实现点击事件的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      position: relative;
      width: 500px;
    }

    .container img {
      width: 100%;
    }

    .container map {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
    }

    .container area {
      outline: none;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <div class="container">
    <img src="./img/1.jpeg" alt="Your Image" usemap="#Map" />
    <map name="Map">
      <area shape="rect" coords="0,0,100,100" href="#" onclick="handleClick()" />
      <area shape="rect" coords="100,0,200,100" href="#" onclick="handleClick()" />
      <!-- 添加更多的矩形作用区域，使用 coords 属性来指定矩形的坐标 -->
    </map>
  </div>

  <script>
    function handleClick() {
      // 在这里处理点击事件逻辑
      alert("点击了图片热区");
    }
  </script>
</body>
</html>