如何使圖像映射響應？
[英]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.