Image Map Demo

jQuery maphighlight for changing area highlight color based on condition

by Shrikrishna Gupta

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js"></script>
<div>
    <img src="http://i.stack.imgur.com/GbQFC.png" alt="" usemap="#map" class="map" />
    <map name="map">
        <area shape="poly" alt="abilton" href="#" coords="670, 447, 597, 392, 580, 414, 580, 415, 566, 437, 564, 436, 559, 442, 560, 444, 580, 460, 582, 459, 588, 463, 591, 462, 595, 459, 598, 456, 601, 456, 604, 458, 609, 458, 610, 459, 609, 463, 607, 466, 604, 470, 600, 472, 633, 498, 642, 488, 639, 482, 635, 483, 634, 476, 642, 476, 649, 476" />
        <area shape="poly" alt="AMBLER BOROUGH" href="#" coords="496, 383, 500, 376, 502, 377, 506, 371, 511, 384, 516, 390, 510, 397, 510, 398, 507, 400, 503, 398, 501, 392" />
        <area shape="poly" alt="BRIDGEPORT BOROUGH" href="#" coords="401, 455, 402, 458, 393, 463, 391, 463, 390, 465, 383, 465, 380, 465, 377, 467, 372, 461, 376, 458, 375, 453, 381, 453, 381, 450, 395, 455" />
        <area shape="poly" alt="BRYN ATHYN BOROUGH" href="#" coords="642, 381, 648, 385, 653, 379, 656, 381, 656, 390, 661, 392, 657, 395, 662, 400, 668, 406, 671, 401, 674, 401, 676, 402, 679, 399, 682, 402, 681, 405, 680, 407, 677, 408, 676, 411, 680, 411, 681, 411, 682, 413, 683, 417, 679, 418, 677, 422, 673, 421, 671, 416, 667, 416, 664, 418, 661, 421, 658, 421, 660, 413, 660, 411, 656, 412, 656, 406, 654, 405, 653, 403, 654, 400, 652, 397, 648, 399, 646, 399, 645, 396, 648, 392, 645, 388, 642, 390, 640, 387, 637, 388, 634, 385, 638, 383" />
        <area shape="poly" alt="CHELTENHAM TOWNSHIP" href="#" coords="542, 471, 562, 445, 580, 459, 584, 459, 598, 472, 630, 494, 633, 498, 638, 504, 640, 505, 641, 506, 632, 518, 624, 527, 556, 478, 554, 480" />
        <area shape="poly" alt="COLLEGEVILLE BOROUGH" href="#" coords="274, 372, 264, 365, 263, 367, 246, 356, 249, 352, 252, 354, 260, 341, 263, 341, 264, 337, 262, 335, 264, 333, 267, 333, 271,...

JavaScript

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

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

       ////map wrap
       $(".victory").wrap(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
       });

   });