Как сверстать hover для нестандартных форм?

Question

[Новомир Лобанов]

Добрый день. Столкнулся с задачей сверстать блок с планировками квартир, при этом при наведении область должна затемняться и появляться кнопка. Начал решать через map area, но hover почему-то не работает..



Исходные код блока:

<img src="http://0409.ru/ivan-da-marya/images/plan1.jpg" alt="" usemap="#myMap2" />
<map name="myMap2" id="myMap2">
    <area alt="" id="evro3-1" title="" href="#" target="_self" shape="poly" coords="46,25,43,130,151,128,152,141,175,141,178,160,254,163,254,23" />

    <area alt=""  id="evro2-5"  title="" href="#" target="_self" shape="poly" coords="305,23,256,21,255,160,329,161,330,106,307,105" />

    <area alt=""  id="evro2-2"  title="" href="#" target="_self" shape="poly" coords="354,163,354,148,380,148,379,129,459,130,461,24,307,23,308,103,333,108,333,164"/>

    <area alt=""  id="odn-1"  title="" href="#subtabs1-1" shape="poly" coords="358,198,357,150,381,150,381,131,460,134,462,232,382,232,382,200" />

    <area alt=""  id="evro2-4"  title="" href="#" target="_self" shape="poly" coords="305,199,308,340,462,339,460,235,381,236,379,199" />

    <area alt=""  id="evro2-3"  title="" href="#" target="_self" shape="poly" coords="199,336,305,338,305,197,200,199" />

    <area alt=""  id="evro2-1"  title="" href="#" target="_self" shape="poly" coords="47,337,196,337,198,201,152,199,152,189,125,188,127,230,44,232"/>
</map>

Answer 1

[Ankhena]

Может, вот такая штука Вам поможет? etiennemartin.ca/mapify/#

Answer 2

[olegshilov]

Попробуйте использовать SVG

Answer 3

[Максим]

htmlmapgenerator.ru/index.php?option=com_htmlmapge... вот вариант

Answer 4

[2cha.headz]

попробуйте jquery.maphilight.js