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.

Twyla

Overlay a canvas with the same coordinates... – Notification

@Mr.Alien Not able to get. Can you explain – Twyla

Check this out jsfiddle.net/tZKuv/3, and I am not going through the plugin docs but I think they would be having an option to do this – Notification

actually what i need is, have to highlight without hover(i.e. always highlighted). Is this possible in asp.net image map? – Twyla

Yup I got that and am not sure, am PHP dev :) – Notification

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.

Doloritas

Thanks for you idea. I've came up with your solution.. jsfiddle.net/X4mPW/6 – Twyla

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
              });
 });

Ardolino

your code is working for hover.so simply remove hover function ....and only use ready function and write your code. $(document).ready(function() //on page load { //your working code here }); – Ardolino