响应图像地图

我有一个现有的图像映射在一个响应的 html 布局。图像按照浏览器大小缩放，但图像坐标明显是固定的像素大小。我有什么选择来调整图像地图坐标？

327636 次浏览
小开

这取决于，你可以使用 jQuery 来按比例调整范围。 顺便问一下，为什么要使用图像映射? 难道不能使用缩放 div 或其他元素吗？

小开
最佳答案

对于响应图像地图，你需要使用一个插件:

Https://github.com/stowball/jquery-rwdimagemaps (不再维修)

或者

Https://github.com/davidjbradshaw/imagemap-resizer

没有一个主流浏览器能正确理解百分比坐标 将百分比坐标解释为像素坐标。

Http://www.howtocreate.co.uk/tutorials/html/imagemaps

还有这个页面，用于测试浏览器是否实现

Http://home.comcast.net/~urbanjost/img/resizeimg3.html

小开

响应图像映射 jQuery 插件作者: Matt Stow

小开

对于那些不想使用 JavaScript 的人，这里有一个图片切片的例子:

Http://codepen.io/anon/pen/cbzrk

当您缩放窗口时，小丑图像将相应缩放，当缩放时，小丑的鼻子保持超链接。

小开

DavidBradshaw 编写了一个很好的小库来解决这个问题，它可以使用 jQuery，也可以不使用 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").on('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>
小开

您还可以使用 SVG 代替图像映射。有 教程教你怎么做。下面是从 这把小提琴进口的样品。

.hover_group:hover {
opacity: 1;
}


#projectsvg {
position: relative;
width: 100%;
padding-bottom: 77%;
vertical-align: middle;
margin: 0;
overflow: hidden;
background: lightgreen;
}


#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" />


<!-- create the regions -->
<g class="hover_group" opacity="0">
<a xlink:href="https://example.com/link1.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="https://example.com/link2.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>

小开

为我工作(记住在代码中改变3件事情) :

  • 上一页宽度(图像的原始大小)

  • 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;
}

http://jsfiddle.net/p7EyT/154/

小开

与奥兰的回答类似: Https://stackoverflow.com/a/32870380/462781

结合 Chris 的代码: 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>

可以在% 中使用边距。此外，“空间”图像可以放置在一个第三级 div 内彼此相邻。

小开

我遇到过一个解决方案，它根本不使用图像映射，而是使用绝对定位在图像上的锚标记。唯一的缺点是热点必须是矩形的，但是这个解决方案不依赖于 Javascript，只依赖于 CSS。有一个网站，您可以使用生成的 HTML 代码的锚: http://www.zaneray.com/responsive-image-map/

我把图片和生成的锚标签放在一个相对定位的 div 标签中，在调整窗口大小和我的手机上，一切都很完美。

小开

看看 Github 上的 影像地图插件，它既可以使用普通的 JavaScript，也可以作为 jQuery 插件使用。

$('img[usemap]').imageMap();     // jQuery


ImageMap('img[usemap]')          // JavaScript

看看 小样。

小开

由于某些原因，这些解决方案都不适合我，我在使用变换方面取得了最大的成功。

transform: translateX(-5.8%) translateY(-5%) scale(0.884);
小开

我遇到了同样的要求，在哪里，我想显示响应图像地图，可以调整任何屏幕大小和重要的事情是，我想高亮的坐标。

因此，我尝试了许多库，可以调整大小坐标根据屏幕大小和事件。我得到了最好的解决方案(jquery.imagemapster.min.js) ，几乎所有的浏览器都能正常工作。此外，我已经集成了它与 Summer Plgin创建图像地图。

 var resizeTime = 100;
var resizeDelay = 100;


$('img').mapster({
areas: [
{
key: 'tbl',
fillColor: 'ff0000',
staticState: true,
stroke: true
}
],
mapKey: 'state'
});


// Resize the map to fit within the boundaries provided


function resize(maxWidth, maxHeight) {
var image = $('img'),
imgWidth = image.width(),
imgHeight = image.height(),
newWidth = 0,
newHeight = 0;


if (imgWidth / maxWidth > imgHeight / maxHeight) {
newWidth = maxWidth;
} else {
newHeight = maxHeight;
}
image.mapster('resize', newWidth, newHeight, resizeTime);
}


function onWindowResize() {


var curWidth = $(window).width(),
curHeight = $(window).height(),
checking = false;
if (checking) {
return;
}
checking = true;
window.setTimeout(function () {
var newWidth = $(window).width(),
newHeight = $(window).height();
if (newWidth === curWidth &&
newHeight === curHeight) {
resize(newWidth, newHeight);
}
checking = false;
}, resizeDelay);
}


$(window).bind('resize', onWindowResize);
img[usemap] {
border: none;
height: auto;
max-width: 100%;
width: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<script src="https://cdn.jsdelivr.net/npm/jquery-imagemapster@1.2.10/dist/jquery.imagemapster.min.js"></script>


<img src="https://discover.luxury/wp-content/uploads/2016/11/Cities-With-the-Most-Michelin-Star-Restaurants-1024x581.jpg" alt="" usemap="#map" />
<map name="map">
<area shape="poly" coords="777, 219, 707, 309, 750, 395, 847, 431, 916, 378, 923, 295, 870, 220" href="#" alt="poly" title="Polygon" data-maphilight='' state="tbl"/>
<area shape="circle" coords="548, 317, 72" href="#" alt="circle" title="Circle" data-maphilight='' state="tbl"/>
<area shape="rect" coords="182, 283, 398, 385" href="#" alt="rect" title="Rectangle" data-maphilight='' state="tbl"/>
</map>

希望能帮到别人。

小开

我找到了一个没有 JS 的方法来解决这个问题。命中区域将是长方形的，除非您更改边界半径使其成为圆形或椭圆形区域。

首先，确保您的图像位于一个相对定位的 div 中。然后将图像放入这个 div 中，这意味着它将占用 div 中的所有空间。最后，在图像下面的主 div 中添加绝对定位的 div，并使用顶部、左边、宽度和高度的百分比来获得所需的链接命中区域的大小和位置。

我发现最简单的方法就是在你第一次工作的时候给 div 设置一个黑色的背景颜色(最好是有一些 alpha 渐变，这样你就可以看到下面的链接内容) ，并且在你的浏览器中使用一个代码检查器来实时调整百分比，这样你就可以得到正确的结果。

这是你可以使用的基本大纲。通过使用百分比完成所有操作，您可以确保所有元素的相对大小和位置都与图像缩放相同。

<div style="position: relative;">
<img src="background-image.png" style="width: 100%; height: auto;">
<a href="/link1"><div style="position: absolute; left: 15%; top: 20%; width: 12%; height: 8%; background-color: rgba(0, 0, 0, .25);"></div></a>
<a href="/link2"><div style="position: absolute; left: 52%; top: 38%; width: 14%; height: 20%; background-color: rgba(0, 0, 0, .25);"></div></a>
</div>

在 Chrome 或者你的浏览器中使用这段代码，调整百分比(你可以更精确地使用十进制百分比) ，直到方框正确为止。也选择一个 background-color的 transparent当你准备使用它，因为你想你的命中区域是不可见的。

小开

响应宽度及高度

window.onload = function() {
var ImageMap = function(map, img) {
var n,
areas = map.getElementsByTagName('area'),
len = areas.length,
coords = [],
imgWidth = img.naturalWidth,
imgHeight = img.naturalHeight;
for (n = 0; n < len; n++) {
coords[n] = areas[n].coords.split(',');
}
this.resize = function() {
var n, m, clen,
x = img.offsetWidth / imgWidth,
y = img.offsetHeight / imgHeight;
imgWidth = img.offsetWidth;
imgHeight = img.offsetHeight;
for (n = 0; n < len; n++) {
clen = coords[n].length;
for (m = 0; m < clen; m += 2) {
coords[n][m] *= x;
coords[n][m + 1] *= y;
}
areas[n].coords = coords[n].join(',');
}
return true;
};
window.onresize = this.resize;
},
imageMap = new ImageMap(document.getElementById('map_region'), document.getElementById('prepay_region'));
imageMap.resize();
return;
}
小开

我已经创建了一个解决方案的 javascript 版本，这个解决方案是 Tom Bisiglia 建议的。

我的代码允许您使用一个正常的图像映射。所有你要做的就是加载几行 CSS 和几行 JS 和... ... 轰... ... 你的图像地图有悬浮状态，是完全响应！很神奇吧？

var images = document.querySelectorAll('img[usemap]');
images.forEach( function(image) {
var mapid = image.getAttribute('usemap').substr(1);
var imagewidth = image.getAttribute('width');
var imageheight = image.getAttribute('height');
var imagemap = document.querySelector('map[name="'+mapid+'"]');
var areas = imagemap.querySelectorAll('area');


image.removeAttribute('usemap');
imagemap.remove();


// create wrapper container
var wrapper = document.createElement('div');
wrapper.classList.add('imagemap');
image.parentNode.insertBefore(wrapper, image);
wrapper.appendChild(image);


areas.forEach( function(area) {
var coords = area.getAttribute('coords').split(',');
var xcoords = [parseInt(coords[0]),parseInt(coords[2])];
var ycoords = [parseInt(coords[1]),parseInt(coords[3])];
xcoords = xcoords.sort(function(a, b){return a-b});
ycoords = ycoords.sort(function(a, b){return a-b});
wrapper.innerHTML += "<a href='"+area.getAttribute('href')+"' title='"+area.getAttribute('title')+"' class='area' style='left: "+((xcoords[0]/imagewidth)*100).toFixed(2)+"%; top: "+((ycoords[0]/imageheight)*100).toFixed(2)+"%; width: "+(((xcoords[1] - xcoords[0])/imagewidth)*100).toFixed(2)+"%; height: "+(((ycoords[1] - ycoords[0])/imageheight)*100).toFixed(2)+"%;'></a>";
});
});
img {max-width: 100%; height: auto;}


.imagemap {position: relative;}
.imagemap img {display: block;}
.imagemap .area {display: block; position: absolute; transition: box-shadow 0.15s ease-in-out;}
.imagemap .area:hover {box-shadow: 0px 0px 1vw rgba(0,0,0,0.5);}
<!-- Image Map Generated by http://www.image-map.net/ -->
<img src="https://i.imgur.com/TwmCyCX.jpg" width="2000" height="2604" usemap="#image-map">
<map name="image-map">
<area target="" alt="Zirconia Abutment" title="Zirconia Abutment" href="/" coords="3,12,199,371" shape="rect">
<area target="" alt="Gold Abutment" title="Gold Abutment" href="/" coords="245,12,522,371" shape="rect">
<area target="" alt="CCM Abutment" title="CCM Abutment" href="/" coords="564,12,854,369" shape="rect">
<area target="" alt="EZ Post Abutment" title="EZ Post Abutment" href="/" coords="1036,12,1360,369" shape="rect">
<area target="" alt="Milling Abutment" title="Milling Abutment" href="/" coords="1390,12,1688,369" shape="rect">
<area target="" alt="Angled Abutment" title="Angled Abutment" href="/" coords="1690,12,1996,371" shape="rect">
<area target="" alt="Temporary Abutment [Metal]" title="Temporary Abutment [Metal]" href="/" coords="45,461,506,816" shape="rect">
<area target="" alt="Fuse Abutment" title="Fuse Abutment" href="/" coords="1356,461,1821,816" shape="rect">
<area target="" alt="Lab Analog" title="Lab Analog" href="/" coords="718,935,1119,1256" shape="rect">
<area target="" alt="Transfer Impression Coping Driver" title="Transfer Impression Coping Driver" href="/" coords="8,1330,284,1731" shape="rect">
<area target="" alt="Impression Coping [Transfer]" title="Impression Coping [Transfer]" href="/" coords="310,1330,697,1731" shape="rect">
<area target="" alt="Impression Coping [Pick-Up]" title="Impression Coping [Pick-Up]" href="/" coords="1116,1330,1560,1733" shape="rect">
</map>

小开

考虑使用这个映射器

返回文章页面 https://imagemapper.noc.io/#/

它的 SVG 为基础，它的响应和

它有好的巫师来建造地图

因为它不使用库，所以页面非常简单


提交答案