我有一张英国地图，分为不同的地理区域。我想这样做，以便当用户将鼠标悬停在该部分上时会出现一些文本。
我的问题是，让图像执行此操作的最佳方法是什么。
我尝试过的一种方法是在具有完全透明背景的固定大小的画布内的正确位置为每个区域创建一个 png 文件。这可以将所有区域显示为一张完整的地图。但不允许我在每个图像部分上添加句柄，因为它们相互堆叠，因此只有顶部可用。
我还尝试在顶部放置一个“区域”来尝试定义热点。然而，这也不起作用，因为形状太复杂了......
这是 html/css 标记
<script type="text/javascript">
$(document).ready(function() {
$('#scot').hide();
$('#wales').hide();
$('#scotmap').click(function() {
$('#scot').show();
});
$('#img2').click(function() {
$('#wales').show();
});
});
</script>
<div id="wrapper">
<div id="img1" class="mappiece">
<img src="Images/map/scotland.png" alt="Scotland">
</div>
<div id="img2" class="mappiece">
<img src="Images/map/nw.png" alt="Scotland">
</div>
<div id="img3" class="mappiece">
<img src="Images/map/se.png" alt="Scotland">
</div>
<div id="img4" class="mappiece">
<img src="Images/map/wales.png" alt="Scotland">
</div>
<div id="img5" class="mappiece">
<img src="Images/map/ireland.png" alt="Scotland">
</div>
<div id="img6" class="mappiece">
<img src="Images/map/yarmouth.png" alt="Scotland">
</div>
<div id="img7" class="mappiece">
<img src="Images/map/york.png" alt="Scotland">
</div>
<div id="map" class="mappiece">
<area id="scotmap" shape="poly" coords="76,9,76,50,87,50,87,92,96,92,96,101,105,101,105,132,120,132,120,122,132,124,137,120,151,124,154,128,160,127,163,129,171,125,173,119,164,92,147,76,164,37,144,7" nohref alt="Scotland Map" />
</div>
</div>
<div id="text">
<div id="scot">
<p>Hello Scotland</p>
</div>
<div id="wales">
<p>Hello Wales</p>
</div>
</div>
body{background-color:#fff;}
#wrapper{
width:237px;
height:258px;
position: relative;
}
.mappiece {
position: absolute;
width:237px;
height:258px;
top:0;
left:0;
}
#img1 {
z-index:80;
}
#img2 {
z-index:20;
}
#img3 {
z-index:30;
}
#img4 {
z-index:40;
}
#img5 {
z-index:50;
}
#img6 {
z-index:60;
}
#img7 {
z-index:70;
}
任何正确方向的观点将不胜感激。就鼠标悬停/mouseout/click jquery 事件而言，我可以接受这些。这只是我正在努力解决的图像处理问题。
亲切的问候