[英]Trying to integrate a popup using highslide into an image mapped with imagemapster
因此，我在创建的页面上使用imagemapster来更改鼠标悬停时图像地图的区域。 我希望在单击时弹出一个窗口，并打算使用highslide来执行此操作，但是，我在如何实现此操作方面很挣扎。 我当前的代码如下所示：
<head>
<script language="javascript" src="include/imagemapster/jquery.imagemapster.js"></script>
<!-- Highslide -->
<script type="text/javascript" src="include/highslide/highslide-with-gallery.js"></script>
<script type="text/javascript" src="include/highslide/highslide.config.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="include/highslide/highslide.css" />
<!--[if lt IE 7]>
<link rel="stylesheet" type="text/css" href="highslide/highslide-ie6.css" />
<![endif]-->
<!-- End Highslide -->
</head>
<body>
<img src="img/closed.jpg" id="leoweb" usemap="#leoweb" border="0">
<script>
$(document).ready(function ()
{
$('#leoweb').mapster({
singleSelect : true,
render_highlight : { altImage : 'img/open.jpg' },
mapKey: 'hex',
fill : true, altImage : 'img/open.jpg',
fillOpacity : 1,
});
});
</script>
<map name="leoweb" id="leoweb">
<area hex="1" class="highslide" href="onclick="return hs.expand(this)"
title="" style="float:right; margin: 0 0 10px 15px">
<img src="img/hex1.png" alt=""
style="width: 107px;height:120px;" />" shape="poly" coords=" 463,73, 363,74, 305,160, 363,258, 462,255, 513,168, 465,76" />
<area hex="2" href="#" shape="poly" coords=" 579,196, 521,292, 578,384, 675,388, 733,294, 683,200, 585,198" />
<area hex="3" href="#" shape="poly" coords=" 243,202, 138,202, 86,293, 133,379, 245,382, 295,293, 251,206, 245,206" />
<area hex="4" href="#" shape="poly" coords=" 353,330, 304,419, 361,513, 461,508, 513,413, 461,324, 354,328" />
<area hex="5" href="#" shape="poly" coords=" 229,450, 142,451, 83,542, 133,638, 239,636, 296,538, 245,452, 239,450, 235,450, 233,450" />
<area hex="6" href="#" shape="poly" coords=" 453,575, 355,574, 303,664, 351,764, 460,765, 515,672, 459,577, 457,576" />
<area hex="7" href="#" shape="poly" coords=" 573,453, 521,550, 574,638, 681,638, 737,550, 685,450, 577,452" />
</map>
</div>
现在有关尝试添加高线代码的内容
class="highslide" href="onclick="return hs.expand(this)"
title="" style="float:right; margin: 0 0 10px 15px">
<img src="img/hex1.png" alt=""
style="width: 107px;height:120px;" />"
进入图像映射很长一段距离，但是我尝试了一下，因为它是我能想到的最合逻辑的href插入点。 它显然没有用。 你们中的任何人是否对highline和imagemapster足够熟悉，可以帮助您解决这一问题，或者至少对可能的解决方案有一些了解？ 谢谢。
将Image map与ImageMapster jQuery插件一起使用时，坐标会更改
[英]When using Image map with ImageMapster jQuery plugin the coords are changed
高图表+高幻灯片：打开新的高幻灯片弹出窗口或单击其他任意位置时，关闭任何以前打开的弹出窗口
[英]Highcharts + Highslide: When opening a new highslide popup or clicking anywhere else, close any previously opened popups
Highslide：如何使图库直接在页面中工作，而不是在弹出窗口或模式窗口中工作？
[英]Highslide: how to make the gallery work directly in the page, not in a popup or modal window?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.