title: Hover effect over a poly image map using jquery and html/css
body: <p>I'm been trying to look through past questions but couldn't find an answer that worked for me.</p>
  <hr />
  <p><a href="https://i.stack.imgur.com/xLkiv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xLkiv.png" alt="Something" /></a></p>
  <p>I'm making an image map of these cities here. I used a map coord creator to start me off.</p>
  <pre><code>&lt;h1&gt;The cities of Hamilton Region&lt;/h1&gt;
  &lt;img src=&quot;img/hamilton.png&quot; alt=&quot;&quot; usemap=&quot;#Map&quot; /&gt;
  &lt;/div&gt;
  &lt;map name=&quot;Map&quot; id=&quot;Map&quot;&gt;
  &lt;area class=&quot;field&quot; alt=&quot;&quot; title=&quot;&quot; href=&quot;#&quot;  shape=&quot;poly&quot; coords=&quot;74,175.64999389648437,106,169.64999389648437,95,128.64999389648437,164,111.64999389648437,164,99.64999389648437,191,71.64999389648437,289,164.64999389648437,227,222.64999389648437,196,238.64999389648437,101,262.6499938964844&quot; /&gt;
  &lt;area alt=&quot;&quot; title=&quot;&quot; href=&quot;#&quot; shape=&quot;poly&quot; coords=&quot;233,331.64996337890625,255,261.6499938964844,238,233.64999389648437,200,242.64999389648437,101,264.6499938964844&quot; /&gt;
  &lt;area alt=&quot;&quot; title=&quot;&quot; href=&quot;#&quot; shape=&quot;poly&quot; coords=&quot;261,193.64999389648437,277,212.64999389648437,268,220.64999389648437,253,224.64999389648437,248,235.64999389648437,218,237.64999389648437,207,237.64999389648437,242,220.64999389648437&quot; /&gt;
  &lt;area alt=&quot;&quot; title=&quot;&quot; href=&quot;#&quot; shape=&quot;poly&quot; coords=&quot;314,288.64996337890625,321,272.64996337890625,339,265.6499938964844,341,251.64999389648437,355,255.64999389648437,361,241.64999389648437,349,238.64999389648437,326,198.64999389648437,332,223.64999389648437,322,215.64999389648437,309,211.64999389648437,307,220.64999389648437,291,217.64999389648437,274,221.64999389648437,255,226.64999389648437,251,246.64999389648437,258,262.6499938964844,256,272.64996337890625&quot; /&gt;
  &lt;area alt=&quot;&quot; title=&quot;&quot; href=&quot;#&quot; shape=&quot;poly&quot; coords=&quot;403,315.64996337890625,422,253.64999389648437,415,251.64999389648437,404,257.6499938964844,383,245.64999389648437,375,247.64999389648437,363,241.64999389648437,358,257.6499938964844,344,253.64999389648437,343,267.6499938964844,325,276.64996337890625,319,288.64996337890625&quot; /&gt;
  &lt;area alt=&quot;&quot; title=&quot;&quot; href=&quot;#&quot; shape=&quot;poly&quot; coords=&quot;374,308.64996337890625,254,271.64996337890625,232,334.64996337890625,352,388.64996337890625&quot; /&gt;
  
  &lt;/map&gt;
  &lt;h1 id=&quot;city&quot;&gt;Flamborough, Ontario&lt;/h1&gt;&lt;/br&gt;
  &lt;h2 id=&quot;pop&quot;&gt;Population: 39,220&lt;/h2&gt;
  </code></pre>
  <p>Now when I click a field a blue line goes around the border and encloses the city I clicked on. I would like to use either jquery or css to do the following:</p>
  <ol>
  <li>instead of outline in blue, the field is highlighted (I want it to
  be red when clicked)</li>
  <li>When the mouse hovers over, the field turns light blue</li>
  <li>When a field that's been clicked on (appears red) is clicked again,
  the red goes away.</li>
  <li>When highlighted red, words appear under the image giving a short
  description about it.</li>
  <li>When clicked on again, words go away.</li>
  </ol>
  <p>I know it has something to do with the &quot;area&quot; tag. Maybe doing the</p>
  <pre><code>&lt;Area onlick=&quot;highlight_city()&quot;&gt;
  </code></pre>
  <p>I'm not sure...</p>
  <p><a href="https://i.stack.imgur.com/y8cf8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y8cf8.png" alt="enter image description here" /></a></p>