0

因此，我在创建的页面上使用 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 来帮助解决这个问题，或者至少对可能的解决方案有一些线索？谢谢。

4

0 回答 0