使用CSS定位文本框创建图像映射

Question

我已经看过许多关于采用这个项目的不同途径的文章，但我对如何正确实现这个想法感到难过。

我的工作是为我们的项目寻找互动地图。我的想法是在地图上有一张世界地图和世界领导人的文本框，相对于这些领导人来自哪里。

我已经在JSFiddle：http://jsfiddle.net/ElaineKoontz/48QXT/

中启动了这个过程

<div class="image">
<img src="http://www.nhd.org/images/uploads/BlankMapWorld6.png" width="3308px" height="1541px" alt="NHD 100 Leaders Map" />

 <h6><div style="border:1px solid black;">Thomas Jefferson</div></h6>

 <h6><div style="border:1px solid black;">Adolf Hitler</div></h6>

 <h6><div style="border:1px solid black;">Winston Churchill</div></h6>

 <h6><div style="border:1px solid black;">Simon Bolivar</div></h6>

 <h6><div style="border:1px solid black;">Nelson Mandela</div></h6>

h6 {
position: absolute;
top: 400px;
left: 300px;
width: 16%;

}

有没有人可以帮我写这段代码，以便地图是背景图片地图，文本框覆盖整个地图？如果有人能让我在正确的轨道上定位每个单独的文本框值，我将不胜感激！