2

The following map separates an image into various regions.

I would like to display a div in the direct center of each area on mouseover.

How can this be done with jQuery (or CSS)?

<div class="divToShowInCenter">Some text</div>
<img src="myimage.gif" width="335" height="278" usemap="#mapau">
<map name="mapau">
    <area shape="poly" coords="107,35,108,163,95,169,81,170,73,181,52,180,36,187,16,187,14,175,13,155,1,108,4,88,30,77,53,68,63,49,81,35,95,26" href="western-australia" alt="Western Australia" id="au-wa">
    <area shape="poly" coords="173,47,171,117,191,117,193,139,250,139,256,136,262,142,277,139,274,112,228,61,219,26,201,4,193,29,187,57" href="queensland" alt="Queensland" id="au-qld">
    <area shape="poly" coords="192,181,193,218,206,222,218,219,226,226,238,216,253,212,241,206,235,196,222,200,206,188" href="victoria" alt="Victoria" id="au-vic">
    <area shape="poly" coords="108,114,171,114,171,45,161,12,114,5,107,34" href="northern-territory" alt="Northern Territory" id="au-nt">
    <area shape="poly" coords="108,116,110,161,132,162,152,182,190,216,190,118" href="south-australia" alt="South Australia" id="au-sa">
    <area shape="poly" coords="210,230,227,234,245,228,243,250,238,265,224,264,214,246" href="tasmania" alt="Tasmania" id="au-tas">
    <area shape="poly" coords="237,171,233,188,249,197,257,171" href="australian-capital-territory" alt="Australian Capital Territory" id="au-act">
    <area shape="poly" coords="193,179,193,139,250,140,255,138,259,144,279,139,271,170,253,211,243,203,237,195,221,198" href="new-south-wales" alt="New South Wales" id="au-nsw">
</map>
Stack Man
  • 866
  • 11
  • 22
  • 1
    What counts as the center? Do you mean roughly in the center, or more exact, like the centroid of each polygon? – digglemister Dec 09 '15 at 05:57
  • 1
    I found the solution here: http://stackoverflow.com/questions/15477138/calculate-width-height-of-poly-area-on-image-map – Stack Man Dec 09 '15 at 14:55

0 Answers0