Maphilight jQuery with popup

Question

I'm trying to get the maphilight jQuery plugin to allow me to perform an action when a mouse hovers over, but I cannot seem to get it to work and still allow the highlighting.

This is my code so far:

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>

Ok, the hover is working, but it takes control away from the Hilight plugin and the area is no longer highlighted.

How can I get this to work, I want to actually run a whole function and make a popup window appear but keep the object highlighted.

Any thoughts?

Answer 1

Ok, I figured out how to do it with jQuery Cluetips instead. I tried a couple Modal boxes like Shadowbox and Lightbox but they just removed focus from the map part and wouldn't let it highlight either.

So the quickest and easiest way was to use Cluetip and use persistant boxes that required closing using the close button.

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>

This setup works perfectly and allows me to have the little popups that I wanted and the user has to close each one. Or if they go over to another one while it's up the new one will replace the previous one up without needing to close. So all in all this is a good solution. Plus cluetip supports Ajax calls if I ever need to pull in outside pages.