Thursday, March 25, 2010

Map Hightlight with Jquery

<html>
<head>

<script type="text/javascript" src="http://davidlynch.org/js/maphilight/docs/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="http://davidlynch.org/js/maphilight/jquery.maphilight.min.js"></script>

<script>$(function() {
        $('.map').maphilight();
    });</script>
</head>
<body>
<img src="images/map_AUS_img.gif"  class="map"   Width="317" Height="247" UseMap="#map_AUS" />

<MAP NAME="map_AUS">
<AREA SHAPE="POLY" COORDS="104,147,105,31,101,30,97,26,92,27,88,28,86,30,84,31,82,33,81,35,80,37,80,40,79,41,77,41,74,39,73,42,74,43,74,45,73,45,72,45,69,44,67,45,65,48,65,52,65,54,58,61,53,64,48,64,43,66,40,68,36,69,33,68,29,69,17,78,16,79,15,78,12,78,11,83,12,85,12,89,10,92,11,97,14,102,14,103,13,104,11,102,8,104,10,109,15,115,15,121,17,121,18,125,18,127,19,129,21,137,23,143,25,147,24,154,24,158,21,162,27,166,30,169,32,170,34,169,40,170,45,166,48,166,52,162,54,162,60,161,68,161,73,161,77,158,78,155,83,153,86,151,89,149,94,149,101,148,104,147,104,147" href="#">
<AREA SHAPE="POLY" COORDS="162,105,104,105,105,31,108,31,112,32,111,30,110,28,112,23,114,19,117,16,121,14,126,14,129,12,125,9,119,12,116,12,115,8,118,7,127,8,134,9,140,12,145,14,149,14,153,12,155,14,156,19,152,22,151,23,154,24,155,27,154,27,151,26,149,28,149,30,150,33,153,35,153,36,154,38,156,38,157,36,163,41" href="#">
<AREA SHAPE="POLY" COORDS="236,123,184,123,183,105,162,105,163,41,167,44,171,42,172,47,175,49,180,49,181,45,184,42,185,35,186,28,185,19,186,14,188,11,188,7,191,5,193,9,194,12,197,16,198,24,200,27,204,28,208,30,208,35,210,39,212,45,213,51,215,56,228,64,233,72,234,77,235,79,238,78,240,79,243,80,242,86,251,95,254,98,257,96,259,98,257,101,257,105,256,112,258,113,258,117,258,119,254,119,252,123,249,124,247,125,247,123,243,122,241,121,238,121" href="#">
<AREA SHAPE="POLY" COORDS="183,194,183,105,104,105,104,146,105,146,108,144,112,143,122,144,125,146,133,148,137,148,138,151,140,152,139,154,141,156,144,160,146,163,146,167,147,169,149,169,151,166,155,163,157,159,158,157,162,154,162,159,161,161,160,163,159,167,156,170,154,170,156,172,160,171,152,175,155,177,161,178,164,176,166,175,168,173,171,175,174,179,174,183,173,185,175,188,178,192,181,195" href="#">
<AREA SHAPE="POLY" COORDS="236,188,238,181,239,176,241,172,242,167,244,161,247,156,253,151,253,147,255,143,256,135,257,130,258,127,259,125,259,118,254,119,252,123,249,124,247,125,247,123,245,123,242,123,240,121,238,121,236,123,183,123,183,166,187,166,190,167,191,170,195,170,200,175,205,179,209,177,212,177,213,179,218,179,220,177,224,177,224,179,226,181,228,185,233,187" href="#">
<AREA SHAPE="POLY" COORDS="183,194,190,196,196,198,199,198,204,193,206,192,206,195,206,196,215,201,219,197,226,192,233,191,237,189,229,185,226,181,223,178,220,177,218,178,214,179,211,177,208,178,204,178,201,175,196,171,192,170,190,169,188,167,183,165" href="#">
<AREA SHAPE="POLY" COORDS="206,212,212,216,218,217,224,214,227,216,228,220,228,226,226,226,226,230,224,231,220,234,218,238,212,236,207,228,208,226,205,221,205,217,205,213" href="#">
</MAP>
</body>

No comments:

Post a Comment