如果我將圖像分配給一個確定的寬度和高度，我有一個可以正常工作的熱點圖像。如果我使用width = 100％來使圖像可縮放，那麼當我的熱點「左」/「寬」定位保持準確時，「頂部」/「高度」位置在整個位置移動。我知道我需要通過基於當前屏幕寬度的度量來設置我的頂部/高度位置，我只是沒有如何編碼的知識/語言。在可縮放的圖像上放置熱點

這是在圖像處於原始尺寸（寬度1580，高度1050）時起作用的編碼，所以如果我可以將我的頂部編碼爲頂部= 93％*（1050/1580）* new_screen_width但是！

我該怎麼做？

這裏是我的代碼：

<!doctype html> 
<html> 
<head> 
<meta charset="UTF-8"> 
<title>Sample Photo</title> 
<style media="screen" type="text/css"> 

.hotspotted { 
    position: relative; 
} 

.hotspot { 
    display: block; 
    position: absolute; 
} 

#hotspot1 { 
    height: 8%; 
    left: 87%; 
    top: 85%; 
    width: 13%; 
} 

#hotspot2 { 
    height: 7%; 
    left: 92%; 
    top: 93%; 
    width: 4%; 
} 

#hotspot3 { 
    height: 7%; 
    left: 96%; 
    top: 93%; 
    width: 4%; 
} 



</style> 
</head> 

<body> 

<div class="hot spotted"> 
<img src="images/homepage D.jpg" width="100%" /> 
<a href="DMD A.html" id="hotspot1" class="hotspot"></a> 
<a href="DMD C.html" id="hotspot2" class="hotspot"></a> 
<a href="index.html" id="hotspot3" class="hotspot"></a> 
</div> 

</body> 
</html>

來源

2014-04-07 user3506460

看起來像有在CSS中的錯誤 - 不.hotspotted，但.hot.spotted。 –

這個答案應該是你在找什麼：https://stackoverflow.com/a/11411956/1825150

你可以放置在一個相對定位元素的圖像和熱點，然後定位熱點絕對使用百分比...

檢查出答案，My Head Hurts給出了一個詳細的例子以及。希望這可以幫助。

編輯：按照從Vality和鬼的意見，這裏有什麼聯繫的答案提供報價（在此編輯的時間）：

重要提示：鏈接的答案的內容來自提到的海報以上。

CSS

.hotspotted { 
    position: relative; 
} 

.hotspot { 
    display: block; 
    position: absolute; 
} 

#hotspot1 { 
    height: 81%; 
    left: 9%; 
    top: 16%; 
    width: 45%; 
} 

#hotspot2{ 
    height: 18%; 
    right: 11%; 
    top: 20%; 
    width: 11%; 
}

HTML

<div class="hotspotted"> 
     <img height="100%" width="100%" src="img.png"/> 
     <a href="#" id="hotspot1" class="hotspot"></a> 
     <a href="#" id="hotspot2" class="hotspot"></a> 
</div>

OP的UPDATE

如果你要使用的地圖那麼我建議你計算出新的座標，而不是用百分比。這可以用以下公式來很容易實現：

new_x = (orginal_x/original_image_width) * new_image_width 
new_y = (orignal_y/original_image_height) * new_image_height

來源

2014-08-27 23:25:25 Savaii

請嘗試將鏈接中的一些答案複製到答案中，否則如果鏈接失效，則沒有人會知道您的解決方案。儘管如此，歡迎來到SO並在其他方面做得很好。 – Vality

在可縮放的圖像上放置熱點

回答

CSS

HTML

OP的UPDATE

相關問題