在圖像上映射一個點

Question

我有這個gif圖像，但我想在該圖像上放置一個點261,274。點是7px乘7px。我怎樣才能做到這一點？我曾經嘗試這樣做：

<table style="background: url('mainimage.gif'); width:513px; height:550px;"> 
    <tr> 
     <td style="position:relative; top:274px; left:-261px; background: url('dot.gif'); width:7px; height:7px;"></td> 
    </tr> 
</table> 

這：

<div style="background: url('mainimage.gif'); width:513px; height:550px;"> 
    <div style="position:relative; top:274px; left:-261px; background: url('dot.gif'); width:7px; height:7px;"></div> 
</div> 

但這些似乎並沒有正常工作。

我也看了一下area元素，但是我不能真正弄清楚如何使用這些元素。

編輯：的jsfiddle的：

http://jsfiddle.net/3Ahfd/
http://jsfiddle.net/3Ahfd/1/

Answer 1

使用相對positionioning。你去那裏：

<div style="background: url('mainimage.gif'); width:550px; height:513px; position: relative;"> 
    <img src="dot.gif" style="position: relative; top:264px; left:258px; width:7px; height:7px;"> 
</div> 

小提琴：http://jsfiddle.net/alp82/3Ahfd/6/

Answer 2

不是使點一div的背景圖像的，我只是用它作爲一個image標籤和使用的利潤率將其定位相應的建議。

喜歡的東西：

<div style="background: url('mainimage.gif'); width:513px; height:550px;"> 
    <img src="dot.gif" style="margin-top:274px; margin-left:-261px;" /> 
</div> 

Answer 3

<div style="background: url('mainimage.gif'); width:513px; height:550px; position:relative;"> 
    <div style="position:absolute; top:274px; left:261px; background: url('dot.gif'); width:7px; height:7px;"></div> 
</div> 

JSFiddle.

Answer 4

試試這個：

<div style="background: url('mainimage.gif'); width:513px; height:550px;position:relative;"> 
    <div style="position:absolute; top:271px; left:259px; background: url('dot.gif'); width:7px; height:7px;"></div> 
</div> 

注：調整頂部，因而內的div留下 - 我減去的3px從你的座標中心的點。