我正在尝试学习如何用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>
谢谢！
答案 0 :(得分：1)
<map>方法不是最好的方法：在HTML页面中使用HTML图像<map> / <area>系统存在许多弊端。最值得注意的是，当图像本身（应该）基于客户端屏幕尺寸可扩展和动态时，将与图像相关的可点击元素调整为所需的任何尺寸的显示过程，在这里根本就不存在。
由于HTML <map>元素的大小和大小都是绝对，因此它们不适用于动态大小的内容（width:80%等）。
有一些选择。您可以找到一些Javascript systems，当<map>检测到窗口大小时，它们会动态调整<map>区域边界的大小。这些当然会增加一些开销，并给页面加载增加JS膨胀。
OR 等待，有鼓声即将来临...您能听到吗？
是- S 可缩放的 V 扇区 G raphics是与图片映射点击有关的 future 无需使用Javascript，您可以在their wiki或on MDN上阅读有关它们的信息。
因此，使用SVG，您可以导入标准图像格式（例如JPG等），然后将其与锚点和可单击元素叠加，然后可以使用类似CSS的样式进行样式设置，这比提供了更多支持和可能性静态图像上的旧#backing {
vertical-align: middle;
margin: 0;
overflow: hidden;
}
#backing svg {
display: inline-block;
position: absolute;
top: 0; left: 0;
}语法（例如淡入淡出，悬停，混合和模糊）都是由于在任何设置点，任何大小的屏幕上用户交互而导致的。
强烈建议this tutorial在HTML图像元素上制作SVG可点击区域地图。
（为了便于说明，突出显示了链接）
<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><div><img id="logo" style="width:30%" src="https://www.gstatic.com/webp/gallery3/3.png"/>dddddddd</div>
<input type="button" id="download" value="download" /> click to console
<div><button id="button1" class="button1">submit1</button></div>
<p id="bottom-content">footer</p>
答案 1 :(得分：1)
我同意@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/stackoverflow/img/404.svg" width="100%" />
<a xlink:href="https://stackoverflow.com"><circle cx="243" cy="133" r="79" /></a>
<a xlink:href="https://stackoverflow.com"><rect x="870" y="147" width="680" height="33" /></a>
<a xlink:href="https://stackoverflow.com"><circle cx="889" cy="379" r="80" /></a>
<a xlink:href="https://stackoverflow.com"><circle cx="770" cy="671" r="73" /></a>
<a xlink:href="https://stackoverflow.com"><polygon id="test" points="163,587 214,492 267,473 335,483 377,603 327,631 249,658 211,641" /></a>
</svg>