JQuery maphighlight for changing area highlight color based on condition

Question

I have created Image Map using map co-ordinates and have to highlighted co-ordinates, which is working fine but what i need is, To change the highlight color depends upon the condition...In first condtion highlight the area with the red color then the same area will be highlighted with the black color for the second condition.I can able to highlight the same area but i cant able to change the color of the area simultaneously.

My Sample Code on Fiddle Here : Fiddle Demo

I have tried using

  <script>
        $(document).ready(function () //on page load
        {
            $('area[title*="UPPER"]').each(function ()//get all areas
            {
                $(this).addClass("victory");
            });

            $('area[title*="LOWER"]').each(function ()//get all areas
            {
                $(this).addClass("lose");
            });

            //initialize highlight
            $('.map').maphilight({ strokeWidth: 0, fillColor: "0000FF", fillOpacity: 0.8, singleSelect: true });

            ////map wrap
            $(".victory").click(function () {                
                //This block is what creates highlighting by trigger the "alwaysOn", 
                var data = $(this).data('maphilight') || {};
                data.alwaysOn = !data.alwaysOn;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
                //there is also "neverOn" in the docs, but not sure how to get it to work
            });

            $('.map').maphilight({ strokeWidth: 0, fillColor: "FFFF00", fillOpacity: 0.8});

            $(".lose").click(function () {                
                //This block is what creates highlighting by trigger the "alwaysOn", 
                var data = $(this).data('maphilight') || {};
                data.alwaysOn = !data.alwaysOn;
                $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
                //there is also "neverOn" in the docs, but not sure how to get it to work
            });
        });
    </script>

Fiddle Demo

but which is overwrite the first fillcolor with second fillcolor.any one help me to resolve this problem.

Answer 1

Your code doesn't work, because area.style has not background-color property. Notice also, that you haven't set titles to areas in your fiddle, there seems to be alts instead.

Notice, that the used plug-in creates an overly canvas element on the image, and the highlight color is a partially tranparent part of that canvas. If you want to have a particular area of the map being yellow, you've to change the image itself, or use for example an overlayed image, which you can hide later.

Anyway, with the plug-in you can do something like this:

$(function () {
    var data = {};
    $('.map').maphilight();
    data.alwaysOn = true;
    data.fillColor = 'ffff00';
    data.fillOpacity = '0.6';
    $('area[alt="UPPER HANOVER TOWNSHIP"]').data('maphilight', data).trigger('alwaysOn.maphilight');
});

A live demo at jsFiddle.

Answer 2

working code is below,check this

     $(document).ready(function() //on page load
{
     $('area').each(function()//get all areas
              {
                  var co=$(this).attr('coords');//get coords by attr from area
                  alert(co); //alert coords in alertbox
              });
 });