图片的可点击区域-即使屏幕尺寸更改为html [英] Clickable areas of image - even when screen changes sizes html
问题描述
我正在尝试学习如何用HTML创建一个简单的网站。目前，我已经创建了一个背景图像，该图像上具有多种形状。我希望图像的不同部分成为可单击的链接。我了解如何找到坐标并使用图像地图，但是当我更改屏幕尺寸时，可单击的链接不起作用。如何使可点击区域适用于不同的屏幕尺寸？
I am trying to learn how to make a simple website in HTML. Currently I have created a background image that image has multiple shapes on it. I want different parts of the image to be clickable links. I understand how to find the coordinates and use an image map however the clickable links are not working when I change the screen size. How can I make the clickable areas work for different screen sizes?
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>
谢谢！
推荐答案
为什么< map> 方法不是最佳方法：
使用HTML图像< map> / < area> 有许多缺点。 code> HTML页面中的系统。最值得注意的是，当图像本身（应该）基于客户端屏幕尺寸可扩展和动态时，将与图像相关的可点击元素调整为所需尺寸的过程就完全不存在了。
Why the <map> approach is not the best way:
There are numerous disadvantages to using the HTML image <map>/<area> system in your HTML pages. Most notably because when the image itself will (should) be scalable and dynamic based on client screen size, the process of adjusting the clickable elements relating to the image to whatever size display is required, simply doesn't exist here.
HTML < map> 元素的尺寸和大小都是绝对，它们将无法处理动态尺寸的内容（宽度：80％等）。
As HTML <map> elements are absolute in their scale and size, they will not work with dynamicly sized content (width:80%, etc.).
有几种选择。有一些 Javascript系统，您会发现它们会动态调整< map> 区域边界，当它检测到窗口（重新）大小时。这些当然会增加一些开销，以及页面加载的JS膨胀。
There are a few options. There are some Javascript systems you can find that will dynamically resize the <map> area boundaries when it detects the window (re)size. These will of course add some overhead as well as JS bloat to page loads.
OR 等待，有鼓声即将来临...您能听到吗？
OR Wait for it, there's a drumroll coming... can you hear it?
是- S 可缩放 V 扇区 G raphics是与图片映射点击相关的未来，而无需使用Javascript，您可以在其Wiki 或在MDN上。
Yep - Scalable Vector Graphics are the future present with regards to image-mapping clicks without the Javascript overhead, you can read about them on their wiki or on MDN.
因此，使用SVG，您可以导入标准图像格式（ （例如JPG等），然后将其与锚点和可点击元素重叠，您可以使用类似CSS的样式进行样式设置，这比旧的< map> 语法（例如淡入淡出，悬停，混合和模糊化）都是由于在任何设置点，任何大小的屏幕上用户交互而在静态图像上发生的所有情况。
So, using SVGs you can import a standard image format (such as JPG, etc.) and then overlay this with anchor points and clickable elements that you can style with CSS-like styling, which gives vastly more support and possibilities than the old <map> syntax, such as fades, hovers, blends and blurs all happening on static images due to user interaction, at any set point, on any sized screen.
强烈推荐使用 本教程 关于在HTML图像元素上制作SVG可点击区域地图。
Highly Recommended is this tutorial on making an SVG clickable area map on an HTML image element.
（突出显示链接是出于说明目的）
(links are highlighted for illustration purposes)
#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>
这篇关于图片的可点击区域-即使屏幕尺寸更改为html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
