[javascript] 오버레이 이미지에서 마우스 상호 작용 무시

Program / 글쓴이

호버 효과가있는 메뉴 모음이 있는데 이제 메뉴 항목 중 하나 위에 원과 “손으로 그린”텍스트가있는 투명한 이미지를 배치하려고합니다. 절대 위치를 사용하여 메뉴 항목 위에 오버레이 이미지를 배치하면 사용자가 버튼을 클릭 할 수없고 호버 효과가 작동하지 않습니다.

이 오버레이 이미지와 마우스 상호 작용을 비활성화하여 메뉴가 이미지 아래에 있더라도 이전과 마찬가지로 계속 작동하도록하는 방법이 있습니까?

편집하다:

메뉴는 joomla로 생성 되었기 때문에 메뉴 항목 중 하나만 조정할 수 없었습니다. 그리고 가능하더라도 자바 스크립트 솔루션이 적절하다고 생각하지 않았습니다. 그래서 결국 메뉴 항목 요소 바깥쪽에 화살표로 메뉴 항목을 “표시”했습니다. 내가 원했던 것만 큼 좋지는 않았지만 어쨌든 괜찮 았습니다.

답변

내가 찾은 최고의 솔루션은 CSS 스타일링입니다.

#reflection_overlay {
    background-image:url(../img/reflection.png);
    background-repeat:no-repeat;
    width: 195px;
    pointer-events:none;
}

pointer-events 속성은 꽤 잘 작동하고 간단합니다.

답변

그래서 저는 이것을했고 Windows XP의 Firefox 3.5에서 작동합니다. 일부 텍스트, 이미지 오버레이 및 모든 클릭을 가로채는 투명한 div 위의 상자가 표시됩니다.

<div id="menuOption" style="border:1px solid black;position:relative;width:100px;height:40px;">
sometext goes here.
<!-- Place image inside of you menu bar link -->
<img id="imgOverlay" src="w3.png" style="z-index:4;position:absolute;top:0px;left:0px;width:100px;height:40px;" \>
<!-- Your link here -->
<a href="javascript:alert('Hello!')" >
<div id="mylinkAction" style="z-index:5;position:absolute;top:0px;left:0px;width:100px;height:40px;">
</div>
</a>
</div>

내가 한 일 : div를 만들고 메뉴 옵션의 크기를 100x40px (임의의 값이지만 샘플을 설명하는 데 도움이 됨)로 크기를 조정했습니다.

div에는 이미지 오버레이와 링크 오버레이가 있습니다. 링크에는 ‘menuOption’div와 동일한 크기의 div가 포함되어 있습니다. 이렇게하면 전체 상자에서 사용자 클릭이 캡처됩니다.

테스트 할 때 자체 이미지를 제공해야합니다. 🙂

주의 사항 : 메뉴 버튼이 사용자 상호 작용 (예 : 버튼을 시뮬레이션하기 위해 색상 변경)에 응답 할 것으로 예상되는 경우 태그에서 호출 할 자바 스크립트에 추가 코드가 첨부되어야합니다.이 추가 코드는 ‘ menuOption ‘요소를 DOM을 통해 색상을 변경합니다.

또한 클릭 이벤트를 가져 와서 표시되는 페이지 요소 아래의 요소에 등록하도록 할 수있는 다른 방법은 없습니다. 나는 이번 여름에도 이것을 시도했지만 다른 해결책은 찾지 못했습니다.

도움이 되었기를 바랍니다.

추신 : quirksmode의 이벤트에 대한 글은 이벤트 가 브라우저에서 어떻게 동작하는지 이해하는 데 큰 도움이되었습니다.

답변

버튼에 손으로 그린 ​​이미지보다 더 높은 Z- 색인 속성을 지정합니다.

<img src="hand_drawn_image.gif" style="z-index: 4">
<a href="#" style="z-index: 5"></a>

그러나 모든 주요 브라우저에서 테스트해야합니다. IE는 Z- 색인을 FF와 다르게 해석합니다. 누군가가 더 자세한 정보를 얻으려면 더 많은 정보를 게시해야하며 링크가 가장 좋습니다.

답변

Pekka Gaiser가 말한 것을 바탕으로 다음이 효과가 있다고 생각합니다. 그의 예를 들어 재 작업 :

<a href="#" style="z-index: 5">
    <!-- Place image inside of you menu bar link -->
    <img src="hand_drawn_image.gif" style="z-index: 4">
    <!-- Your link here -->
</a>

여기에서 기본 a- 태그에 이벤트를 배치 할 수 있으며 이미지에 이벤트가없는 경우 캡처 (! IE 브라우저)를 시작한 다음 이벤트 전파를 중지 할 수 있습니다.

도움이 더 필요하면 상황에 대해 조금 더 알려주세요.

답변

이미지가 정적으로 배치되는 경우 메뉴 항목 요소 내부에 img 태그를 배치하여 이미지가 버블 링 될 때 이미지에서 클릭 이벤트를 캡처 할 수 있습니다.

<div onclick="menuclick()">
  <img src="overlay.png" style="position:absolute;" />
</div>

답변