Точное нажатие с перекрывающимися элементами

Question

Извините, если название не объясняет это достаточно хорошо, но это лучшее название, которое я мог придумать, чтобы представить мой вопрос.

Итак, у меня есть два деления:

.div-arrow
{
    position: absolute;
    float: left;
    cursor: pointer;
    display:block;
    width: 136px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll 0px 0px transparent;
    zoom: 50%;
}

.div-diamond
{
    position: absolute;
    float: left;
    cursor: pointer;
    display: block;
    width: 83px;
    height: 54px;
    vertical-align: middle;
    border-radius: 4px;
    background: url(ImagePathHere) no-repeat scroll -272px 0px transparent;
    zoom: 50%;
}

И я использую их, чтобы сделать макет как это:

Если щелкнуть по красной метке, активируется зеленый бриллиант, а не тот, который выглядит так, как вы щелкаете. Мне было интересно, как мне обрезать эти невидимые части изображения /div, чтобы вы действительно нажимали на div, похоже, что вы нажимаете.

Answer 1

Все элементы на веб-странице, по сути, являются блоками, поэтому, хотя вы можете создать вид круга или ромба и т. Д., Это по-прежнему действительно четырехсторонний блочный элемент.

Для вашей проблемы вы можете рассмотреть возможность использования карты изображений:

http://www.w3.org/TR/html401/struct/objects.html

Или, возможно, с использованием метода HTML5 CANVAS:

https://developer.mozilla.org/en-US/docs/HTML/Canvas