悬停显示图片上的图片

我为我正在工作的一个站点创建了一个图片地图，我知道有点老派，但我明确要求实现某些需要这种类型的东西。悬停显示图片上的图片

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

我知道你能够改变某些项目的属性基本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

如果更多的代码需要得到什么，我目前已经实现的图片，我会提供它。

来源

2016-11-08 Randorile

我想这是你所需要的

$("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。每个区域都有一个data-image属性到相关的图像url。

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

来源

2016-11-10 11:10:57 Ergec

看起来像这样的作品，但我需要多个图像，取决于哪个坐标被徘徊。这很容易做到吗？ – Randorile

@Randorile更新了我的答案。检查我的答案底部的小提琴。 – Ergec

完美，感谢您的帮助。我想我会使用悬停/点击的组合来访问完整的图像，并简单地使用悬停来确定名称。 – Randorile

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

这有帮助吗？

来源

2016-11-08 23:09:17

感谢球员，已经离开了几天，让我试，我会回来给你。 – Randorile

悬停显示图片上的图片

回答

相关问题