html - 在图像上映射点

我有此gif图像，但我想在该图像上的261,274上放置一个点。点是7px x 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/

最佳答案

使用相对定位。你去了：

<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/