Question

我为我正在工作的网站创建了一个图片地图，我知道这个有点旧的学校，但明确要求我实现需要此类事情的东西。

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

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

我还参与了使用Photoswipe（我在单独的页面上的图库中实现），允许用户点击指定区域并显示Photoswipe UI。如果可能的话，这将是更可取的，因为更流畅的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>

图片地图缩放器：

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

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

Answer 1

我想这就是你需要的东西

＆＃13;

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

＆＃13;

#image{
position:absolute;
}

＆＃13;

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

＆＃13;

修改

这是fiddle为每个area使用不同的图片。每个区域都有一个相关图片网址的data-image属性。

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

Answer 2

<script>
    function MO(x){
        document.getElementById("a").innerHTML=x=='ov'?"<img src=\"http://www.w3schools.com/jsref/smiley.gif\"></img>":"";
    }
</script>
<div class="sitebox">
<img name="aerialmap" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Lion_waiting_in_Namibia.jpg/290px-Lion_waiting_in_Namibia.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" border="2" title="Building 2" onmouseover="MO('ov')" onmouseout="MO('ou')">
</map>
</img></div>
<div  id="a"></div>

这有帮助吗？

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

2 个答案: