そのため、作成したページで imagemapster を使用して、マウス ホバー時にイメージ マップの領域を変更しています。クリックするとポップアップが表示され、ハイスライドを使用してこれを実行する予定ですが、これを実装する方法に苦労しています。私の現在のコードは次のようになります。
<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 挿入ポイントだったので試してみました。明らかにうまくいきませんでした。これを支援するのに十分なハイラインとイメージマップスターに精通している人はいますか、または少なくとも可能な解決策についての手がかりを持っていますか? ありがとう。