겹치는 div로 정확한 클릭

Question

제목이 충분히 설명되지 않는다면 유감 스럽지만 내 질문을 표현할 때 가장 좋은 제목입니다.

그래서있어이 div의 :의 대신 http://i.stack.imgur.com/htFRd.png

클릭하면 적색 표시가 녹색 다이아몬드를 활성화 것이다 :

.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%; 
} 

그리고이 같은 레이아웃을 만들기 위해 그들을 사용 다이아몬드는 당신이 클릭하는 것처럼 보입니다. 나는 image/div의 보이지 않는 섹션을 트리밍하는 방법에 대해 궁금 해서요. 그래서 당신이 실제로 클릭하는 것처럼 보이는 div를 클릭하십시오.

Answer 1

웹 페이지의 모든 요소는 본질적으로 블록입니다. 원이나 다이아몬드 모양을 만들 수도 있지만 실제로는 4면 블록 요소입니다.

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

또는 아마도 HTML5 캔버스 방법을 사용 : 당신은 이미지 맵을 사용하거나 고려할 수 문제에 대한

는

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