[英]jQuery - div border around map area
Let's say I have this map: 假设我有这张地图:
<map name="diffmap1" id="diffmap1" class="myMap">
<area shape="poly" coords="152,347,253,292,264,307,167,358" class="diff diff1">
<area shape="poly" coords="93,244,164,215,171,233,97,264" class="diff diff2">
</map>
and javascript: 和javascript:
$('.diff').click(function(e){
//code here
});
How can I make when I click on one one 'diff' to make a div with border appear around that 'diff'? 当我单击一个“ diff”以使带有边框的div出现在该“ diff”周围时,如何制作?
It has to calculate the position automatically, like the margin-top, margin-left and size based on the coordonates. 它必须自动计算位置,例如基于坐标的边距上边,左边距和大小。
Any thoughts? 有什么想法吗?
There is no way to put a border around an area of an image map using straight HTML/CSS. 无法使用直接HTML / CSS在图像地图的区域周围放置边框。
You can however do this with SVG. 但是,您可以使用SVG执行此操作。 I would recommend this plugin: http://www.outsharked.com/imagemapster/ particularly its stroke settings.
我会推荐这个插件: http : //www.outsharked.com/imagemapster/特别是其笔触设置。
Here's a simple demo which hopefully does what you want: 这是一个简单的演示,希望可以完成您想要的操作:
<img src="path/to/img" width="400" height="333" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="poly" coords="104,121,53,151,53,210,103,239,154,210,154,152" href="#" />
<area shape="poly" coords="156,212,105,242,105,301,155,330,206,301,206,243" href="#" />
<area shape="poly" coords="260,212,209,242,209,301,259,330,310,301,310,243" href="#" />
<area shape="poly" coords="313,122,262,152,262,211,312,240,363,211,363,153" href="#" />
<area shape="poly" coords="260,32,209,62,209,121,259,150,310,121,310,63" href="#" />
</map>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.outsharked.com/scripts/jquery.imagemapster.js"></script>
<script>
$('img').mapster({
fillOpacity: 0,
stroke: true,
strokeColor: "3320FF",
strokeWidth: 4,
singleSelect: true,
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.