html 배경 광고

Question

"래퍼"너비가 960 픽셀 인 많은 웹 사이트를 보았습니다. 배경 이미지로 클릭 할 수있는 이미지 (광고의 일종)와 전체 웹 페이지가 this site과 같은 이미지 위에 있습니다. 나에게 튜토리얼이나 그걸 줄 수있어?

Answer 1

톰의 코드는 큰 도움이되었다, 그러나 나는 모든 사이트에 대한 광고의 유형에 대한 포인터 커서가 필요하지만, 그래서 나는이 솔루션을 내놓았다 :

$('body').bind('click', function(e) { 
    if ($(e.target).closest('#container').size() == 0) { 
     alert('click'); 
    } 
}).bind('mouseover', function(e) { 
    if ($(e.target).closest('#container').size() == 0) { 
     $(this).css('cursor','pointer'); 
    } else { 
     $(this).css('cursor','default'); 
    } 
}); 

Answer 2

먼저 웹 사이트 배경으로 광고 이미지를 넣은 다음 기본적으로 전체 본문에 대한 클릭을 캡처하여 페이지 콘텐츠의 내부 또는 외부에 있는지 확인해야합니다. 이를 수행하려면 이벤트 대상 요소에 부모 노드 중 하나 인 콘텐츠 래퍼 (또는 여러 개의 래퍼가있는 경우)가 있는지 확인해야합니다. 그렇지 않으면 클릭이 페이지 콘텐츠 외부에 있음을 의미합니다.

여기 StackOverflow에서이 코드를 사용하여 수행 할 수 있습니다. 당신이 (화면의 가장자리에) 내용 영역의 외부를 클릭 할 때 해당 광고가 있었다 경고를 얻을 것이다 - SO 작동 있도록 jQuery를 사용하고 -

$('body').bind('click', function(e){ 
    if(!$(e.target).closest('#content').length) { 
     alert('ad outside content clicked'); 
    } 
}); 

자바 스크립트 콘솔에서 시도해 주시기 바랍니다 클릭 함.

당신은 분명히 당신이 당신의 상용 거라고 콜백의 어떤 종류의 경고 교체해야 할 것 -

톰

PS를하는 데 도움이되는 새로운 웹 페이지 또는 어떤

희망을 여는 . 이 예제에서는 네이티브 JS가 아닌 단순화를 위해 jQuery를 사용하므로 라이브러리가 작동해야합니다.