jquery - 悬停显示图像上的图像映射

Question

我已经为我正在工作的网站创建了一个图像映射，我知道这有点老派，但我被明确要求实现需要这种类型的东西。

基本上，当您将鼠标悬停在已指定的某些坐标上时，我希望图像显示为悬停项。我读过的大多数文档/问题都与轮廓悬停有关，即映射区域将突出显示。我正在使用一个 Jquery 插件，它允许在保持正确坐标的同时调整图像大小，所以我没有使用任何其他通常允许在悬停时突出显示轮廓的插件。

我知道您可以使用 a:hover 等更改基本 html/css 中某些元素的属性，但是由于图像映射的性质，我认为这不是类似的情况。是否可以简单地在图像 map 上的指定区域上鼠标悬停/单击时显示图像？

我还研究了如何使用 Photoswipe(我已在单独页面的图库中实现)来允许用户单击指定区域并显示 Photoswipe 用户界面。如果可能的话，这将是更可取的，因为 UI 更时尚且易于添加字幕。

图像映射代码:

<div class="sitebox">
<img name="aerialmap" src="images/aerial2.jpg" width="70%" usemap="#aerial2" style="border:5px solid #535353;">
    <map name="aerial2">
        <area shape="poly" coords="531,287,538,321,610,301,601,270" href="#" onclick="return false" title="building 1">
        <area shape="poly" coords="196,246,240,255,213,384,166,376" href="#" onclick="return false" title="Building 2">
    </map>

图像 map 缩放器:

https://github.com/davidjbradshaw/image-map-resizer

如果需要更多代码来了解我目前已实现的内容，我会提供。

Answer 1

我想这就是你需要的

$("area").mousemove(function(e) {
    $("#image").show().css({
        left: e.pageX + 10,
        top: e.pageY + 10
    });
});
$("area").mouseout(function(e) {
    $("#image").hide();
});

#image{
position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="sitebox">
    <img name="aerialmap" src="http://www.getmapping.com/sites/default/files/styles/post_image/public/quick_media/getmapping_aerialimagery_vertical_hamptoncourt_1_0.jpg?itok=tNmyWk21" width="70%" usemap="#aerial2" style="border:5px solid #535353;">
    <map name="aerial2">
        <area shape="poly" coords="531,287,538,321,610,301,601,270" href="#" onclick="return false" title="building 1">
        <area shape="poly" coords="196,246,240,255,213,384,166,376" href="#" onclick="return false" title="Building 2">
    </map>
</div>
<img id="image" src="http://images.pictureshunt.com/pics/m/mouse-8557.JPG" />

编辑

这是一个 fiddle，每个 area 使用不同的图像。每个区域都有一个指向相关图像 url 的 data-image 属性。

https://jsfiddle.net/ergec/gse19j0b/