如何使图像映射响应？
[英]how to make an image map responsive?
问题描述
我正在尝试创建一个响应式图像映射。 它在桌面模式下运行良好，但是当我更改为移动模式时，超链接不再起作用。我从昨天开始检查了一些视频并在线阅读，但仍然无法找出问题所在。任何帮助将不胜感激提前。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Responsive Image Maps </title> <meta name="HandheldFriendly" content="True" /> <meta name="MobileOptimized" content="320" /> <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1" /> <script src="../../js/ios-orientationchange-fix.min.js"></script> <style> body { font-family: Helvetica, Arial, sans-serif; } img { border: none; height: auto; max-width: 100%; width: auto; } </style> </head> <body> <img src="test.jpg" usemap="#image-map"> <map name="#image-map"> <area alt="" title="" href="#" shape="rect" coords="915,1856,1012,1953" style="outline:none;" target="_self" /> <area alt="" title="" href="tel:513-442-7777" shape="rect" coords="1045,1859,1142,1956" style="outline:none;" target="_self" /> <area alt="" title="" href="mailto:test@test.CA" shape="rect" coords="1176,1856,1273,1953" style="outline:none;" target="_self" /> </map> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> <script> $(document).ready(function(e) { $('img[usemap]').rwdImageMaps(); $('area').on('click', function() { alert($(this).attr('alt') + ' clicked'); }); }); </script> </body> </html>
1 个解决方案
解决方案1
5 已采纳 2018-04-10 01:44:24
这可以通过简单的老式响应式图像和按百分比调整大小和位置的浮动锚点来实现。 尝试以几种不同的屏幕宽度加载以下代码段。 您将看到带有红色边框的浮动锚点悬停在所有屏幕宽度的木星上——图片随着视口而变大和缩小，并且链接会相应地调整其尺寸。
#wrapper { width: 100%; max-width: 812px; /*actual width of image-- behaves strangely if exceeding this*/ position: relative; } #wrapper img { max-width: 100%; } #anchor-jupiter { border: 1px solid red; height: 44%; width: 17%; position: absolute; left: 39.75%; top: 50%; }
<div id="wrapper"> <img src="https://i.stack.imgur.com/myS74.png" /> <a id="anchor-jupiter" href="https://en.wikipedia.org/wiki/Jupiter" target="_blank"></a> </div>
移除边框，您的行为与图像映射非常相似，但可以使用 CSS 进行完全配置，并且能够进行响应：
#wrapper { width: 100%; max-width: 812px; /*actual width of image-- behaves strangely if exceeding this*/ position: relative; } #wrapper img { max-width: 100%; } #anchor-jupiter { height: 44%; width: 17%; position: absolute; left: 39.75%; top: 50%; }
<div id="wrapper"> <img src="https://i.stack.imgur.com/myS74.png" /> <a id="anchor-jupiter" href="https://en.wikipedia.org/wiki/Jupiter" target="_blank"></a> </div>
现在，使用这种方法您会从图像映射中丢失一些东西——因为您使用的是通过 CSS 调整大小的锚点，所以您没有 像图像映射那样具有 完整的类似 SVG 的形状支持。 但是，您对 CSS 的形状支持有限。
另外，请注意，有可用的响应式图像的更新格式——尽管您必须检查浏览器支持并提供回退。
如何在窗口中自动调整图像和热点大小的自适应图像地图？
[英]How do I make a responsive image map where the image AND hotspots automatically resize with window?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.