Как придать блоку форму шестигранника?

Доброго времени, уважаемые форумчане. Помогите, пожалуйста, со следующим вопросом:
Имеется изображение в форме шестигранника:

<div id="aaa"> </div>

#aaa {
    background: url('/Images/aaa.png')no-repeat;
    position: absolute;
    top: 9px;
    left: 294px;
    z-index: 10;
    height: 128px;
    width: 110px;
}

#aaa:hover {
    background: url('/Images/aaa-hover.png')no-repeat;
    position: absolute;
    top: -7px;
    left: 279px;
    z-index: 10;
    height: 166px;
    width: 143px;
}

По логике работы, должно получатся так: мы наводим курсор на изображение, и оно должно поменяться на другое изображение большего размера и цвета. Но возникает вопрос: т.к. блок div имеет прямоугольную форму, то срабатывание происходит в некоторых случаях раньше, чем курсор непосредственно будет над изображением.
Подскажите, как придать блоку форму шестигранника и срабатывание только над изображением.
Пробовал:

<div id="hexagon"> </div>

    #hexagon {
        width: 100px;
        height: 55px;
        background: #fc5e5e;
        position: relative;
        margin: 10px auto;
    }
    #hexagon:before {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        top: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-bottom: 25px solid #fc5e5e;
    }
    #hexagon:after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        bottom: -25px;
        left: 0;
        border-left: 50px solid transparent;
        border-right: 50px solid transparent;
        border-top: 25px solid #fc5e5e;
    }

Но тут все равно более раннее срабатывание происходит.

Подскажите, что можно предпринять?
Заранее спасибо. )

18.11.2014
Вот как попробовал решить вопрос:
данный блок находится в блоке со свойством relative:

    <div id="aaa">
                    <img src="/Images/aaa.png" alt="aaa" id="img-aaa" usemap="#map-aaa" />
                    <img src="/Images/aaa-hover.png" alt="aaa" style="display: none;opacity: 0;" id="img-aaa-hover" usemap="#map-aaa" />
                </div> 
                <a href="./" id="aaat-text">
                    <h3 style="top: 41px;left: 105px;">aaa</h3>
                </a>
                <map name="map-aaa">
                    <area shape="POLY" coords="3,36,58,2,111,36,111,95,58,128,3,92,3,36" alt="aaa" href="./" id="area-aaa">
                </map>

style:

#aaa {
    position: absolute;
    top: 9px;
    left: 294px;
    z-index: 10;
    height: 128px;
    width: 110px;
}

#aaa-hover {
    position: absolute;
    top: -7px;
    left: 279px;
    z-index: 10;
    height: 166px;
    width: 143px;
}

И джава:

$('#area-aaa').mouseenter(function () {
    debugger;
    $('#img-aaa').animate({ opacity: '0' }, imageOpasity);
    setTimeout(function () {
        $('#img-aaa').css({ 'display': 'none' });
        $('#aaa').attr('id', 'aaa-hover');
        $('#area-aaa').attr('coords', '3,43,73,2,144,43,144,125,73,165,3,125,3,43');
        $('#img-aaa-hover').css({ 'display': '' }).animate({ opacity: '1' }, imageOpacityHover);
        $('#aaa-text').css({ 'text-decoration': 'none', 'color': '#F8A84E' });
    }, timeOut);
});
$('#area-aaa').mouseleave(function () {
    debugger;
    $('#img-aaa-hover').animate({ opacity: '0' }, imageOpasity);
    setTimeout(function () {
        $('#img-aaa-hover').css({ 'display': 'none' });
        debugger;
        $('#aaa-hover').attr('id', 'aaa');
        $('#area-aaa').attr('coords', '3,36,58,2,111,36,111,95,58,128,3,92,3,36');
        $('#img-aaa').css({ 'display': '' }).animate({ opacity: '1' }, imageOpacityHover);
        $('#aaa-text').css({ 'text-decoration': 'none', 'color': '#898989' });
    }, timeOut);
});
$('#area-aaa').mousedown(function () {
    debugger;
    $('#img-aaa-hover').attr('src', '/Images/aaa-active.png');
});

$('#aaa-text').hover(
    function () {
        $('#area-aaa').mouseenter();
    },
    function () {
        $('#area-aaa').mouseleave();
    });
$('#aaa-text').mousedown(function () {
    $('#area-aaa').mousedown();
});

Вроде работает нормально, но почему-то в фаерфоксе иногда идет какое-то подрагивание изображения.
Ну и вообще код попахивает жутким костылем. ((