Не работает подкладка под карту с помощью map?

Всем привет

Есть картинка с картой Украины, под каждую из областей нужно подложить area c кликабельным полем, который бросает нас на страницу с ней. Кликабельная область есть, но координаты не работают, то есть все теги area находятся на одном месте и никуда не двигаются, какие координаты я бы не ставил Почему?

Css:

div.map_body {
        max-width: 935px;
        width: 100%;
        position: relative;
        margin: 57px auto 0;
        img {
            width: 100%;
            display: block;
            height: auto;
        }
        .map-access {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            area {
                display: block;
                width: 20px;
                background: red;
                height: 20px;
            }
        }
    }

HTML:

<div class="map_body">
            <img src="{$items[key].img}" width="900" height="800" alt="map" usemap="#Navigation">
            <map class="map-access" name="Navigation">
                <area shape="rect" id="test" coords="20,20,0,0" href="page/inform.html" alt="Информация">
                <area shape="poly" coords="210,24,233,0,329,0,307,24" href="page/activity.html" alt="Мероприятия">
                <area shape="poly" coords="304,24,385,24,407,0,329,0" href="page/depart.html" alt="Отделения">
                <area shape="poly" coords="384,24,449,24,473,0,406,0" href="page/techinfo.html" alt="Техническая информация">
                <area shape="poly" coords="449,24,501,24,525,0,473,0" href="page/study.html" alt="Обучение">
                <area shape="poly" coords="501,24,560,24,583,0,525,0" href="page/work.html" alt="Работа">
                <area shape="poly" coords="560,24,615,24,639,0,585,0" href="page/misk.html" alt="Разное">
            </map>
        </div>