Javascript 动态调整图像贴图和图像的大小
我目前正在尝试在我的网站上制作一个图像地图，它将根据窗口的大小调整大小。。。我想知道是否有任何方法可以用HTML来实现这一点，或者我必须用Javascript或其他语言来实现这一点Javascript 动态调整图像贴图和图像的大小,javascript,html,image,map,Javascript,Html,Image,Map,我目前正在尝试在我的网站上制作一个图像地图，它将根据窗口的大小调整大小。。。我想知道是否有任何方法可以用HTML来实现这一点，或者我必须用Javascript或其他语言来实现这一点 <div style="text-align:center; width:1920px; margin-left:auto; margin-right:auto;"> <img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Imag
<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>
您可以使用CSS精灵来实现这一点。您将使图像片段只适合一个图像，这样您只需发出一个http请求来加载所有图像。这种技术不需要javascript，您只需使用
后台位置属性以移动图像
这是一种有效的页面优化技术。如果您最终使用JavaScript完成此任务，下面是一个跨浏览器代码段，用于调整映射
元素中所有区域的大小
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();
}
正在进行演示。如果你在IE中打开小提琴，当你点击它们时，你实际上可以看到区域。我写了一个小库来保持一个图像贴图缩放到一个可调整大小的图像，这样贴图在图像缩放时保持同步。当您要映射比例缩放的百分比图像等时非常有用
它可以与jQuery一起使用，也可以不与jQuery一起使用
你可以看到它在工作
上周我也遇到了同样的问题，最后我为此编写了一个jQuery插件
以下是gitHub项目：
基本用法：
$("img[usemap]").mapify();
现场示例
我只测试了直角坐标，但我认为它应该推广到圆形或多边形
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 );
}
函数换行（img，map）{
var originalCoords=[]，
测试=新图像（）；
对于（变量i=0；i
要使其正常工作，您需要有数据原始坐标
属性，该属性具有原始图片的坐标
$(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();
});
});
这适用于chrome、firefox和edge-least版本这里是我刚刚编写的另一个用于管理图像地图的插件：
除此之外，这些区域会根据图像的大小自动缩放。请注意，它正在使用画布渲染区域
基本用法：
$(function() {
$('#map').pictarea({
rescaleOnResize: true
});
});
作为一个班级（ES6）：
用法：
var map = document.getElementById('myMapId');
var image = document.getElementById('myImageId');
new ResponsiveImageMap(map, image, 800);
如果您可以访问Illustrator或其他可以生成SVG的程序，那么使用SVG创建动态图像地图就非常容易了
这不需要任何编程。
以下是Illustrator的说明（只需几秒钟）：
$("img[usemap]").mapify();
在Illustrator中打开图像，以新名称保存
将文档大小调整为与图像相同的大小
为贴图部分绘制填充矩形（有助于在
50%）
使用“属性”选项板向每个矩形添加链接
将所有矩形的不透明度更改为0%
选择图像并在“链接”调色板菜单中选择“未嵌入…”
（姓名无关紧要，我们不打算使用图像）
文件›另存为SVG（图像位置：链接，CSS属性：样式
元素，已检查）
打开生成的svg文件
删除前两行（XML和Adobe注释）
更新图像源
将svg代码粘贴到html文档中
这适用于所有主流浏览器。以下是Illustrator的SVG导出设置的屏幕截图：
您可以将坐标乘以原始图像和样式图像的比率
<img id="paredea" usemap="#PAREDE-A" src="https://i.imgur.com/o9nrUMR.png">
<map name="PAREDE-A">
<area id="paredea0" shape="rect" onclick="alert('colmeia A')">
<area id="paredea1" shape="rect" onclick="alert('colmeia B')">
<area id="paredea2" shape="rect" onclick="alert('colmeia C')">
<area id="paredea3" shape="rect" onclick="alert('colmeia D')">
<area id="paredea4" shape="rect" onclick="alert('colmeia E')">
<area id="paredea5" shape="rect" onclick="alert('comeia F')">
<area id="paredea6" shape="rect" onclick="alert('colmeia G')">
<area id="paredea7" shape="rect" onclick="alert('colmeia H')">
<area id="paredea8" shape="rect" onclick="alert('colmeia I')">
<area id="paredea9" shape="rect" onclick="alert('colmeia J')">
<area id="paredea10" shape="rect" onclick="alert('colmeia K')">
<area id="paredea11" shape="rect" onclick="alert('colmeia L')">
<area id="paredea12" shape="rect" onclick="alert('colmeia M')">
<area id="paredea13" shape="rect" onclick="alert('colmeia N')">
<area id="paredea14" shape="rect" onclick="alert('colmeia O')">
</map>
<script>
var coordsA = [];
coordsA[0] = "0,0,200,130";
coordsA[1] = "200,0,400,130";
coordsA[2] = "400,0,600,130";
coordsA[3] = "600,0,800,130";
coordsA[4] = "800,0,1000,130";
coordsA[5] = "0,160,200,240";
coordsA[6] = "200,160,400,240";
coordsA[7] = "400,160,600,240";
coordsA[8] = "600,160,800,240";
coordsA[9] = "800,160,1000,240";
coordsA[10] = "0,270,200,400";
coordsA[11] = "200,270,400,400";
coordsA[12] = "400,270,600,400";
coordsA[13] = "600,270,800,400";
coordsA[14] = "800,270,1000,400";
function setcoords(areaid, totalOfAreas) {
document.getElementById('paredea').style.width = "auto";
var width1 = document.getElementById('paredea').width;
document.getElementById('paredea').style.width = "100%";
var width2 = document.getElementById('paredea').width;
var ratio = width2 / width1;
for (var i = 0; i < totalOfAreas; i++) {
var temp = coordsA[i].split(",");
var newcoords = "";
for (var j = 0; j < temp.length; j++) {
temp[j] *= ratio;
newcoords += temp[j] + ",";
}
newcoords = newcoords.substr(0, newcoords.length - 1);
document.getElementById(areaid + i).coords = newcoords;
}
}
window.onload = function () {
setcoords("paredea", 15);
};
window.onresize = function () {
setcoords("paredea", 15);
};
</script>
var-coordsA=[]；
coordsA[0]=“0,0200130”；
coordsA[1]=“200,0400130”；
coordsA[2]=“400,0600130”；
coordsA[3]=“600,0800130”；
coordsA[4]=“800,01000130”；
coordsA[5]=“0160200240”；
coordsA[6]=“200160400240”；
coordsA[7]=“400160600240”；
coordsA[8]=“600160800240”；
coordsA[9]=“8001601000240”；
coordsA[10]=“0270200400”；
coordsA[11]=“200270400400”；
coordsA[12]=“400270600400”；
coordsA[13]=“600270800400”；
coordsA[14]=“8002701000400”；
功能设置坐标（区域ID、总面积）{
document.getElementById（'paredea'）.style.width=“auto”；
var width1=document.getElementById（'paredea'）.width；
document.getElementById（'paredea'）.style.width=“100%”；
var width2=document.getElementById（'paredea'）.width；
var比率=宽度2/1；
对于（var i=0；i<img id="paredea" usemap="#PAREDE-A" src="https://i.imgur.com/o9nrUMR.png">
<map name="PAREDE-A">
<area id="paredea0" shape="rect" onclick="alert('colmeia A')">
<area id="paredea1" shape="rect" onclick="alert('colmeia B')">
<area id="paredea2" shape="rect" onclick="alert('colmeia C')">
<area id="paredea3" shape="rect" onclick="alert('colmeia D')">
<area id="paredea4" shape="rect" onclick="alert('colmeia E')">
<area id="paredea5" shape="rect" onclick="alert('comeia F')">
<area id="paredea6" shape="rect" onclick="alert('colmeia G')">
<area id="paredea7" shape="rect" onclick="alert('colmeia H')">
<area id="paredea8" shape="rect" onclick="alert('colmeia I')">
<area id="paredea9" shape="rect" onclick="alert('colmeia J')">
<area id="paredea10" shape="rect" onclick="alert('colmeia K')">
<area id="paredea11" shape="rect" onclick="alert('colmeia L')">
<area id="paredea12" shape="rect" onclick="alert('colmeia M')">
<area id="paredea13" shape="rect" onclick="alert('colmeia N')">
<area id="paredea14" shape="rect" onclick="alert('colmeia O')">
</map>
<script>
var coordsA = [];
coordsA[0] = "0,0,200,130";
coordsA[1] = "200,0,400,130";
coordsA[2] = "400,0,600,130";
coordsA[3] = "600,0,800,130";
coordsA[4] = "800,0,1000,130";
coordsA[5] = "0,160,200,240";
coordsA[6] = "200,160,400,240";
coordsA[7] = "400,160,600,240";
coordsA[8] = "600,160,800,240";
coordsA[9] = "800,160,1000,240";
coordsA[10] = "0,270,200,400";
coordsA[11] = "200,270,400,400";
coordsA[12] = "400,270,600,400";
coordsA[13] = "600,270,800,400";
coordsA[14] = "800,270,1000,400";
function setcoords(areaid, totalOfAreas) {
document.getElementById('paredea').style.width = "auto";
var width1 = document.getElementById('paredea').width;
document.getElementById('paredea').style.width = "100%";
var width2 = document.getElementById('paredea').width;
var ratio = width2 / width1;
for (var i = 0; i < totalOfAreas; i++) {
var temp = coordsA[i].split(",");
var newcoords = "";
for (var j = 0; j < temp.length; j++) {
temp[j] *= ratio;
newcoords += temp[j] + ",";
}
newcoords = newcoords.substr(0, newcoords.length - 1);
document.getElementById(areaid + i).coords = newcoords;
}
}
window.onload = function () {
setcoords("paredea", 15);
};
window.onresize = function () {
setcoords("paredea", 15);
};
</script>
.twitterIcon64 { /* Actual Size */
background-size: 300px 282px;
background: url('/images/social-media-icons.png') no-repeat -18px -109px;
width: 64px;
height: 64px;
}
.twitterIcon32 { /* 1/2 size */
background-size: 150px 141px;
background: url('/images/social-media-icons.png') no-repeat -9px -54px;
width: 32px;
height: 32px;
}
.twitterIcon21 { /* 1/3 size */
background-size: 100px 94px;
background: url('/images/social-media-icons.png') no-repeat -6px -36px;
width: 22px; /* Round up to avoid truncation */
height: 22px; /* Round up to avoid truncation */
}