Create links in single image

I want to create some links in single image.I know we can do it with area map.i have used this link for help

Please have a look at link.

But now my requirement is to show the selected state as active.Along with this we also want to select multiple state at a time which should we active.

select state with control key combination is below

click = function(e) {
                e.preventDefault();

                // Get clicked area element.
                var i = e.srcElement || e.target;

                /**
                * Turn on/off alwaysOn option (boolean, false by default).
                * Indicates whether to always show the hilighted areas.
                */
                i.alwaysOn = !i.alwaysOn;


                if (window.event) {
                    key = window.event.keyCode;     //IE
                    if (window.event.ctrlKey)
                        isCtrl = true;
                    else
                        isCtrl = false;
                }
                else {
                    key = e.which;     //firefox
                    if (e.ctrlKey)
                        isCtrl = true;
                    else
                        isCtrl = false;
                }


                // Apply changes.
                if (isCtrl == true) {
                    i.alwaysOn = true;
                    $(i).data('maphilight', i).trigger('alwaysOn.maphilight');
                }
                else {
                    i.alwaysOn = false;
                    $(img).hasClass('maphilighted').each(function() {

                        $(this).data('maphilight', i).trigger('alwaysOn.maphilight');
                      /* here i want remove all selected (highlighted) stat开发者_StackOverflow中文版e */
                    });
                }

            };

The following code allows you to select multiple states on the map.

$('map').click(function(e) {
    e.preventDefault();

    // Get clicked area element.
    // Works in IE, FF, Chrome.
    var i = e.srcElement || e.target;

    /**
      * Turn on/off alwaysOn option (boolean, false by default).
      * Indicates whether to always show the hilighted areas.
      */
    i.alwaysOn = !i.alwaysOn;

    // Apply changes.
    $(i).data('maphilight', i).trigger('alwaysOn.maphilight');
    // Explicitly adding a class to the element.
    $(i).addClass('maphilighted');
});

Read about how to toggle highlighting.

Update on un-highlighting.

You can't call function each after hasClass, because the latter returns boolean expression, not a list of objects.

Here's working code for un-highlighting:

if (!isCtrl) {
    i.alwaysOn = false;
    $('area').each(function() {
        if ($(this).hasClass('maphilighted')) {
            $(this).data('maphilight', i).trigger('alwaysOn.maphilight');
        }
    }
}

Update 2.

if (isCtrl) {
    i.alwaysOn = true;
    $(i).data('maphilight', i).trigger('alwaysOn.maphilight');
    $(i).addClass('maphilighted');
} else {
    el = $(i.parentNode).children().each(function() {
        this.alwaysOn = false;
        if ($(this).hasClass('maphilighted')) {
            $(this).data('maphilight', this).trigger('alwaysOn.maphilight');
            $(this).removeClass('maphilighted');
        }
    });

    i.alwaysOn = true;
    $(i).data('maphilight', i).trigger('alwaysOn.maphilight');
    $(i).addClass('maphilighted');
}

Here is an example of a image map with active state, this should help you with what you want to do

http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/