jQuery/jQueryUI 함수와 플러그인 ("draggable"및 "maphighlight")을 이미지 맵 및 CSS 애니메이션 크기 조정과 결합하려고합니다. 추가 및 클릭에 jQuery를 통해 클래스를 제거하여 :maphilight를 사용하면 이미지 맵 영역에 절대적으로 배치 된 이미지가 포함되어야합니다.
그것은 조각에 넣어 너무 많은, 그래서 나는 codepen 만들어 : 다른 컨테이너 내부에 http://codepen.io/anon/pen/xqxgrz
내가 드래그 영역 (#container5)가을 (#container3) 오버 플로우를 숨 깁니다 (효과를 보려면 드래그하십시오).
#container3 안에는 네 개의 이미지가 포함 된 컨테이너 (#container4)가 하나 더 있습니다. 그것들은 절대적으로 배치됩니다. 세 개의 작은 것들은 적재 될 때 전체 컨테이너를 채우는 것 위에 있습니다. 컨테이너의 모든 중첩은 이미지 맵 및 크기 조절을 사용하여 끌기 기능을 얻는 데 필요합니다.
이제 모든 것이 더 많거나 적음 지도 영역으로 덮여 있습니다. 작은 이미지를 번으로 번 (을 제외한)으로 가져 가면 표시됩니다. "SHRINK"라고 표시된 이미지 주변을 클릭하면 #container4 (즉, 컨테이너 자체, 이미지 4 개,지도 영역)의 모든 요소가 CSS 클래스가 추가되어 초기 크기의 60 %까지 축소됩니다. CSS 애니메이션과 결합 된 jQuery. "RESET"주변을 클릭하면 모든 것이 원래 크기로 재설정됩니다 (이전에 드래그 된 경우 원래 위치로 복원되지 않습니다).
내 문제는 내가 덮칠 때 표지 표지 영역을 얻을 수 없다는 것입니다. 나는이 CSS (그리고 그것의 다른 유사) 시도하지만, Z- 인덱스는 내가 사용에 상관없이 효과가 없습니다 :
이#container4 area {
position: absolute;
z-index:10000;
}
는하지만지도 영역 제 (작은) 이미지 뒤에 남아를 -을 클릭 이미지 자체는 클릭 할 수있는 이미지 맵으로 덮여 있다고해도 효과가 없습니다.
내 의도는 이미지보다 작고 이미지의 일부분 (표시되는 객체의 모양) 만 커버하므로 이미지 자체에 jQuery addClass 함수를 할당합니다. 옵션이 아닙니다.
마우스를 가져 갔을 때 이미지 상단에 이러한 부분을 표시하려면 어떻게해야합니까?