定位<img>與另一個<img>相關，同時保持可重複性

作爲網站的一部分，我正在爲類中期項目工作，我嘗試創建交互式地圖。我們的目標是將圖像放置在頁面中心（我已經完成），這是我的大學北校區的地圖。然後將另一個圖像置於頂部，就像是一個「標記」圖像。我們的目標是在地圖上放置多個這些「標記」圖像，因此當您將鼠標懸停在地圖上時，會彈出一個顯示圖像或視頻的彈出窗口。定位<img>與另一個<img>相關，同時保持可重複性

當我改變頁面的寬度時，我目前被困在維護標記<img>的地方，我想要它與父代<img>相關。我可以硬編碼地圖圖像的大小。不過，我更願意保持調整大小的能力。

HTML：

<div id="localmapwrapper"> 
    <img id="marker" src="img/point-marker.png" onmouseover="showPoint(1)"/> 
    <img src="img/north-campus.jpg" width="100%" /> 
</div>

CSS：

#marker { 
    width:10%; 
    position: absolute; 
    right:80%; 
    top:50%; 
}

任何幫助或建議，將不勝感激。

來源

2016-09-17 dude17430

我不知道。反應速度可能很艱難。您應該查看平移/拖動解決方案，以便限制地圖的可視區域。同樣的方式映射工作。 – AA2992

嘿，歡迎來到Stack Overflow。 **您的問題無法通過您粘貼的代碼重現**。請務必使用** HTML和** CSS代碼創建一個** minimal **示例，以便我們查看您的問題。 –

您的DIV .localmapwrapper需要有position: relative;，以便#marker的絕對位置與其可能有關。

來源

2016-09-17 23:13:23 Johannes

定位<img>與另一個<img>相關，同時保持可重複性

回答

相關問題