响应式图像映射
我有一个响应的HTML布局现有的图像映射。 图像根据浏览器大小进行缩放，但图像坐标显然是固定的像素大小。 我有什么select调整图像映射坐标？
对于响应式图像映射，您将需要使用一个插件：
https://github.com/stowball/jQuery-rwdImageMaps （不再维护）
要么
https://github.com/davidjbradshaw/imagemap-resizer
没有主要浏览器正确理解百分比坐标，并且所有解释百分比坐标都是像素坐标。
http://www.howtocreate.co.uk/tutorials/html/imagemaps
而且这个页面用于testing浏览器是否执行
响应式图像地图jQuery插件由马特·斯托
你也可以用svg代替imagemap;）
Ther是这个地址的教程，但链接已经死了： http : //demosthenes.info/blog/760/Create-A-Responsive-Imagemap-With-SVG
- 这里是jsfiddle一些不错的hover效果，描述和链接： http : //jsfiddle.net/eLbpmsaj/
.hover_group:hover { opacity: 1; } #projectsvg { position: relative; width: 100%; padding-bottom: 77%; vertical-align: middle; margin: 0; overflow: hidden; } #projectsvg svg { display: inline-block; position: absolute; top: 0; left: 0; }
<figure id="projectsvg"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1920 1080" preserveAspectRatio="xMinYMin meet" > //set your background image <image width="1920" height="1080" xlink:href="http://placehold.it/1920x1080"> </image> <g class="hover_group" opacity="0"> <a xlink:href="http://www.wooh.be/shop/mobilier/wooh-original-office-home/giroflex-353.html"> <text x="652" y="706.9" font-size="20">First zone</text> <rect x="572" y="324.1" opacity="0.2" fill="#FFFFFF" width="264.6" height="387.8"></rect> </a> </g> <g class="hover_group" opacity="0"> <a xlink:href="/shop/mobilier/wooh-original-office-home/giroflex-353.html"> <text x="1230.7" y="952" font-size="20">Second zone</text> <rect x="1081.7" y="507" opacity="0.2" fill="#FFFFFF" width="390.2" height="450"></rect> </a> </g> </svg> </figure>
我碰到了一个根本不使用图像映射的解决scheme，而是将绝对定位在图像上的锚定标签。 唯一的缺点是，热点将不得不是矩形，但是，这个解决scheme不依赖Javascript，只是CSS。 有一个网站，您可以用来生成锚的HTML代码： http : //www.zaneray.com/responsive-image-map/
我把图片和生成的锚标签放在一个相对定位的div标签中，一切工作完美的窗口resize，并在我的手机上。
大卫Bradshaw写了一个很好的小库，解决了这个问题。 它可以使用或不使用jQuery。
可在这里： https : //github.com/davidjbradshaw/imagemap-resizer
下面的方法完全适合我，所以这里是我的完整实现：
<img id="my_image" style="display: none;" src="my.png" width="924" height="330" border="0" usemap="#map" /> <map name="map" id="map"> <area shape="poly" coords="774,49,810,21,922,130,920,222,894,212,885,156,874,146" href="#mylink" /> <area shape="poly" coords="649,20,791,157,805,160,809,217,851,214,847,135,709,1,666,3" href="#myotherlink" /> </map> <script> $(function(){ var image_is_loaded = false; $("#my_image").load(function() { $(this).data('width', $(this).attr('width')).data('height', $(this).attr('height')); $($(this).attr('usemap')+" area").each(function(){ $(this).data('coords', $(this).attr('coords')); }); $(this).css('width', '100%').css('height','auto').show(); image_is_loaded = true; $(window).trigger('resize'); }); function ratioCoords (coords, ratio) { coord_arr = coords.split(","); for(i=0; i < coord_arr.length; i++) { coord_arr[i] = Math.round(ratio * coord_arr[i]); } return coord_arr.join(','); } $(window).on('resize', function(){ if (image_is_loaded) { var img = $("#my_image"); var ratio = img.width()/img.data('width'); $(img.attr('usemap')+" area").each(function(){ console.log('1: '+$(this).attr('coords')); $(this).attr('coords', ratioCoords($(this).data('coords'), ratio)); }); } }); }); </script>
为我工作（记得在代码中更改3件事情）：
-
previousWidth（图像的原始大小）
-
map_ID（您的图像地图的ID）
-
img_ID（您的图片的ID）
HTML：
<div style="width:100%;"> <img id="img_ID" src="http://www.gravatar.com/avatar/0865e7bad648eab23c7d4a843144de48?s=128&d=identicon&r=PG" usemap="#map" border="0" width="100%" alt="" /> </div> <map id="map_ID" name="map"> <area shape="poly" coords="48,10,80,10,65,42" href="javascript:;" alt="Bandcamp" title="Bandcamp" /> <area shape="poly" coords="30,50,62,50,46,82" href="javascript:;" alt="Facebook" title="Facebook" /> <area shape="poly" coords="66,50,98,50,82,82" href="javascript:;" alt="Soundcloud" title="Soundcloud" /> </map>
使用Javascript：
window.onload = function () { var ImageMap = function (map, img) { var n, areas = map.getElementsByTagName('area'), len = areas.length, coords = [], previousWidth = 128; for (n = 0; n < len; n++) { coords[n] = areas[n].coords.split(','); } this.resize = function () { var n, m, clen, x = img.offsetWidth / previousWidth; for (n = 0; n < len; n++) { clen = coords[n].length; for (m = 0; m < clen; m++) { coords[n][m] *= x; } areas[n].coords = coords[n].join(','); } previousWidth = img.offsetWidth; return true; }; window.onresize = this.resize; }, imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID')); imageMap.resize(); return; }
JSFiddle： http : //jsfiddle.net/p7EyT/154/
您可以使用下面的链接获得响应式地图图像
window.onload = function () { var ImageMap = function (map, img) { var n, areas = map.getElementsByTagName('area'), len = areas.length, coords = [], previousWidth = 128; for (n = 0; n < len; n++) { coords[n] = areas[n].coords.split(','); } this.resize = function () { var n, m, clen, x = img.offsetWidth / previousWidth; for (n = 0; n < len; n++) { clen = coords[n].length; for (m = 0; m < clen; m++) { coords[n][m] *= x; } areas[n].coords = coords[n].join(','); } previousWidth = document.body.clientWidth; return true; }; window.onresize = this.resize; }, imageMap = new ImageMap(document.getElementById('map_ID'), document.getElementById('img_ID')); imageMap.resize(); return; }
<div style="width:100%;"> <img id="img_ID" src="http://www.gravatar.com/avatar/0865e7bad648eab23c7d4a843144de48?s=128&d=identicon&r=PG" usemap="#map" border="0" width="100%" alt="" /> </div> <map id="map_ID" name="map"> <area shape="poly" coords="48,10,80,10,65,42" href="javascript:;" alt="Bandcamp" title="Bandcamp" /> <area shape="poly" coords="30,50,62,50,46,82" href="javascript:;" alt="Facebook" title="Facebook" /> <area shape="poly" coords="66,50,98,50,82,82" href="javascript:;" alt="Soundcloud" title="Soundcloud" /> </map>
http://home.comcast.net/~urbanjost/semaphore.html是讨论的首页，实际上有链接到基于JavaScript的解决scheme的问题。; 我收到了一个关于未来支持百分比单位的通知，但是在相当一段时间里我还没有看到任何进展（可能已经有一年多的时间了，因为我听到了支持即将到来），所以解决方法是如果您对JavaScript / ECMAScript感到满意，可能值得一看。
这取决于，你可以使用jQuery来按比例调整我想的范围。 为什么你用这个方式使用图像映射？ 你不能使用缩放div或其他元素吗？
对于那些不想使用JavaScript的人来说，下面是一个图片切片的例子：
http://codepen.io/anon/pen/cbzrK
当你缩放窗口时，小丑图像将相应地缩放，当小丑的鼻子保持超链接时。
看看Github上的图像地图插件。 它与vanilla JavaScript和作为一个jQuery插件。
$('img[usemap]').imageMap(); // jQuery ImageMap('img[usemap]') // JavaScript
看看演示 。
类似Orland的答案在这里： https : //stackoverflow.com/a/32870380/462781
结合克里斯的代码在这里： https : //stackoverflow.com/a/12121309/462781
如果区域适合网格，则可以使用透明图片覆盖区域，使用保持纵横比的宽度（以％为单位）。
.wrapperspace { width: 100%; display: inline-block; position: relative; } .mainspace { position: absolute; top: 0; bottom: 0; right: 0; left: 0; }
<div class="wrapperspace"> <img style="float: left;" title="" src="background-image.png" width="100%" /> <div class="mainspace"> <div> <img src="space-top.png" style="margin-left:6%;width:15%;"/> </div> <div> <a href="http://www.example.com"><img src="space-company.png" style="margin-left:6%;width:15%;"></a> </div> <div> <a href="http://www.example.com"><img src="space-company.png" style="margin-left:6%;width:10%;"></a> <a href="http://www.example.com"><img src="space-company.png" style="width:20%;"></a> </div> </div> </div>
出于某种原因，这些解决scheme都不适合我。 我已经有了使用变换的最佳成功。
transform: translateX(-5.8%) translateY(-5%) scale(0.884);
