0

我有一张英国地图，分为不同的地理区域。我想这样做，以便当用户将鼠标悬停在该部分上时会出现一些文本。

我的问题是，让图像执行此操作的最佳方法是什么。

我尝试过的一种方法是在具有完全透明背景的固定大小的画布内的正确位置为每个区域创建一个 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 事件而言，我可以接受这些。这只是我正在努力解决的图像处理问题。

亲切的问候

4

2 回答 2

0

你是什​​么意思

然而，这也不起作用，因为形状太复杂了......

如果您的意思是它们太复杂而无法编码，您可以使用这样的工具：

http://www.image-maps.com/

这将允许您创建多边形区域并获取生成的 html，只需单击以创建所需的形状。

然后，您可以让侦听器关联到这些事件（单击、结束等）来处理文本显示

于 2012-06-18T15:47:01.487 回答
0

我想你可以在这里使用 html < area > coords 属性。您可以参考链接http://www.w3schools.com/TAGS/att_area_coords.asp了解更多详情。

于 2012-06-18T15:54:11.170 回答