图片映射（Image Map）链接无法显示问题求助

问题根源及修正点： #

• 移除<map>标签的错误CSS样式：原生图片映射不需要给<map>加定位样式，它通过<img>的usemap属性自动关联图片区域，额外的定位会导致点击区域错位。
• 修正矩形区域的coords顺序：shape="rect"的坐标格式为left, top, right, bottom，需保证left < right、top < bottom，否则点击区域无效。
• 修复opacity的无效取值：opacity取值范围是0-1，将opacity:44改为opacity:0.44（可选，不影响点击功能）。

修改后的完整代码： #

CSS部分

body {
  margin: 0;
  padding: 0;
  background-image: url(https://r4.wallpaperflare.com/wallpaper/222/498/544/abstract-ancient-antique-art-wallpaper-ed9498c67de1d4a3a5e6a63f97c0653e.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: left;
}

.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  height: 50vh;
  width: 10vw;
  background-color: rgba(0, 0, 0, 0.2);
}

.sidebar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.sidebar li {
  margin: 10px 0;
  padding: 5px;
  width: 100%;
  text-align: center;
  color: white;
  font-size: 20px;
}

.sidebar li:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.content {
  margin: 0;
  padding: 0;
  position: relative;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 如需可视化点击区域可保留以下样式（已修正opacity取值） */
/* .content map {
  opacity: 0.44;
} */

HTML部分

<div class="content">
  <img src="https://i.ibb.co/PNcPCR3/breeland.jpg" usemap="#image-map">
  <map name="image-map">
    <!-- 修正coords顺序：left, top, right, bottom -->
    <area target="" alt="Farm" title="Farm" href="https://i.ibb.co/PNcPCR3/breeland.jpg" coords="42.45%, 29.21%, 53.41%, 34.07%" shape="rect">
    <!-- 修正coords顺序：left, top, right, bottom -->
    <area target="" alt="hhhggdfg45 " title="hhhggdfg45 " href="https://i.ibb.co/PNcPCR3/breeland.jpg" coords="11.15%, 57.16%, 89.02%, 76.29%" shape="rect">
  </map>
</div>
<div class="sidebar">
  <ul>
    <li>Link 1</li>
    <li>Link 2</li>
    <li>Link 3</li>
  </ul>
</div>

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