blocks|key|47206|text|使用链接的替代解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|47207|CSS：|47208|.image{
++position:+relative;
}
.image+a{
++display:+block;++++++
++position:+absolute;
}|code-block|syntax|javascript|47209|HTML：|47210|<div+class="image">
++<img+src="image.jpg"+alt="image"+/>
++<a+href="http://www.example.cz/1.html"+style="top:+10%25;+left:+10%25;+width:+15%25;+height:+15%25;"></a>
++<a+href="http://www.example.cz/2.html"+style="top:+20%25;+left:+50%25;+width:+15%25;+height:+15%25;"></a>
++<a+href="http://www.example.cz/3.html"+style="top:+50%25;+left:+80%25;+width:+15%25;+height:+15%25;"></a>
</div>|47211|可在图形编辑器中检测百分比尺寸|47212|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|T|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|V|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

Alternative solution using links:

CSS:

<pre><code>.image{
 position: relative;
}
.image a{
 display: block; 
 position: absolute;
}
</code></pre>

HTML:

<pre><code>&lt;div class="image"&gt;
 &lt;img src="image.jpg" alt="image" /&gt;
 &lt;a href="http://www.example.cz/1.html" style="top: 10%; left: 10%; width: 15%; height: 15%;"&gt;&lt;/a&gt;
 &lt;a href="http://www.example.cz/2.html" style="top: 20%; left: 50%; width: 15%; height: 15%;"&gt;&lt;/a&gt;
 &lt;a href="http://www.example.cz/3.html" style="top: 50%; left: 80%; width: 15%; height: 15%;"&gt;&lt;/a&gt;
&lt;/div&gt;
</code></pre>

Percentage dimensions can be detected in graphic editors

blocks|key|47190|text|这个jQuery+RWD+Image+Maps有一个jQuery插件。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|47191|您可能希望集成我的未决拉取请求(手动)以支持"width=100%25"：https://github.com/stowball/jQuery-rwdImageMaps/pull/10|47192|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/stowball/jQuery-rwdImageMaps|1|https://github.com/stowball/jQuery-rwdImageMaps/pull/10^0|2|L|0|0|Z|1J|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

There is a jQuery plugin for this <a href="https://github.com/stowball/jQuery-rwdImageMaps" rel="noreferrer">jQuery RWD Image Maps</a>.

You might want to integrate my pending pull request (manually) to support "width=100%": <a href="https://github.com/stowball/jQuery-rwdImageMaps/pull/10" rel="noreferrer">https://github.com/stowball/jQuery-rwdImageMaps/pull/10</a>

blocks|key|47883|text|你可以检查这个插件是救命的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|47884|当你想要映射一个百分比缩放的图像时非常有用。|47885|它可以与jQuery一起使用，也可以不与其一起使用。|47886|https://github.com/davidjbradshaw/imagemap-resizer|offset|length|47887|你可以看到它在。|47888|http://davidjbradshaw.com/imagemap-resizer/example/|47889|entityMap|0|LINK|mutability|MUTABLE|url|1^0|0|0|0|0|1E|0|0|0|0|1F|1|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$H|Z|I|10|1|11]]|A|$]]|$1|J|3|K|5|6|7|12|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|13|8|@]|9|@$H|14|I|15|1|16]]|A|$]]|$1|N|3|-4|5|6|7|17|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|G]]|U|$5|Q|R|S|A|$T|M]]]]

you can check this this plugin is life saving. 

Useful when you want to map a percentage scaled image etc.

It can be used with or without jQuery.

<a href="https://github.com/davidjbradshaw/imagemap-resizer" rel="nofollow noreferrer">https://github.com/davidjbradshaw/imagemap-resizer</a>

and you can see it working at.

<a href="http://davidjbradshaw.com/imagemap-resizer/example/" rel="nofollow noreferrer">http://davidjbradshaw.com/imagemap-resizer/example/</a>

blocks|key|46764|text|因为这不能通过简单的HTML/CSS操作来完成，所以唯一的替代方法是使用JavaScript来有效地根据图像的大小重新计算坐标。为此，我编写了一个函数(尽管涉及到两个函数)来实现此目的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|46765|function+findSizes(el,+src)+{
++++if+(!el+%7C%7C+!src)+{
++++++++return+false;
++++}
++++else+{
++++++++var+wGCS+=+window.getComputedStyle,
++++++++++++pI+=+parseInt,
++++++++++++dimensions+=+{};
++++++++dimensions.actualWidth+=+pI(wGCS(el,+null).width.replace('px',+''),+10);
++++++++var+newImg+=+document.createElement('img');
++++++++newImg.src+=+src;
++++++++newImg.style.position+=+'absolute';
++++++++newImg.style.left+=+'-10000px';
++++++++document.body.appendChild(newImg);
++++++++dimensions.originalWidth+=+newImg.width;
++++++++document.body.removeChild(newImg);
++++++++return+dimensions;
++++}
}

function+remap(imgElem)+{
++++if+(!imgElem)+{
++++++++return+false;
++++}
++++else+{
++++++++var+mapName+=+imgElem
++++++++++++.getAttribute('usemap')
++++++++++++.substring(1),
++++++++++++map+=+document.getElementsByName(mapName)[0],
++++++++++++areas+=+map.getElementsByTagName('area'),
++++++++++++imgSrc+=+imgElem.src,
++++++++++++sizes+=+findSizes(imgElem,+imgSrc),
++++++++++++currentWidth+=+sizes.actualWidth,
++++++++++++originalWidth+=+sizes.originalWidth,
++++++++++++multiplier+=+currentWidth+/+originalWidth,
++++++++++++newCoords;

++++++++for+(var+i+=+0,+len+=+areas.length;+i+<+len;+i%2B%2B)+{
++++++++++++newCoords+=+areas[i]
++++++++++++++++.getAttribute('coords')
++++++++++++++++.replace(/(\d%2B)/g,function(a){
++++++++++++++++++++return+Math.round(a+*+multiplier);
++++++++++++++++});
++++++++++++areas[i].setAttribute('coords',newCoords);
++++++++}
++++}
}

var+imgElement+=+document.getElementsByTagName('img')[0];

remap(imgElement);​|code-block|syntax|javascript|46766|JS+Fiddle+demo。|offset|length|46767|但请注意，这需要实现window.getComputedStyle()的浏览器(大多数最新的浏览器，但仅在IE版本9及更高版本中)。此外，除了确保将所需的参数传递给函数之外，不存在健全性检查。但是，如果您想要进行实验，这些应该是一个开始。|style|CODE|46768|参考文献：|46769|46770|document.body.|unordered-list-item|46771|document.createElement().|46772|document.getElementsByName().|46773|document.getElementsByTagName().|46774|element.getAttribute().|46775|element.setAttribute().|46776|element.style.|46777|Math.round().|46778|node.appendChild().|46779|node.removeChild().|46780|parseInt().|46781|string.replace().|46782|string.substring().|46783|window.getComputedStyle.|46784|46785|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/davidThomas/nagtB/2/|1|https://developer.mozilla.org/en/DOM/document.body|2|https://developer.mozilla.org/en/DOM/document.createElement|3|https://developer.mozilla.org/en/DOM/document.getElementsByName|4|https://developer.mozilla.org/en/DOM/document.getElementsByTagName|5|https://developer.mozilla.org/en/DOM/element.getAttribute|6|https://developer.mozilla.org/en/DOM/element.setAttribute|7|https://developer.mozilla.org/en/DOM/element.style|8|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/round|9|https://developer.mozilla.org/en/DOM/Node.appendChild|10|https://developer.mozilla.org/en/DOM/Node.removeChild|11|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt|12|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace|13|https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/substring|14|https://developer.mozilla.org/en/DOM/window.getComputedStyle^0|0|0|0|E|0|0|A|P|0|0|0|0|D|0|D|1|0|0|O|0|O|2|0|0|S|0|S|3|0|0|V|0|V|4|0|0|M|0|M|5|0|0|M|0|M|6|0|0|D|0|D|7|0|0|C|0|C|8|0|0|I|0|I|9|0|0|I|0|I|A|0|0|A|0|A|B|0|0|G|0|G|C|0|0|I|0|I|D|0|0|N|0|N|E|0|0^^$0|@$1|2|3|4|5|6|7|2L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|2M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|2N|8|@]|9|@$I|2O|J|2P|1|2Q]]|A|$]]|$1|K|3|L|5|6|7|2R|8|@$I|2S|J|2T|M|N]]|9|@]|A|$]]|$1|O|3|P|5|6|7|2U|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|2V|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|2W|8|@$I|2X|J|2Y|M|N]]|9|@$I|2Z|J|30|1|31]]|A|$]]|$1|U|3|V|5|T|7|32|8|@$I|33|J|34|M|N]]|9|@$I|35|J|36|1|37]]|A|$]]|$1|W|3|X|5|T|7|38|8|@$I|39|J|3A|M|N]]|9|@$I|3B|J|3C|1|3D]]|A|$]]|$1|Y|3|Z|5|T|7|3E|8|@$I|3F|J|3G|M|N]]|9|@$I|3H|J|3I|1|3J]]|A|$]]|$1|10|3|11|5|T|7|3K|8|@$I|3L|J|3M|M|N]]|9|@$I|3N|J|3O|1|3P]]|A|$]]|$1|12|3|13|5|T|7|3Q|8|@$I|3R|J|3S|M|N]]|9|@$I|3T|J|3U|1|3V]]|A|$]]|$1|14|3|15|5|T|7|3W|8|@$I|3X|J|3Y|M|N]]|9|@$I|3Z|J|40|1|41]]|A|$]]|$1|16|3|17|5|T|7|42|8|@$I|43|J|44|M|N]]|9|@$I|45|J|46|1|47]]|A|$]]|$1|18|3|19|5|T|7|48|8|@$I|49|J|4A|M|N]]|9|@$I|4B|J|4C|1|4D]]|A|$]]|$1|1A|3|1B|5|T|7|4E|8|@$I|4F|J|4G|M|N]]|9|@$I|4H|J|4I|1|4J]]|A|$]]|$1|1C|3|1D|5|T|7|4K|8|@$I|4L|J|4M|M|N]]|9|@$I|4N|J|4O|1|4P]]|A|$]]|$1|1E|3|1F|5|T|7|4Q|8|@$I|4R|J|4S|M|N]]|9|@$I|4T|J|4U|1|4V]]|A|$]]|$1|1G|3|1H|5|T|7|4W|8|@$I|4X|J|4Y|M|N]]|9|@$I|4Z|J|50|1|51]]|A|$]]|$1|1I|3|1J|5|T|7|52|8|@$I|53|J|54|M|N]]|9|@$I|55|J|56|1|57]]|A|$]]|$1|1K|3|-4|5|6|7|58|8|@]|9|@]|A|$]]|$1|1L|3|-4|5|6|7|59|8|@]|9|@]|A|$]]]|1M|$1N|$5|1O|1P|1Q|A|$1R|1S]]|1T|$5|1O|1P|1Q|A|$1R|1U]]|1V|$5|1O|1P|1Q|A|$1R|1W]]|1X|$5|1O|1P|1Q|A|$1R|1Y]]|1Z|$5|1O|1P|1Q|A|$1R|20]]|21|$5|1O|1P|1Q|A|$1R|22]]|23|$5|1O|1P|1Q|A|$1R|24]]|25|$5|1O|1P|1Q|A|$1R|26]]|27|$5|1O|1P|1Q|A|$1R|28]]|29|$5|1O|1P|1Q|A|$1R|2A]]|2B|$5|1O|1P|1Q|A|$1R|2C]]|2D|$5|1O|1P|1Q|A|$1R|2E]]|2F|$5|1O|1P|1Q|A|$1R|2G]]|2H|$5|1O|1P|1Q|A|$1R|2I]]|2J|$5|1O|1P|1Q|A|$1R|2K]]]]

Because this can't be done with simple HTML/CSS manipulation, the only alternative is JavaScript to, effectively, recalculate the coordinates based on the resizing of the image. To this end I've put together a function (though there's two functions involved) that achieves this end:

<pre><code>function findSizes(el, src) {
 if (!el || !src) {
 return false;
 }
 else {
 var wGCS = window.getComputedStyle,
 pI = parseInt,
 dimensions = {};
 dimensions.actualWidth = pI(wGCS(el, null).width.replace('px', ''), 10);
 var newImg = document.createElement('img');
 newImg.src = src;
 newImg.style.position = 'absolute';
 newImg.style.left = '-10000px';
 document.body.appendChild(newImg);
 dimensions.originalWidth = newImg.width;
 document.body.removeChild(newImg);
 return dimensions;
 }
}

function remap(imgElem) {
 if (!imgElem) {
 return false;
 }
 else {
 var mapName = imgElem
 .getAttribute('usemap')
 .substring(1),
 map = document.getElementsByName(mapName)[0],
 areas = map.getElementsByTagName('area'),
 imgSrc = imgElem.src,
 sizes = findSizes(imgElem, imgSrc),
 currentWidth = sizes.actualWidth,
 originalWidth = sizes.originalWidth,
 multiplier = currentWidth / originalWidth,
 newCoords;

 for (var i = 0, len = areas.length; i &lt; len; i++) {
 newCoords = areas[i]
 .getAttribute('coords')
 .replace(/(\d+)/g,function(a){
 return Math.round(a * multiplier);
 });
 areas[i].setAttribute('coords',newCoords);
 }
 }
}

var imgElement = document.getElementsByTagName('img')[0];

remap(imgElement);​
</code></pre>

<a href="http://jsfiddle.net/davidThomas/nagtB/2/" rel="nofollow">JS Fiddle demo</a>.

Please note, though, that this requires a browser that implements <code>window.getComputedStyle()</code> (most current browsers, but only in IE from version 9, and above). Also, there are no sanity checks other than ensuring the required arguments are passed into the functions. These should, though, be a start if you want to experiment.

References:

<ul>
<li><a href="https://developer.mozilla.org/en/DOM/document.body" rel="nofollow"><code>document.body</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/DOM/document.createElement" rel="nofollow"><code>document.createElement()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/DOM/document.getElementsByName" rel="nofollow"><code>document.getElementsByName()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/DOM/document.getElementsByTagName" rel="nofollow"><code>document.getElementsByTagName()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/DOM/element.getAttribute" rel="nofollow"><code>element.getAttribute()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/DOM/element.setAttribute" rel="nofollow"><code>element.setAttribute()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/DOM/element.style" rel="nofollow"><code>element.style</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Math/round" rel="nofollow"><code>Math.round()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/DOM/Node.appendChild" rel="nofollow"><code>node.appendChild()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/DOM/Node.removeChild" rel="nofollow"><code>node.removeChild()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/parseInt" rel="nofollow"><code>parseInt()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace" rel="nofollow"><code>string.replace()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/substring" rel="nofollow"><code>string.substring()</code></a>.</li>
<li><a href="https://developer.mozilla.org/en/DOM/window.getComputedStyle" rel="nofollow"><code>window.getComputedStyle</code></a>.</li>
</ul>

blocks|key|47796|text|图像映射中的百分比不是一个选项。您可能希望使用一些脚本(JS)来重新计算图像调整大小时的确切位置。当然，在该脚本中，如果需要，您可以使用百分比。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|47797|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Percentages in image maps are not an option. You might want to get some scripting involved (JS) that recalculates the exact position on images resize. Of course, in that script you can work with percentages if you want.

blocks|key|47799|text|考虑将Raphaël+JavaScript库与一些CSS一起使用。参见http://raphaeljs.com/和Drawing+over+an+image+using+Raphael.js。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|47800|entityMap|0|LINK|mutability|MUTABLE|url|http://raphaeljs.com/|1|https://stackoverflow.com/questions/3407333/drawing-over-an-image-using-raphael-js^0|Z|L|0|1L|12|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

Consider using the Raphaël JavaScript Library with some CSS. See <a href="http://raphaeljs.com/" rel="nofollow noreferrer">http://raphaeljs.com/</a> and <a href="https://stackoverflow.com/questions/3407333/drawing-over-an-image-using-raphael-js">Drawing over an image using Raphael.js</a>.

blocks|key|47894|text|我知道这是一个古老的问题，但也许有人会像我一样在某一时刻需要它。我修改了@David+Thomas的答案，让这一小段JS能够处理未来的重新计算：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|47895|function+findSizes(el,+src)+{
++++if+(!el+%7C%7C+!src)+{
++++++++return+false;
++++}
++++else+{
++++++++var+wGCS+=+window.getComputedStyle,
++++++++pI+=+parseInt,
++++++++dimensions+=+{};
++++++++dimensions.actualWidth+=+pI(wGCS(el,+null).width.replace('px',+''),+10);
++++++++var+newImg+=+document.createElement('img');
++++++++newImg.src+=+src;
++++++++newImg.style.position+=+'absolute';
++++++++newImg.style.left+=+'-10000px';
++++++++document.body.appendChild(newImg);
++++++++dimensions.originalWidth+=+newImg.width;
++++++++document.body.removeChild(newImg);
++++++++return+dimensions;
++++}
}

function+remap(imgElem)+{
++++if+(!imgElem)+{
++++++++return+false;
++++}
++++else+{
++++++++var+mapName+=+imgElem
++++++++.getAttribute('usemap')
++++++++.substring(1),
++++++++map+=+document.getElementsByName(mapName)[0],
++++++++areas+=+map.getElementsByTagName('area'),
++++++++imgSrc+=+imgElem.src,
++++++++sizes+=+findSizes(imgElem,+imgSrc),
++++++++currentWidth+=+sizes.actualWidth,
++++++++originalWidth+=+sizes.originalWidth,
++++++++multiplier+=+currentWidth+/+originalWidth,
++++++++newCoords;

++++++++for+(var+i+=+0,+len+=+areas.length;+i+<+len;+i%2B%2B)+{
++++++++++++//+Save+original+coordinates+for+future+use
++++++++++++var+originalCoords+=+areas[i].getAttribute('data-original-coords');
++++++++++++if+(originalCoords+==+undefined)+{
++++++++++++++++originalCoords+=+areas[i].getAttribute('coords');
++++++++++++++++areas[i].setAttribute('data-original-coords',+originalCoords);
++++++++++++}

++++++++++++newCoords+=+originalCoords.replace(/(\d%2B)/g,function(a){
++++++++++++++++return+Math.round(a+*+multiplier);
++++++++++++});
++++++++++++areas[i].setAttribute('coords',newCoords);
++++++++}
++++}
}

function+remapImage()+{
++++var+imgElement+=+document.getElementsByTagName('img')[0];
++++remap(imgElement);
}

//+Add+a+window+resize+event+listener
var+addEvent+=+function(object,+type,+callback)+{
++++if+(object+==+null+%7C%7C+typeof(object)+==+'undefined')+return;
++++if+(object.addEventListener)+{
++++++++object.addEventListener(type,+callback,+false);
++++}+else+if+(object.attachEvent)+{
++++++++object.attachEvent("on"+%2B+type,+callback);
++++}+else+{
++++++++object["on"%2Btype]+=+callback;
++++}
};

addEvent(window,+"resize",+remapImage);|code-block|syntax|javascript|47896|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

I know this is an old question but maybe someone needs this at some point as I did. I modified @David Thomas' answer a bit to be have this little piece of JS be able to handle future recalculations:

<pre><code>function findSizes(el, src) {
 if (!el || !src) {
 return false;
 }
 else {
 var wGCS = window.getComputedStyle,
 pI = parseInt,
 dimensions = {};
 dimensions.actualWidth = pI(wGCS(el, null).width.replace('px', ''), 10);
 var newImg = document.createElement('img');
 newImg.src = src;
 newImg.style.position = 'absolute';
 newImg.style.left = '-10000px';
 document.body.appendChild(newImg);
 dimensions.originalWidth = newImg.width;
 document.body.removeChild(newImg);
 return dimensions;
 }
}

function remap(imgElem) {
 if (!imgElem) {
 return false;
 }
 else {
 var mapName = imgElem
 .getAttribute('usemap')
 .substring(1),
 map = document.getElementsByName(mapName)[0],
 areas = map.getElementsByTagName('area'),
 imgSrc = imgElem.src,
 sizes = findSizes(imgElem, imgSrc),
 currentWidth = sizes.actualWidth,
 originalWidth = sizes.originalWidth,
 multiplier = currentWidth / originalWidth,
 newCoords;

 for (var i = 0, len = areas.length; i &lt; len; i++) {
 // Save original coordinates for future use
 var originalCoords = areas[i].getAttribute('data-original-coords');
 if (originalCoords == undefined) {
 originalCoords = areas[i].getAttribute('coords');
 areas[i].setAttribute('data-original-coords', originalCoords);
 }

 newCoords = originalCoords.replace(/(\d+)/g,function(a){
 return Math.round(a * multiplier);
 });
 areas[i].setAttribute('coords',newCoords);
 }
 }
}

function remapImage() {
 var imgElement = document.getElementsByTagName('img')[0];
 remap(imgElement);
}

// Add a window resize event listener
var addEvent = function(object, type, callback) {
 if (object == null || typeof(object) == 'undefined') return;
 if (object.addEventListener) {
 object.addEventListener(type, callback, false);
 } else if (object.attachEvent) {
 object.attachEvent("on" + type, callback);
 } else {
 object["on"+type] = callback;
 }
};

addEvent(window, "resize", remapImage);
</code></pre>

I need to create something like this:

<a href="http://www.mrporter.com/journal/journal_issue71/2#2" rel="noreferrer">http://www.mrporter.com/journal/journal_issue71/2#2</a>

where every product in my big image is associated with a tooltip which appears on mouse hover.
But I need this to work with fullscreen images. 

The first solution I thought (as the example above) is the map html solution where each fill up exactly the boundaries of my products. 
The problem is that I can't indicate precise values for my because my image size depends on window screen. 

The best solution would be the possibility to set percentage values for my area. 
Is this possible? Any other suggestions ?

Is possible create map html area in percentage?

我需要创建类似这样的东西：我的大图中的每个产品都与鼠标悬停时出现的工具提示相关联。但我需要这与全屏图像的工作。我认为的第一个解决方案(如上面的示例)是地图html解决方案，每个解决方案都准确地填充了我的产品的边界。问题是I不能为我的指示精确值，因为我的图像大小取决于窗口屏幕。最好的解决方案是为我的区域设置百分比值。这个是可能的吗？还有其他建议吗？

问可以在百分比中创建地图html区域吗？
EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在百分比中创建地图html区域吗？EN

回答 7

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问可以在百分比中创建地图html区域吗？
EN