dynamic调整图像地图和图像的大小
我目前正在试图在我的网站上制作一个图像地图，这将resize取决于窗口的大小…我想知道是否有无论如何这样做与HTML或我将不得不这样做与Javascript或另一个语言。
<div style="text-align:center; width:1920px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="1920" height="1080" alt="" /> <map id="_Image-Maps_5201211070133251" name="Image-Maps_5201211070133251"> <area shape="poly" coords="737,116,1149,118,944,473," href="http://essper.bandcamp.com" alt="Bandcamp" title="Bandcamp" /> <area shape="poly" coords="1006,589,1418,590,1211,945," href="http://soundcloud.com/essper" alt="Soundcloud" title="Soundcloud" /> <area shape="poly" coords="502,590,910,591,708,944," href="http://facebook.com/the.essper" alt="Facebook" title="Facebook" /> </map>
如果您最终需要使用JavaScript来完成任务，那么这是一个跨浏览器的代码片段，用于调整MAP元素中的所有区域的大小。
window.onload = function () { var ImageMap = function (map) { var n, areas = map.getElementsByTagName('area'), len = areas.length, coords = [], previousWidth = 1920; for (n = 0; n < len; n++) { coords[n] = areas[n].coords.split(','); } this.resize = function () { var n, m, clen, x = document.body.clientWidth / 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')); imageMap.resize(); }
previousWidth必须等于原始图像的宽度。 您还需要在HTML中使用一些相对单位：
<div style="width:100%;"> <img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="100%" alt="" />
在jsFiddle工作演示。 如果你在IE中打开小提琴，你可以点击它们看到AREA 。
我写了一个小小的库以保持一个imageMap缩放到一个可resize的图像，所以当图像缩放时，地图保持同步。 当你想映射百分比缩放图像等时很有用
它可以使用或不使用jQuery。
https://github.com/davidjbradshaw/imagemap-resizer
你可以看到它在工作。
您可以尝试在坐标中使用百分比，但在大多数浏览器中（如果不是全部的话）不起作用。 所以你应该使用JavaScript。 或者使用absolut定位的div与基于百分比的坐标，而不是地图。
你可以使用CSS精灵来实现这一点。 你将只有一个图像适合的图像片断，这样你将只需要一个http请求来加载所有的图像。 这种技术不需要javascript，你只需要使用background-position; 财产移动您的图像。
这是一个有效的页面优化技术。
上周我遇到了同样的问题，最后我为此写了一个jQuery插件。
这是项目gitHub：
https://github.com/etienne-martin/mapify
基本用法：
$("img[usemap]").mapify();
现场示例
我只testing了这个直angular坐标，但我认为它应该推广到圆形或多边形
function wrap ( img, map ) { var originalCoords = [ ], test = new Image(); for ( var i = 0; i < map.areas.length; ++i ) { var coords = map.areas[i].coords; originalCoords.push( coords.split( "," ).map( parseFloat ) ); } function resize () { var ratio = img.width / test.width; for ( var i = 0; i < map.areas.length; ++i ) { map.areas[i].coords = originalCoords[i].map( function ( n ) { return ratio * n; } ).join( "," ); } } test.addEventListener( "load", function () { window.addEventListener( "resize", resize, false ); resize(); }, false ); test.src = img.src; } var imgs = document.querySelectorAll( "img[usemap]" ); for ( var i = 0; i < imgs.length; ++i ) { var map = document.querySelector( "map[name=" + imgs[i].useMap.substring( 1 ) + "]" ); wrap( imgs[i], map ); }
为了这个工作，你需要有data-original-coords属性具有原始图片的coords
$(function () { function adjeustCoords() { var image=$('img'); //change that to your image selector var originalWidth=image[0].naturalWidth; var currentWidth=image.width(); var ratio=currentWidth/originalWidth; $("map area").each(function(){ //change that to your area selector var coords=$(this).attr('data-original-coords').split(','); coords = coords.map(function (x) { return Math.round(x*ratio); //i don't know if all browsers can accept floating point so i round the result }); $(this).attr('coords',coords.join()); }); } adjeustCoords(); $(window).resize(function(){ adjeustCoords(); }); });
这与铬，火狐和边缘最低版本的作品
这里是另一个我刚刚写的pipe理图片映射的插件： https ： //github.com/gestixi/pictarea
除此之外，这些区域根据图像的大小自动缩放。 请注意，它使用canvas来渲染区域。
基本用法：
$(function() { $('#map').pictarea({ rescaleOnResize: true }); });
