클릭 가능한 배경 슬라이드 쇼 제작에 대한 도움말

jquery 이미지 슬라이드 쇼를 배경으로하고 슬라이드 쇼 상단에 탐색 막대, 페이지 중간에 빈 영역이있어 이미지에 through), 아래쪽에는 슬라이드 쇼 (content)와 꼬리말 (footer)이 있습니다. 니드 서플라이의 현재 웹 사이트 (http://needsupply.com/)와 유사합니다.클릭 가능한 배경 슬라이드 쇼 제작에 대한 도움말

내 주요 어려움은 슬라이드 쇼의 이미지를 클릭 할 수있게하고 싶지만 슬라이드 쇼는 모든 div (z- 인덱스 : -1) 뒤에 있기 때문에 덮여지고 있기 때문에 클릭을 잡지 못합니다. 내 주요 콘텐츠 div (페이지, 머리글, 바닥 글).

슬라이드 쇼를 간단한 링크 된 이미지로 바꾸려고 시도했지만 여전히 클릭 할 수 없으므로 슬라이드 쇼 코드와 아무 관계가 없습니다.

enter image description here

여기에 내 사이트의 기본 구조입니다 :

<body> 
    <div id="slideshow"> 
    <a href="www.example.com /><img src="pic1.jpg"></a> 
    <a href="www.example.com /><img src="pic2.jpg"></a> 
    .... 
    </div> 

    <div id="page"> 
    <div id="header">My Header</div> 
    <div id="content">Some Content</div> 
    <div id="footer">My Footer</div> 
    </div> 

</body>

CSS : 어떤 도움을 크게 감상 할 수

#slideshow{ 
    width:100%; 
    height: 620px; 
    position: absolute; 
    top:0; 
    left:0; 
    z-index:0; 
} 

#page{ 
    width: 980px; 
    margin: 0 auto 2px auto; 
}

. 제 목적에 대한 더 자세한 정보가 필요하면 알려주세요.

출처

2011-08-03 justinl

클릭 처리기를 본문에 위임 한 다음 처리하지 않으려는 대상 (예 : 머리, 내용, 꼬리말 등)에서 발생한 클릭을 필터링하는 것은 어떻습니까? 현재 슬라이드에 대한 클릭 이벤트를 항상 트리거 할 수 있습니다. – kinakuta

흥미로운 접근 방법입니다. 나는 스크립트에 반대되는 CSS와 레이아웃을 사용하는 솔루션을 찾고 있다고 언급 했어야했다. 이것을 달성 할 수있는 다른 방법이 없다면 시작할 수있는 좋은 곳입니다. – justinl

@kinakuta이 접근 방식에 관한 한 가지 질문은 제안 된 접근 방식으로 이미지 영역 위에 마우스 포인터가 손 모양의 아이콘으로 바뀌는 것입니까? – justinl

#page 래퍼를 제거하고 #content 및 #footer을 절대적으로 맨 아래쪽으로 제거하기 만하면됩니다. 그렇게하면 이미지의 주 영역 (#slideshow)을 덮는 div이 없으므로 클릭 할 수 있습니다. #page, #content 및 #footerdiv은 취소 할 수 없습니다.

출처

2011-08-03 22:15:29 tw16

클릭 가능한 배경 슬라이드 쇼 제작에 대한 도움말

답변

관련 문제