Maphilight jQuery с всплывающим окном

Я пытаюсь заставить плагин jQuery maphilight позволить мне выполнять действие при наведении указателя мыши, но я не могу заставить его работать и по-прежнему разрешать подсветку.

Это мой код до сих пор:

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, и область больше не выделяется.

Как я могу заставить это работать, я хочу запустить целую функцию и создать всплывающее окно, но сохранить объект выделенным.

Есть предположения?


javascript jquery imagemap jquery-plugins maphilight
person jfreak53    schedule 06.12.2012    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, я понял, как это сделать с помощью jQuery Cluetips. Я попробовал пару модальных окон, таких как 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>

Эта настройка работает отлично и позволяет мне иметь маленькие всплывающие окна, которые я хотел, и пользователь должен закрывать каждое из них. Или, если они перейдут к другому, пока он работает, новый заменит предыдущий без необходимости закрытия. Так что в целом это хорошее решение. Кроме того, подсказка поддерживает вызовы Ajax, если мне когда-нибудь понадобится открыть внешние страницы.

person jfreak53    schedule 07.12.2012