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 th

Answer 1

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

Answer 2

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.