Jul 20

HTML Label Tag Causes Mysterious Behavior of ASP.NET Button

Recently, because of my ignorance of the HTML label tag, I encountered a very weird problem. I have a page like this:

ButtonInLabel

And the problem is no matter which button I click, the “Save Student Record” button is always fired. Even I set a break point on the button clicked event handler of the button “New Search”, the break point never gets triggered. If I switch the Save Student Record button and the New Search button, then the New Search button will always get fired.

After I looked at the HTML markup and some Internet search, I finally figured out the problem. First, let’s take a look at the HTML code of the page:

   1: <label class="read-only">

   2:     <asp:Button ID="btnSave" runat="server" Text="Save Student Record" Width="150px"

   3:         OnClick="btnSave_Click" />

   4:     <asp:Button ID="btnCancel" runat="server" Text="New Search" OnClick="btnCancel_Click"

   5:         CausesValidation="False" />  

   6: </label>

Instead of putting the two buttons in a <div> tag, I put them in a <label> tag, and it was the culprit of the weird behavior. When my page is rendered in browser, the <label> tag is automatically bound to the first button in the label, and when I click on any button (actually any place in the label text area), the first button is toggled. It is the expected behavior of an HTML <label> tag (see the definition and usage of a <label> tag). The interesting thing is that FireFox automatically puts the two buttons in two <label> tags when rendering the page, so the problem does not happen in FireFox. But both IE 9 and Google Chrome put the two buttons in one <label> tag, and thus shows the weird behavior.

The above problem can be easily fixed by either putting the two buttons in two separate <label> tags, or changing the <label> tag to the <div> tag.

I hope my mistake can help someone.

Apr 05

US map with hotspot for each state

I was working on a project last week and I needed a US map with hotspot for each state, when user clicks on a state in the map, the web displays information related to the selected state. I searched the Internet but could not find anything, so I decided to create my own US map with hotspot for each state.

Things needed:

  1. A US map picture with state names
  2. Macromedia Dreamweaver MX (I only have the old version, but it is enough)
  3. Patience, a lot.

Steps:

It is very easy, but very tedious to create hotspots on a map with Dreamweaver.

  1. Create a new HTML page
  2. Insert the US map picture
  3. In the <img> properties window, give a name for the Map field, say “usMap”
  4. Click “Polygon Hotspot Tool”, then mark spots through the border of a state until you come back to the first spot
  5. Dreamweaver will calculate the coordinates for each spot you marked.
  6. Repeat step 4 until you finished all the states of US.

To save your time and eyes, I am providing my work here free of charge. I have done two versions, one is for a 1000 X 618 US map, the other is 800X494, and it took me two full days to finish them. I hope it will help you.

Version 1

Map size: 1000 X 618

Here is the map picture (if you change the size, then you will have to recalculate the coordinates, so you should use the same picture):

us_map

Here is the HTML code for the map above:

<img src="images/us_map.png" width="1000" height="618" border="0" usemap="#usMap"> 

<map name="usMap">

  <area shape="poly" coords="61,29,59,39,61,55,63,62,58,75,70,84,71,94,81,99,89,99,99,102,111,104,127,104,161,110,175,46,93,25,94,38,94,48,88,43,82,41,74,38,61,29" href="#WA" alt="Washington">

  <area shape="poly" coords="66,82,57,81,42,121,29,146,24,164,92,188,140,196,153,152,148,147,160,132,166,120,162,110,141,106,131,105,112,105,90,100,75,98,66,83" href="#OR" alt="Oregon">

  <area shape="poly" coords="27,168,24,186,14,200,19,219,16,233,22,251,22,260,28,266,26,278,32,289,28,298,44,334,41,346,60,354,69,367,76,371,75,378,81,378,91,391,92,404,139,413,143,408,139,406,141,397,146,385,154,381,148,362,77,252,91,189,32,169" href="#CA" alt="California">

  <area shape="poly" coords="134,413,200,452,236,458,253,335,207,327,167,320,161,340,154,337,148,362,153,379,147,386,135,413,138" href="#AZ" alt="Arizona">

  <area shape="poly" coords="237,459,250,461,254,453,285,454,350,457,361,346,321,342,255,335,238,459" href="#NM" alt="New Mexico">

  <area shape="poly" coords="360,356,412,359,412,402,424,408,437,414,444,413,449,418,461,423,464,417,477,423,488,419,494,420,501,419,519,425,522,462,530,478,529,491,527,511,511,519,487,537,461,553,456,567,454,577,457,596,444,593,432,588,420,582,415,560,404,545,397,536,394,523,386,515,380,508,371,507,365,504,352,509,345,522,334,516,319,506,317,492,312,483,288,453,350,458,361,356" href="#TX" alt="Texas">

  <area shape="poly" coords="175,46,163,109,166,119,150,147,154,153,140,197,236,218,245,162,240,156,236,158,223,157,217,159,215,150,209,141,206,130,197,128,203,107,197,97,186,85,187,78,184,73,188,50,175,46" href="#ID" alt="Idaho">

  <area shape="poly" coords="189,51,278,66,365,78,357,164,248,151,245,161,240,156,228,157,219,157,212,142,209,130,198,128,203,108,188,87,189,77,185,74,190,51" href="#MT" alt="Montana">

  <area shape="poly" coords="248,152,233,237,350,253,356,165,247,152" href="#WY" alt="Wyoming">

  <area shape="poly" coords="91,188,77,253,148,360,155,339,161,341,188,209,91,189" href="#NV" alt="Nevada">

  <area shape="poly" coords="189,210,167,321,253,336,268,243,234,239,236,218,190,210" href="#UT" alt="Utah">

  <area shape="poly" coords="268,244,255,334,328,342,377,344,382,257,315,251,269,244" href="#CO" alt="Colorado">

  <area shape="poly" coords="366,78,360,143,475,148,474,139,472,136,471,113,467,104,467,82,367,77" href="#ND" alt="North Dakota">

  <area shape="poly" coords="360,144,356,164,354,209,439,213,450,218,459,217,476,224,477,214,475,205,477,163,471,157,473,149,360,144" href="#SD" alt="South Dakota">

  <area shape="poly" coords="354,210,350,254,382,258,382,280,495,282,489,270,478,225,460,219,449,219,440,215,417,214,354,210" href="#NE" alt="Nebraska">

  <area shape="poly" coords="381,280,378,345,444,350,507,349,509,306,502,293,502,286,496,283,382,280" href="#KS" alt="Kansas">

  <area shape="poly" coords="363,345,361,357,413,360,412,402,437,414,445,414,460,420,465,419,476,422,493,420,497,418,512,422,510,365,508,350,432,351,364,345" href="#OK" alt="Oklahoma">

  <area shape="poly" coords="468,81,468,106,471,113,472,124,473,137,476,146,473,155,477,164,476,203,561,201,560,193,552,183,545,177,538,173,535,166,537,159,534,153,542,145,542,131,554,120,560,111,578,100,574,98,562,96,554,99,544,95,528,89,522,91,505,86,500,73,497,80,469,80" href="#MN" alt="Minnesota">

  <area shape="poly" coords="477,204,478,222,490,268,556,266,561,270,568,257,566,249,577,244,579,233,571,221,564,217,561,201,561,203,477,203" href="#IA" alt="Iowa">

  <area shape="poly" coords="489,268,495,282,503,287,503,294,510,307,508,350,510,360,588,358,589,363,587,368,595,367,599,358,604,353,605,345,600,342,601,333,583,320,586,306,575,304,575,300,563,284,562,271,558,267,489,268" href="#MO" alt="Missouri">

  <area shape="poly" coords="511,360,514,423,520,428,522,440,574,436,575,419,591,390,590,383,596,367,588,367,587,360,513,360" href="#AR" alt="Arkansas">

  <area shape="poly" coords="522,440,522,461,532,481,527,510,537,511,557,515,562,510,569,514,579,517,578,522,588,525,596,519,604,518,617,524,618,518,608,514,612,508,610,504,604,504,608,498,601,490,602,482,569,483,567,474,577,453,573,437,522,440" href="#LA" alt="Louisiana">

  <area shape="poly" coords="543,132,541,146,535,152,538,161,536,168,551,182,560,194,565,218,571,222,618,218,617,211,614,206,617,196,616,185,619,175,626,159,614,173,613,161,612,149,608,144,576,136,569,131,562,132,562,124,543,131" href="#WI" alt="Wisconsin">

  <area shape="poly" coords="574,223,578,234,577,245,568,250,569,257,563,269,563,283,576,301,586,307,584,320,602,334,603,343,608,341,618,343,617,334,621,331,623,322,629,304,628,294,625,240,617,220,573,223" href="#IL" alt="Illinois">

  <area shape="poly" coords="73,471,82,498,73,499,73,491,60,494,60,503,64,510,74,514,81,514,77,523,69,526,60,523,51,533,51,543,54,554,61,552,59,564,81,570,75,582,59,590,36,595,49,596,66,592,86,584,100,574,97,572,105,564,113,556,107,566,119,567,127,566,125,560,132,559,144,567,160,572,179,584,190,600,199,612,205,612,206,606,212,611,214,604,204,599,190,580,185,574,176,577,166,570,157,563,156,480,152,477,143,476,134,472,127,470,122,466,116,462,110,459,99,462,90,464,74,471" href="#AK" alt="Alaska">

  <area shape="poly" coords="623,238,629,287,628,299,628,306,623,324,635,322,644,319,648,322,652,318,657,317,667,305,665,300,675,297,674,292,669,231,638,234" href="#IN" alt="Indiana">

  <area shape="poly" coords="624,324,621,332,616,337,616,343,610,342,605,344,602,356,624,356,626,353,697,345,704,341,728,321,719,311,717,303,712,301,710,297,703,298,693,298,687,295,680,291,676,294,668,300,659,316,649,320,625,324" href="#KY" alt="Kentucky">

  <area shape="poly" coords="645,211,637,194,640,163,649,163,652,153,657,150,654,148,660,143,678,148,685,161,685,169,679,183,682,188,695,175,703,198,700,209,695,214,695,222,691,229,670,231,635,236,642,225" href="#MI" alt="Michigan">

  <area shape="poly" coords="600,356,622,357,628,353,693,346,736,341,731,351,722,354,718,360,704,369,696,375,696,381,651,386,592,389,591,384,600,357" href="#TN" alt="Tennessee">

  <area shape="poly" coords="592,390,575,420,575,432,574,440,577,452,568,476,571,484,602,483,601,490,607,496,620,491,631,490,626,443,626,388,592,391" href="#MS" alt="Mississippi">

  <area shape="poly" coords="626,389,674,385,690,441,691,449,693,463,694,473,646,478,649,485,650,491,644,494,638,486,634,493,632,491,626,440" href="#AL" alt="Alabama">

  <area shape="poly" coords="671,232,675,295,680,291,695,297,709,297,717,302,723,289,728,288,729,278,741,272,744,245,738,217,719,231,705,233,693,230,671,233" href="#OH" alt="Ohio">

  <area shape="poly" coords="738,218,748,265,824,252,826,249,831,249,842,237,832,229,831,220,835,211,824,200,738,218" href="#PA" alt="Pennsylvania">

  <area shape="poly" coords="758,184,761,192,749,209,750,215,823,200,835,212,850,217,851,224,867,220,879,209,867,213,856,214,853,197,852,172,851,161,846,158,845,146,838,127,814,133,799,154,800,164,797,171,789,178,773,178,759,183" href="#NY" alt="New York">

  <area shape="poly" coords="329,610,327,599,322,594,325,586,307,572,278,560,255,550,241,543,248,539,254,538,279,549,300,561,315,565,322,571,326,582,336,587,345,597" href="#HI" alt="Hawaii">

  <area shape="poly" coords="674,385,691,442,696,476,746,474,750,477,751,470,761,469,763,457,763,450,766,439,757,430,755,425,750,418,743,410,734,402,727,394,714,387,719,380,697,381,675,385" href="#GA" alt="Georgia">

  <area shape="poly" coords="647,478,650,490,668,488,680,492,691,499,700,498,710,490,721,495,734,505,744,513,747,532,756,536,752,545,764,564,775,576,783,579,790,590,801,586,800,579,804,571,801,550,786,523,788,516,780,508,770,493,762,470,754,470,752,478,746,475,697,477,696,473,647,478" href="#FL" alt="Florida">

  <area shape="poly" coords="719,379,737,371,754,369,760,376,778,373,803,390,797,396,795,406,766,439,754,423,745,412,734,403,729,395,714,389,719,380" href="#SC" alt="South Carolina">

  <area shape="poly" coords="696,382,696,375,717,362,722,355,730,352,736,342,779,334,837,321,847,335,839,348,832,349,836,355,833,360,840,362,829,368,820,373,814,385,803,391,776,374,761,378,754,370,738,373,722,377,713,380,696,382" href="#NC" alt="North Carolina">

  <area shape="poly" coords="703,345,740,341,838,324,837,315,829,316,828,310,827,293,815,290,809,288,811,278,796,268,795,274,787,268,775,281,774,291,767,289,761,307,759,314,745,324,736,326,731,324,727,322,702,345" href="#VA" alt="Virginia">

  <area shape="poly" coords="744,254,742,272,731,279,729,290,722,292,719,304,721,315,727,320,733,325,738,326,745,324,750,322,756,319,759,315,761,307,763,298,766,295,767,291,773,292,773,285,778,278,781,274,782,270,785,269,792,274,796,271,794,267,789,265,785,265,778,264,774,270,768,273,766,264,749,266,744,256" href="#WV" alt="West Virginia">

  <area shape="poly" coords="839,128,864,120,869,130,864,136,862,150,863,172,853,174,852,163,847,159,845,144,839,128" href="#VT" alt="Vermont">

  <area shape="poly" coords="863,172,884,169,889,161,884,154,871,112,867,118,868,132,863,140,863,172" href="#NH" alt="New Hampshire">

  <area shape="poly" coords="871,113,880,136,890,159,882,152,894,144,898,137,907,131,908,121,914,122,920,116,922,119,935,104,932,99,927,99,926,91,920,91,910,60,902,54,895,62,886,58,880,78,879,89,881,96,871,113" href="#ME" alt="Maine">

  <area shape="poly" coords="853,192,878,187,881,200,865,205,857,214,854,193" href="#CT" alt="Connecticut">

  <area shape="poly" coords="853,176,853,193,877,187,883,183,892,192,900,187,909,186,909,181,903,183,898,181,896,178,889,176,891,167,888,165,880,172,854,175" href="#MA" alt="Massachusetts">

  <area shape="poly" coords="879,189,883,185,893,194,883,198,879,189" href="#RI" alt="Rhode Island">

  <area shape="poly" coords="835,213,832,227,842,238,833,248,837,260,845,260,854,247,852,232,847,230,851,223,849,217,837,212" href="#NJ" alt="New Jersey">

  <area shape="poly" coords="827,251,833,278,843,278,842,273,838,269,829,251" href="#DE" alt="Delaware">

  <area shape="poly" coords="765,264,827,251,833,278,844,279,838,306,835,304,838,288,825,284,823,277,825,272,824,264,820,263,817,267,819,277,820,286,814,286,811,281,804,274,798,269,792,262,783,264,772,273,765,264" href="#MD" alt="Maryland">

  <area shape="rect" coords="884,334,995,350" href="#DC" alt="Washington, D.C.">

</map>

 

 

I made each hotspot link to an anchor on the same page, if you need to link to a different page, just change the “href” part.

Also, make sure the image source points to the correct path in your file structure.

 

Version 2

Map size: 800 X 494

Here is the map picture:

us_map800

Here is the HTML code for the map above:

<img src="images/us_map800.png" width="800" height="494" border="0" usemap="#usMap"> 

<map name="usMap">

  <area shape="poly" coords="48,23,47,31,48,44,50,49,46,60,56,67,56,75,64,79,71,79,79,81,88,83,101,83,128,88,140,36,74,20,75,30,75,38,70,34,65,32,59,30,48,23" href="#WA" alt="Washington">

  <area shape="poly" coords="52,65,45,64,33,96,23,116,19,131,73,150,112,156,122,121,118,117,128,105,132,96,129,88,112,84,104,84,89,84,72,80,60,78,52,66" href="#OR" alt="Oregon">

  <area shape="poly" coords="21,134,19,148,11,160,15,175,12,186,17,200,17,208,22,212,20,222,25,231,22,238,35,267,32,276,48,283,55,293,60,296,60,302,64,302,72,312,73,323,111,330,114,326,111,324,112,317,116,308,123,304,118,289,61,201,72,151,25,135" href="#CA" alt="California">

  <area shape="poly" coords="107,330,160,361,188,366,202,268,165,261,133,256,128,272,123,269,118,289,122,303,117,308,108,330,110" href="#AZ" alt="Arizona">

  <area shape="poly" coords="189,367,200,368,203,362,228,363,280,365,288,276,256,273,204,268,190,367" href="#NM" alt="New Mexico">

  <area shape="poly" coords="288,284,329,287,329,321,339,326,349,331,355,330,359,334,368,338,371,333,381,338,390,335,395,336,400,335,415,340,417,369,424,382,423,392,421,408,408,415,389,429,368,442,364,453,363,461,365,476,355,474,345,470,336,465,332,448,323,436,317,428,315,418,308,412,304,406,296,405,292,403,281,407,276,417,267,412,255,404,253,393,249,386,230,362,280,366,288,284" href="#TX" alt="Texas">

  <area shape="poly" coords="140,36,130,87,132,95,120,117,123,122,112,157,188,174,196,129,192,124,188,126,178,125,173,127,172,120,167,112,164,104,157,102,162,85,157,77,148,68,149,62,147,58,150,40,140,36" href="#ID" alt="Idaho">

  <area shape="poly" coords="151,40,222,52,292,62,285,131,198,120,196,128,192,124,182,125,175,125,169,113,167,104,158,102,162,86,150,69,151,61,148,59,152,40" href="#MT" alt="Montana">

  <area shape="poly" coords="198,121,186,189,280,202,284,132,197,121" href="#WY" alt="Wyoming">

  <area shape="poly" coords="72,150,61,202,118,288,124,271,128,272,150,167,72,151" href="#NV" alt="Nevada">

  <area shape="poly" coords="151,168,133,256,202,268,214,194,187,191,188,174,152,168" href="#UT" alt="Utah">

  <area shape="poly" coords="214,195,204,267,262,273,301,275,305,205,252,200,215,195" href="#CO" alt="Colorado">

  <area shape="poly" coords="292,62,288,114,380,118,379,111,377,108,376,90,373,83,373,65,293,61" href="#ND" alt="North Dakota">

  <area shape="poly" coords="288,115,284,131,283,167,351,170,360,174,367,173,380,179,381,171,380,164,381,130,376,125,378,119,288,115" href="#SD" alt="South Dakota">

  <area shape="poly" coords="283,168,280,203,305,206,305,224,396,225,391,216,382,180,368,175,359,175,352,172,333,171,283,168" href="#NE" alt="Nebraska">

  <area shape="poly" coords="304,224,302,276,355,280,405,279,407,244,401,234,401,228,396,226,305,224" href="#KS" alt="Kansas">

  <area shape="poly" coords="290,276,288,285,330,288,329,321,349,331,356,331,368,336,372,335,380,337,394,336,397,334,409,337,408,292,406,280,345,280,291,276" href="#OK" alt="Oklahoma">

  <area shape="poly" coords="374,64,374,84,376,90,377,99,378,109,380,116,378,124,381,131,380,162,448,160,448,154,441,146,436,141,430,138,428,132,429,127,427,122,433,116,433,104,443,96,448,88,462,80,459,78,449,76,443,79,435,76,422,71,417,72,404,68,400,58,397,64,375,64" href="#MN" alt="Minnesota">

  <area shape="poly" coords="381,163,382,177,392,214,444,212,448,216,454,205,452,199,461,195,463,186,456,176,451,173,448,160,448,162,381,162" href="#IA" alt="Iowa">

  <area shape="poly" coords="391,214,396,225,402,229,402,235,408,245,406,280,408,288,470,286,471,290,469,294,476,293,479,286,483,282,484,276,480,273,480,266,466,256,468,244,460,243,460,240,450,227,449,216,446,213,391,214" href="#MO" alt="Missouri">

  <area shape="poly" coords="408,288,411,338,416,342,417,352,459,348,460,335,472,312,472,306,476,293,470,293,469,288,410,288" href="#AR" alt="Arkansas">

  <area shape="poly" coords="417,352,417,368,425,384,421,408,429,408,445,412,449,408,455,411,463,413,462,417,470,420,476,415,483,414,493,419,494,414,486,411,489,406,488,403,483,403,486,398,480,392,481,385,455,386,453,379,461,362,458,349,417,352" href="#LA" alt="Louisiana">

  <area shape="poly" coords="434,105,432,116,428,121,430,128,428,134,440,145,448,155,452,174,456,177,494,174,493,168,491,164,493,156,492,148,495,140,500,127,491,138,490,128,489,119,486,115,460,108,455,104,449,105,449,99,434,104" href="#WI" alt="Wisconsin">

  <area shape="poly" coords="459,178,462,187,461,196,454,200,455,205,450,215,450,226,460,240,468,245,467,256,481,267,482,274,486,272,494,274,493,267,496,264,498,257,503,243,502,235,500,192,493,176,458,178" href="#IL" alt="Illinois">

  <area shape="poly" coords="58,376,65,398,58,399,58,392,48,395,48,402,51,408,59,411,64,411,61,418,55,420,48,418,40,426,40,434,43,443,48,441,47,451,64,456,60,465,47,472,28,476,39,476,52,473,68,467,80,459,77,457,84,451,90,444,85,452,95,453,101,452,100,448,105,447,115,453,128,457,143,467,152,480,159,489,164,489,164,484,169,488,171,483,163,479,152,464,148,459,140,461,132,456,125,450,124,384,121,381,114,380,107,377,101,376,97,372,92,369,88,367,79,369,72,371,59,376" href="#AK" alt="Alaska">

  <area shape="poly" coords="498,190,503,229,502,239,502,244,498,259,508,257,515,255,518,257,521,254,525,253,533,244,532,240,540,237,539,233,535,184,510,187" href="#IN" alt="Indiana">

  <area shape="poly" coords="499,259,496,265,492,269,492,274,488,273,484,275,481,284,499,284,500,282,557,276,563,272,582,256,575,248,573,242,569,240,568,237,562,238,554,238,549,236,544,232,540,235,534,240,527,252,519,256,500,259" href="#KY" alt="Kentucky">

  <area shape="poly" coords="516,168,509,155,512,130,519,130,521,122,525,120,523,118,528,114,542,118,548,128,548,135,543,146,545,150,556,140,562,158,560,167,556,171,556,177,552,183,536,184,508,188,513,180" href="#MI" alt="Michigan">

  <area shape="poly" coords="480,284,497,285,502,282,554,276,588,272,584,280,577,283,574,288,563,295,556,300,556,304,520,308,473,311,472,307,480,285" href="#TN" alt="Tennessee">

  <area shape="poly" coords="473,312,460,336,460,345,459,352,461,361,454,380,456,387,481,386,480,392,485,396,496,392,504,392,500,354,500,310,473,312" href="#MS" alt="Mississippi">

  <area shape="poly" coords="500,311,539,308,552,352,552,359,554,370,555,378,516,382,519,388,520,392,515,395,510,388,507,394,505,392,500,352" href="#AL" alt="Alabama">

  <area shape="poly" coords="536,185,540,236,544,232,556,237,567,237,573,241,578,231,582,230,583,222,592,217,595,196,590,173,575,184,564,186,554,184,536,186" href="#OH" alt="Ohio">

  <area shape="poly" coords="590,174,598,212,659,201,660,199,664,199,673,189,665,183,664,176,668,168,659,160,590,174" href="#PA" alt="Pennsylvania">

  <area shape="poly" coords="606,147,608,153,599,167,600,172,658,160,668,169,680,173,680,179,693,176,703,167,693,170,684,171,682,157,681,137,680,128,676,126,676,116,670,101,651,106,639,123,640,131,637,136,631,142,618,142,607,146" href="#NY" alt="New York">

  <area shape="poly" coords="263,488,261,479,257,475,260,468,245,457,222,448,204,440,192,434,198,431,203,430,223,439,240,448,252,452,257,456,260,465,268,469,276,477" href="#HI" alt="Hawaii">

  <area shape="poly" coords="539,308,552,353,556,380,596,379,600,381,600,376,608,375,610,365,610,360,612,351,605,344,604,340,600,334,594,328,587,321,581,315,571,309,575,304,557,304,540,308" href="#GA" alt="Georgia">

  <area shape="poly" coords="517,382,520,392,534,390,544,393,552,399,560,398,568,392,576,396,587,404,595,410,597,425,604,428,601,436,611,451,620,460,626,463,632,472,640,468,640,463,643,456,640,440,628,418,630,412,624,406,616,394,609,376,603,376,601,382,596,380,557,381,556,378,517,382" href="#FL" alt="Florida">

  <area shape="poly" coords="575,303,589,296,603,295,608,300,622,298,642,312,637,316,636,324,612,351,603,338,596,329,587,322,583,316,571,311,575,304" href="#SC" alt="South Carolina">

  <area shape="poly" coords="556,305,556,300,573,289,577,284,584,281,588,273,623,267,669,256,677,268,671,278,665,279,668,284,666,288,672,289,663,294,656,298,651,308,642,312,620,299,608,302,603,296,590,298,577,301,570,304,556,305" href="#NC" alt="North Carolina">

  <area shape="poly" coords="562,276,592,272,670,259,669,252,663,252,662,248,661,234,652,232,647,230,648,222,636,214,636,219,629,214,620,224,619,232,613,231,608,245,607,251,596,259,588,260,584,259,581,257,561,276" href="#VA" alt="Virginia">

  <area shape="poly" coords="595,203,593,217,584,223,583,232,577,233,575,243,576,252,581,256,586,260,590,260,596,259,600,257,604,255,607,252,608,245,610,238,612,236,613,232,618,233,618,228,622,222,624,219,625,216,628,215,633,219,636,216,635,213,631,212,628,212,622,211,619,216,614,218,612,211,599,212,595,204" href="#WV" alt="West Virginia">

  <area shape="poly" coords="671,102,691,96,695,104,691,108,689,120,690,137,682,139,681,130,677,127,676,115,671,102" href="#VT" alt="Vermont">

  <area shape="poly" coords="690,137,707,135,711,128,707,123,696,89,693,94,694,105,690,112,690,137" href="#NH" alt="New Hampshire">

  <area shape="poly" coords="696,90,704,108,712,127,705,121,715,115,718,109,725,104,726,96,731,97,736,92,737,95,748,83,745,79,741,79,740,72,736,72,728,48,721,43,716,49,708,46,704,62,703,71,704,76,696,90" href="#ME" alt="Maine">

  <area shape="poly" coords="682,153,702,149,704,160,692,164,685,171,683,154" href="#CT" alt="Connecticut">

  <area shape="poly" coords="682,140,682,154,701,149,706,146,713,153,720,149,727,148,727,144,722,146,718,144,716,142,711,140,712,133,710,132,704,137,683,140" href="#MA" alt="Massachusetts">

  <area shape="poly" coords="703,151,706,148,714,155,706,158,703,151" href="#RI" alt="Rhode Island">

  <area shape="poly" coords="668,170,665,181,673,190,666,198,669,208,676,208,683,197,681,185,677,184,680,178,679,173,669,169" href="#NJ" alt="New Jersey">

  <area shape="poly" coords="661,200,666,222,674,222,673,218,670,215,663,200" href="#DE" alt="Delaware">

  <area shape="poly" coords="612,211,661,200,666,222,675,223,670,244,668,243,670,230,660,227,658,221,660,217,659,211,656,210,653,213,655,221,656,228,651,228,648,224,643,219,638,215,633,209,626,211,617,218,612,211" href="#MD" alt="Maryland">

  <area shape="rect" coords="707,267,796,280" href="#DC" alt="Washington, D.C.">

</map>

 

To see a live demo implemented in WordPress, click here.

If you use any of my work and find it helpful, I hope you can buy me a cup of coffee by making a small donation.

donate