图像的可点击区域 - 即使屏幕尺寸发生变化 html

Question

我正在尝试学习如何在 HTML 中制作一个简单的网站。目前我已经创建了一个背景图像，图像上有多个形状。我希望图像的不同部分成为可点击的链接。我知道如何找到坐标和使用图像地图，但是当我更改屏幕大小时可点击的链接不起作用。如何让可点击区域适用于不同的屏幕尺寸？

body, html {
        height: 100%;
        margin: 0;
    }
    
    .bg {
        background-position: left;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

    <div class="bg"></div>
    <body>
    <img src="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg" width="100%" height="100%" usemap="workmap" class="bg">
    <map name="workmap">
        <area target="_blank" alt="Game1" title="Game1" href="game1.html" coords="243,133,79" shape="circle">
        <area target="_blank" alt="Game2" title="Game2" href="game2.html" coords="870,147,680,33" shape="rect">
        <area target="_blank" alt="Game3" title="Game3" href="game3.html" coords="889,379,80" shape="circle">
        <area target="_blank" alt="CS" title="CS" href="https://code.org/educate/csp " coords="770,671,73" shape="circle">
        <area target="_blank" alt="Game4" title="Game4" href="game4.html" coords="163,587,214,492,267,473,335,483,377,603,327,631,249,658,211,641" shape="poly">
    </map>

谢谢！

Answer 1

为什么 `<map>` 方法不是最好的方法：

在 HTML 页面中使用 HTML 图片 <map>/<area> 系统有很多缺点。最值得注意的是，当图像本身将（应该）根据客户端屏幕尺寸可缩放和动态时，将与图像相关的可点击元素调整为需要显示的任何尺寸的过程在这里根本不存在。

由于 HTML <map> 元素的比例和大小是绝对，因此它们不适用于动态大小的内容（width:80%， ETC。）。

你可以做什么？

有几个选项。您会发现一些 Javascript systems 会在检测到 window（重新）大小时动态调整 <map> 区域边界的大小。这些当然会增加一些开销以及页面加载的 JS 膨胀。

或等等，鼓声来了……你能听到吗？

使用 SVG

是的 - Scalable Vector Graphics 是 ~~future~~ 介绍没有 Javascript 开销的图像映射点击，您可以在 their wiki or on MDN.

上阅读它们

因此，使用 SVG，您可以导入标准图像格式（例如 JPG 等），然后用锚点和可点击元素覆盖它，您可以使用类似 CSS 的样式来设置样式，这提供了比旧的 <map> 语法有更多的支持和可能性，例如淡入淡出、悬停、混合和模糊，所有这些都是由于用户交互、在任何设置点、任何大小的屏幕上发生在静态图像上的。

告诉我怎么做！

强烈推荐 this tutorial 在 HTML 图像元素上制作 SVG 可点击区域地图。

（为便于说明，突出显示了链接）

#backing {
 vertical-align: middle;
 margin: 0;
 overflow: hidden;
}
#backing svg { 
 display: inline-block;
 position: absolute;
 top: 0; left: 0;
}

    <figure id='backing'>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1280 504" preserveAspectRatio="xMinYMin meet" >
     <image width="1280" height="504" xlink:href="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg">
     </image>
   <a xlink:href="game1.html"><circle cx="243" cy="133" r="79" fill="#fff" opacity="0.15" /></a>
  <a xlink:href="game2.html"><rect x="870" y="147" width="680" height="33" fill="#fff" opacity="0.25"/></a>
  <a xlink:href="game3.html"><circle cx="889" cy="379" r="80" fill="#fff" opacity="0.1"/></a>
  <a xlink:href="https://code.org/educate/csp"><circle cx="770" cy="671" r="73" fill="#fff" opacity="0.2"/></a>
  <a xlink:href="game4.html"><polygon id="test" points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" fill="#fff" opacity="0.3"/></a>
     </svg>
      </figure>

Answer 2

我同意@Martin。这里最好的选择是 SVG。您的 SVG 可以如下所示：（我正在使用您的坐标。）

*{margin:0;padding:0;}
svg{width:100vh;border:1px solid;}
svg *{fill:rgba(0, 255, 255, .4)}

<svg viewBox="0 0 1800 1800">
   <image xlink:href="https://cdn.sstatic.net/Sites/Whosebug/img/404.svg" width="100%"  />
  <a xlink:href="https://whosebug.com"><circle cx="243" cy="133" r="79" /></a>
  <a xlink:href="https://whosebug.com"><rect x="870" y="147" width="680" height="33" /></a>
  <a xlink:href="https://whosebug.com"><circle cx="889" cy="379" r="80" /></a>
  <a xlink:href="https://whosebug.com"><circle cx="770" cy="671" r="73" /></a>
  <a xlink:href="https://whosebug.com"><polygon id="test" points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" /></a>
  
</svg>

图像的可点击区域 - 即使屏幕尺寸发生变化 html

Clickable areas of image - even when screen changes sizes html

html

css

image

imagemap

coordinates

为什么 `<map>` 方法不是最好的方法：

你可以做什么？

使用 SVG

告诉我怎么做！

图像的可点击区域 - 即使屏幕尺寸发生变化 html

Clickable areas of image - even when screen changes sizes html

html

css

image

imagemap

coordinates

为什么 <map> 方法不是最好的方法：

你可以做什么？

使用 SVG

告诉我怎么做！

为什么 `<map>` 方法不是最好的方法：