如何单击打开图像的链接，然后仅显示该图像的一部分

Question

我有一张大地图，上面有兴趣点。

我想要的是在文本页面上有一个按钮，单击该按钮会在另一个窗口中打开地图图像。 然后，我需要的是图像仅显示地图的相关部分，该部分显示了带有按钮的原始页面上提到的兴趣点。

我已经找到了使用和坐标，或者将地图用作Sprite表格，或者使用CSS背景位置来显示地图的特定部分的方法，但是我找不到在单击按钮时实现此方法的方法。

理想情况下，我只想用CSS来实现这一点，因为将有很多页面链接到该图像。

这是我要实现的目标的小指南。

该图显示了它如何工作

    <style>

.map-one {
  background: url('map.jpg');
  background-position: center bottom;
  height: 300px;
  width: 300px;
}

</style>

<button><a class="map-one" href="map.jpg">Click</a></button>

这是我尝试过的一些代码的范例，这显然是错误的，但是当单击链接时，我不知道如何将css样式应用于图像。

Answer 1

好吧，它不仅仅适用于纯CSS，您必须将一些参数传递到新窗口。 因此，我假设您将X和Y坐标传递到新窗口，并且在新页面上可以使用该坐标。

首先，您需要包装“地图”以为其提供视口。 如果页面上没有其他内容，理论上您可以使用body：

<div id="mapviewport">
<div id="map">
</div>
</div>

因此，如果希望用户能够浏览地图，则可以在视口上使用overflow: auto ，否则可以使用overflow: hidden 。 地图容器获取地图的宽度/高度。 该地图是通过地图容器上的background-image提供的。

现在滚动到正确的位置，使用。 .scrollLeft上的scrollTop和.scrollLeft将地图滚动到正确的位置。

Answer 2

您将需要校准值，直到获得所需的确切区域为止，但是代码非常像这样：

主页

<a href="map.html" target="_blank"><button> <!-- Map page path -->
    CLICK ME!
</button></a>

地图页面

<style>
    div.map {
        background-image: url('map.png'); /* image file path */
        background-position: 70px 90px;   /* image position  */
        width: 200px;                     /* image size      */
        height: 200px;
    }
</style>
<div class="map"></div>