动态调整图像地图和图像的大小 [英] Dynamically resizing Image-maps and images
问题描述
我目前正在尝试在我的网站上制作一个图像地图,它会根据窗口的大小调整大小......我想知道是否有办法用 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"/></地图>
如果您最终使用 JavaScript 完成任务,这里有一个跨浏览器代码片段,用于调整 MAP
元素中所有区域的大小.
window.onload = function () {var ImageMap = 函数(地图){无功,area = map.getElementsByTagName('area'),len = area.length,坐标 = [],以前的宽度 = 1920;for (n = 0; n
previousWidth
必须等于原始图像的宽度.您还需要在 HTML 中使用一些相对单位:
<img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="100%" alt=""/>在 jsFiddle 上的工作演示.如果在 IE 中打开 fiddle,点击它们时实际上可以看到 AREA
.
I'm currently trying to make an Image-Map on my site that will resize depending on the size of the window... I was wondering if there was anyway to do this with HTML or will I have to do this with Javascript or another language.
<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>
解决方案 If you end up to do the task with JavaScript, here is a cross-browser codesnippet to resize all areas in MAP
element.
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
must be equal to the width of the original image. You also need to use some relative units in HTML:
<div style="width:100%;">
<img id="Image-Maps_5201211070133251" src="Site.png" usemap="#Image-Maps_5201211070133251" border="0" width="100%" alt="" />
Working demo at jsFiddle. If you open the fiddle in IE, you can actually see AREA
s when clicking them.
这篇关于动态调整图像地图和图像的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文