절대 위치 지정된 이미지 영역 맵을 마우스로 클릭 할 수있게 만드는 방법은 무엇입니까?

Question

절대 위치 지정을 사용하여 여러 이미지를 서로 겹치게 배치했습니다. 이 이미지는 부분적으로 투명하며 보이는 부분 만 클릭 할 수있게하려면 html area 및 map이 있어야합니다. jQuery에서 area 태그에 마우스 이벤트를 첨부했습니다.

이미지의 매핑 된 부분을 입력해야만 mouseenter와 mouseleave가 실행됩니다.

문제는 상단 이미지에만 문제가 있다는 것입니다. 다른 모든 이미지의 경우 CSS 놓기 작업이 아닌 이벤트를 시작합니다. 그 위에 다른 이미지가 있기 때문입니다. 이는 area이 겹치지 않고 map이 이미지 앞에 있다는 사실에도 불구하고. http://markv.nl/stack/imgmap2/

Answer 1

당신은 모든 개별 이미지의 상단에 하나, 완전히 투명 이미지를 배치하고, 그 이미지에 모든 이미지 맵 영역을 첨부 할 수 있습니다 : 여기

문제의 데모입니다. 마우스 이벤트의 캡처 요소로 작동하며 모든 개별 이미지를 변경할 수 있습니다.

Answer 2

그것은 직접적인 대답/솔루션이 아니다 ...

왜 드로잉을 할 캔버스/SVG를 사용하지 않는? 작업을 쉽게하는 라이브러리가 많이 있습니다. 그 중 하나가 RaphaëlJS입니다 (이 점을 확인하십시오 : example). 이 라이브러리의 장점은 마우스 상호 작용이 가능하다는 것입니다.

다른 라이브러리는 EaselJS이지만, <canvas>을 지원하지 않는 브라우저에서는 작동하지 않으므로 IE < 9를 지원하지 않습니다.

Answer 3

이미지가 겹치지 않는 경우에만 작동합니다 (그림 참조). 귀하의 경우 모든 이미지는 정확히 동일한 크기를 가지며 서로 쌓여 있습니다. 브라우저는 이미지를 단색의 객체로 취급하기 때문에 (투명도에 대해 신경을 쓰지 않습니다.) 어떻게 그 이미지를 결정할 수 있습니까? 현재 어떤 이미지를 가리키고 싶습니까?

이

그냥 모든 영역을 포함하는 이미지 중 하나에 하나의 이미지 맵을 사용하고, 약간의 자바 스크립트와 모든 다른에 마우스 오버 효과를 트리거 할 수 있습니다

+-----------+-----------+ 
    |   |   | 
    | img1 | img2 | 
    |   |   | 
    |   |   | 
    +-----------+-----------+ 
    |   |   | 
    | img3 | img4 | 
    |   |   | 
    |   |   | 
    +-----------+-----------+ 

그러나이 문제를 해결 할 수 있습니다 이미지. 당신의 코드를 기반으로

$("area").hover(function(){ 
    var $target = $("#"+$(this).data("target")); // getting the target image 
    $target.attr("src",$target.attr("src").replace("slice","slice-focus")); //replacing the src with the src of the hover image 
},function(){ 
    var $target = $("#"+$(this).data("target")); 
    $target.attr("src",$target.attr("src").replace("focus-","")); //revert the changes 
});​ 

근무 예 : jsFiddle-Demo

Answer 4

할 수 있습니다 바인더 제본 기능의 onclick() 이벤트를해야합니다 고정 높이와 폭 또한 궁전 투명 DIV. 예 :

<div style="position: absolute; top: 10px; left: 10px; width: 100px; height: 100px;" onclick="dosomething();"></div>