0

maphilight jQueryプラグインを取得して、マウスをホバーしたときにアクションを実行できるようにしようとしていますが、それを機能させてもハイライトを許可できないようです。

これはこれまでの私のコードです：

var j = jQuery.noConflict();

j(document).ready(function() {
    j('.mapF').maphilight({ stroke: true, fillColor: 'FF0000', fillOpacity: 0.2 });

    j('.areaH').hover(function (e) {
        alert('1');
    }, function() {});
});

<img src="img.jpg" usemap="#map" class="mapF">

<map name="map" class="mapH">
<area shape="poly" coords="161,64,226,7,273,44,211,88,160,65" href="#" mystuff="img1.jpg" class="areaH" />
<area shape="poly" coords="3,269,5,282,11,296,24,315,41,326,49,329,58,329,58,339,0,339,0,272,3,270" href="#" />
<area shape="poly" coords="231,328,368,328,369,345,230,345" href="#" />
<area shape="poly" coords="293,204,297,228,298,251,281,252,280,265,243,264,243,261,231,261,231,226,292,204" href="#" />
<area shape="poly" coords="306,199,370,175,369,231,309,231,305,199" href="#" />
<area shape="poly" coords="362,106,379,158,515,104,498,58,435,88,417,85" href="#" />
<area shape="poly" coords="48,163,73,194,17,237,18,223,29,197,48,164" href="#" />
</map>

ホバーは機能していますが、Hilightプラグインから制御が奪われ、領域が強調表示されなくなります。

これを機能させるにはどうすればよいですか。実際に関数全体を実行してポップアップウィンドウを表示し、オブジェクトは強調表示したままにします。

何かご意見は？

4

1 に答える 1

0

わかりました。代わりにjQueryCluetipsを使用してそれを行う方法を理解しました。ShadowboxやLightboxのようないくつかのモーダルボックスを試しましたが、それらはマップパーツからフォーカスを削除しただけで、どちらも強調表示されませんでした。

したがって、最も速くて簡単な方法は、Cluetipを使用し、閉じるボタンを使用して閉じる必要のある永続ボックスを使用することでした。

var j = jQuery.noConflict();

j(document).ready(function() {
    j('.mapF').maphilight({
        stroke: true,
        fillColor: 'FF0000',
        fillOpacity: 0.2
    });

    j('.areaH').cluetip({
        width: '553px',
        showTitle: true,
        sticky: true,
        closePosition: 'title',
        closeText: '<img src="cross.png" alt="" />',
        tracking: false
    });
});

<img src="image.jpg" usemap="#map" class="mapF">
<map name="map" class="mapH">
<area shape="poly" coords="161,64,226,7,273,44,211,88,160,65" href="#" rel="img1.jpg" class="areaH" />
<area shape="poly" coords="3,269,5,282,11,296,24,315,41,326,49,329,58,329,58,339,0,339,0,272,3,270" href="#" rel="img4.jpg" class="areaH" />
<area shape="poly" coords="231,328,368,328,369,345,230,345" href="#" rel="img3.jpg" class="areaH" />
<area shape="poly" coords="293,204,297,228,298,251,281,252,280,265,243,264,243,261,231,261,231,226,292,204" href="#" rel="img10.jpg" class="areaH" />
<area shape="poly" coords="306,199,370,175,369,231,309,231,305,199" href="#" rel="img5.jpg" class="areaH" />
<area shape="poly" coords="362,106,379,158,515,104,498,58,435,88,417,85" href="#" rel="img8.jpg" class="areaH" />
<area shape="poly" coords="48,163,73,194,17,237,18,223,29,197,48,164" href="#" rel="img2.jpg" class="areaH" />
</map>

この設定は完全に機能し、必要な小さなポップアップを表示でき、ユーザーはそれぞれを閉じる必要があります。または、アップ中に別の1つに移動すると、新しいものが閉じなくても前のアップに置き換わります。したがって、全体として、これは優れたソリューションです。さらに、cluetipは、外部ページをプルする必要がある場合にAjax呼び出しをサポートします。

于 2012-12-07T20:36:45.373 に答える