将图像放在HTML地图区域

时间:2015-04-21 17:40:44

标签: html

我有map。此地图上的所有字段都使用HTML地图区域。如何通过地图将图像放在一个字段(区域)中?示例:此building

地图代码:

<img src="slike/pregled/plangrada.jpg" width="800" height="480" usemap="#mapagrad">
<map name="mapagrad">
<area id="p1" shape="poly" coords="611,88,705,41,799,88,705,135" onclick="izaberi(this)" href="#">
<area id="p2" shape="poly" coords="-28,129,87,72,202,129,87,187" onclick="izaberi(this)" href="#">
<area id="p3" shape="poly" coords="347,154,407,124,467,154,407,184" onclick="izaberi(this)" href="#">
<area id="p4" shape="poly" coords="263,197,323,167,383,197,323,227" onclick="izaberi(this)" href="#">
<area id="p5" shape="poly" coords="431,197,491,167,551,197,491,227" onclick="izaberi(this)" href="#">
<area id="p6" shape="poly" coords="178,239,238,209,298,239,238,269" onclick="izaberi(this)" href="#">
<area id="p7" shape="poly" coords="515,238,575,208,635,238,575,268" onclick="izaberi(this)" href="#">
<area id="p8" shape="poly" coords="94,281,154,251,214,281,154,311" onclick="izaberi(this)" href="#">
<area id="p9" shape="poly" coords="607,292,779,206,951,292,779,378" onclick="izaberi(this)" href="#">
<area id="p10" shape="poly" coords="11,322,71,292,131,322,71,352" onclick="izaberi(this)" href="#">
<area id="p11" shape="poly" coords="179,323,239,293,299,323,239,353" onclick="izaberi(this)" href="#">
<area id="p12" shape="poly" coords="516,323,576,293,636,323,576,353" onclick="izaberi(this)" href="#">
<area id="p13" shape="poly" coords="258,362,322,330,386,362,322,394" onclick="izaberi(this)" href="#">
<area id="p14" shape="poly" coords="431,365,491,335,551,365,491,395" onclick="izaberi(this)" href="#">
<area id="p15" shape="poly" coords="512,398,657,326,802,398,657,471" onclick="izaberi(this)" href="#">
<area id="p16" shape="poly" coords="-62,394,109,309,280,394,109,480" onclick="izaberi(this)" href="#">
<area id="p18" shape="poly" coords="346,407,406,377,466,407,406,437" onclick="izaberi(this)" href="#">
</map>

1 个答案:

答案 0 :(得分:0)

你不能因为图像地图真的只是识别图像上的链接。我建议在地图周围创建一个包装器:

<div class="map"></div>

将您的建筑物放置在图像顶部,位置为:absolute:

http://codepen.io/anon/pen/WvNQQr