Question

标题基本上解释了所有，我有一个地图img（png或jpg），我想在地图上放置标记，如果分辨率发生变化（媒体查询），它将缩放。所以在地图上点按钮..我该怎么做？目前我有一个容器，里面有背景图片，即地图......

#container-map{
    background-image: url(../img/map.png);
    z-index:9999;
    width:350px;
    height:900px;
    margin-left:150px;
    background-position: 0% 70%;
    background-repeat: no-repeat;
}

那么我怎样才能将小标记放在图像上，这是一张地图，这样我就能在所选的按钮上拉出信息？

Answer 1

您可以设置按钮position: absolute并使其z-index多于图片。

另一种设置块background-image然后在其上放置标记的方式。

Answer 2

为了获得更高的稳定性，您可以这样做：

Fiddle

为点使用html map标记：

<img src="http://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
    <area shape="rect" coords="0,0,82,126"  href="sun.htm" alt="Sun">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
  <area shape="circle" id="venus" coords="124,58,8" href="venus.htm" alt="Venus">
</map>
<label id="markup">!</label>

然后使用jQuery来获取每个点的偏移并将标记放在那里：

var x = $("#venus").offset();
$("#markup").offset({top:x.top+58,left:x.left+124});

你的css代码：

#markup{
    display:block;
    width:6px;
    height:15px;
    background:white;
    position:absolute;
    top:0;left:0;
}

将按钮放在将成为地图的png上的最佳方法

2 个答案: