Tom*_*Tom 86
对于响应式图像映射,您需要使用插件:
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
bel*_*gac 36
您也可以使用svg而不是图像映射.;)
.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" />
<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>小智 17
我遇到了一个根本不使用图像映射的解决方案,而是完全定位在图像上的锚标签.唯一的缺点是热点必须是矩形的,但优点是这个解决方案不依赖于Javascript,只是CSS.有一个网站可用于生成锚点的HTML代码:http://www.zaneray.com/responsive-image-map/
我将图像和生成的锚标签放在相对定位的div标签中,一切都在窗口调整大小和手机上完美运行.
Gro*_*uez 11
David Bradshaw写了一个很好的小库来解决这个问题.它可以与jQuery一起使用或不与jQuery一起使用.
可在此处获取:https://github.com/davidjbradshaw/imagemap-resizer
小智 11
如果您对矩形点击区域没问题，我发现了一种无JavaScript的方法可以解决此问题。
首先，确保图像位于相对位置的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因为您希望隐藏区域。
考虑使用这个图像映射器
https://imagemapper.noc.io/#/ | github | 替代链接
它基于 SVG 且响应灵敏
它有很好的向导来构建地图
对于页面来说它足够简单，因为它不使用库
以下方法对我来说非常合适,所以这是我的完整实现:
<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>
小智 5
为我工作（记住在代码中更改 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/