我已经为一个正在工作的网站创建了一个图像地图,我知道这家学校有点老,但是我被明确要求实现某种需要这种事情的东西。
本质上,当您将鼠标悬停在已指定的某些坐标上时,我希望图像显示为悬停项目。我阅读过的大多数文档/问题都与轮廓悬停有关,即,映射的区域将突出显示。我正在使用一个Jquery插件,该插件可以在调整图像大小的同时保留正确的坐标,因此,我没有使用其他任何在悬停时都允许轮廓突出显示的插件。
我知道您可以使用a:hover等在基本html / css中更改某些项目的属性,但是由于imagemap的性质,我不认为这是类似情况。鼠标悬停在图像地图上的指定区域上/单击时,是否可以仅显示图像?
我还研究了使用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>
图像地图调整大小:
https://github.com/davidjbradshaw/image-map-resizer
如果需要更多代码来了解我当前已实现的内容,我将提供它。
我想这就是你所需要的
$("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
相关图像网址的属性。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句