핫스팟 및 이미지 맵

뷰어는 AEM Assets의 Dynamic Media(온디맨드 방식)에서 핫스팟을 처음 작성한 위치에 기본 보기 위에 핫스팟 아이콘을 표시합니다.

기본 뷰어 영역의 CSS 속성

핫스팟 아이콘의 모양은 다음 CSS 클래스 선택기로 제어됩니다.

.s7carouselviewer .s7imagemapeffect .s7icon

CSS 속성

설명

background-image

핫스팟 아이콘 아트워크.

background-position

CSS 스프라이트를 사용하는 경우 아트워크 스프라이트 내부에 배치합니다.

다음을 참조하십시오 CSS 스타일 .

width

핫스팟 아이콘 너비.

height

핫스팟 아이콘 높이.

예 - 두 개의 서로 다른 아이콘 상태에 대해 각각 다른 이미지를 표시하는 56 x 56픽셀 핫스팟 아이콘을 설정합니다.

.s7interactiveimage .s7imagemapeffect .s7icon {
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_up_touch.png);
 width: 56px;
 height: 56px;
}
.s7interactiveimage .s7imagemapeffect .s7icon:hover {
 background-image: url(images/v2/imagemap/ImageMapEffect_icon1_light_over_touch.png);
}

이미지 맵 영역의 CSS 속성

다음 CSS 클래스 선택기를 사용하여 이미지 맵 영역의 모양이 제어됩니다.

.s7carouselviewer .s7imagemapeffect .s7region

CSS 속성

설명

배경

이미지 맵 영역 채우기 색입니다.

다음에서 이 색상 지정: #RRGGBB , RGB(R,G,B) , 또는 RGBA(R,G,B,A) 형식.

background-color

이미지 맵 영역 채우기 색입니다.

다음에서 이 색상 지정: #RRGGBB , RGB(R,G,B) , 또는 RGBA(R,G,B,A) 형식.

경계

이미지 맵 영역 테두리 스타일입니다. 을(를) "(으)로 지정해야 합니다. 폭 단색 ", 여기서 폭 픽셀 단위로 표시되며, 색상 다음으로 설정됨 #RRGGBB , RGB(R,G,B) , 또는 RGBA(R,G,B,A) .

예 - 1픽셀 검정색 테두리가 있는 투명한 이미지 맵 영역을 설정합니다.

.s7carouselviewer .s7imagemapeffect .s7region {
 border: 1px solid #000000;
 background: RGBA(0,0,0,0);
}

이 페이지에서는