맨 위로 링크 가능한 텍스트/버튼 이미지로 만드는 방법

텍스트와 버튼이 위에있는 이미지가 포함 된 div가 있습니다. 텍스트는 절대 위치에 배치되어 전체 이미지를 포함합니다. 텍스트의 끝에는 단추도됩니다. 이미지를 링크로 만들려고하는데 문제가 있습니다.맨 위로 링크 가능한 텍스트/버튼 이미지로 만드는 방법

현재 해결 방법은 내 이미지와 텍스트를 a 태그로 묶는 것입니다. 사용자가 버튼을 클릭하려고 할 때 버튼 대신 링크를 클릭하면 작동하지 않습니다. 또한 a 태그 안에 내 img 태그를 배치하려고 시도했지만 내 텍스트가 위에 배치되어 있으므로 링크가 클릭 가능한 것으로 등록되지 않습니다.

http://jsfiddle.net/NxtWa/

HTML :

<div class="tile"> 
    <a href="http://www.google.ca"> 
     <img src="http://www.placehold.it/480x260"> 
     <div class="text"> 
      <p>Long long paragraph</p> 
      <button>Button</button> 
     </div> 
    </a> 
</div>

CSS :

.tile { position:relative; width:480px; height:260px; } 
.tile .text { position:absolute; top:0px; left:0px; width:480px; height:260px; }

출처

2012-10-16 Jon

~~난 당신이 Z- 인덱스 속성을 사용하여 이미지 위에 텍스트와 버튼의 위치를 가정합니다.~~ 적절한 이벤트 감시자/이벤트 처리기 패턴을 사용하여 클릭 이벤트를 이미지로 가져 와서 텍스트 및 버튼에 대한 적절한 클릭이 처리되도록해야하며 이미지로 내려야하는 이벤트는 다음과 같습니다. 이미지/버튼에 대한 이벤트 핸들러에 의해 더 전달됩니다. 가능한 솔루션을

관련 질문 : 더 많은 연구에 JavaScript pass mouseenter event to element that is underneath another element

,이 기술은 (죄송 기간 이전에 내 마음을 미끄러했다) 버블 링 이벤트라고합니다. 이 작업을 수행하는 방법에 대한 추가 도움말 @https://stackoverflow.com/a/1026101/17716

출처

2012-10-16 04:08:33

나는 당신이 말하는 것을 이해하지 못합니다. 클릭 수를보기 위해 JS를 사용해야 할 필요가 있다는 것을 의미합니까? 버튼을 클릭하면 배경 이미지 링크가 무효화됩니까? – Jon

네, 그건 한 가지 방법입니다. 다른 하나는 아마도 내가 내 대답에 추가 한 링크 일 것입니다. 나는 그것을 시도하지는 않았지만 효과가있다. –

흠 .. 버블 링에 대한 연구를 좀 해봅시다. 내 .tile 모듈이 내 웹 사이트의 모든 곳에 나타나고 각 페이지마다 몇 번 나타날 수 있으므로 매우 강력하고 간단한 솔루션이 필요합니다. – Jon

맨 위로 링크 가능한 텍스트/버튼 이미지로 만드는 방법

답변

관련 문제