如何單擊打開圖像的鏈接，然后僅顯示該圖像的一部分

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>