Click here to Skip to main content
15,936,565 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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.
Posted
Comments
Not clear. What is the exact problem? Can you explain again?
[no name] 9-Jun-14 1:39am    
Actually I have to load map for Victory area and lose area.The victory area should be blue color and lose area should be yellow color, but for me blue color is overwritten by yellow

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900