AMP HTML 광고, 동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.
이미지 버튼 구성요소에는 다음과 같이 세 가지 시각적 상태가 있습니다.
- 클릭 전 이미지 - 사용자가 버튼과 상호작용하지 않을 때의 기본 이미지
- 마우스오버 이미지 - 사용자의 커서가 버튼 위에 있을 때의 이미지
- 클릭 이미지 - 사용자가 버튼을 클릭할 때의 이미지
이렇게 세 개의 이미지를 지정하여 간단하게 시각적으로 반응하는 버튼을 만들 수 있습니다.
프로젝트에 이미지 버튼 구성요소를 사용하는 방법:
- 구성요소 패널에 이어 상호작용 폴더를 엽니다.
- 이미지 버튼
구성요소를 스테이지로 드래그합니다.
- 속성 패널의 이미지 버튼 속성 섹션에서 클릭 전 이미지, 마우스오버 이미지, 클릭 이미지의 URL을 입력합니다. 이미지 소스 파일이 로컬 파일인 경우 필드에서 찾아보기
버튼을 클릭하여 컴퓨터 파일 시스템에 있는 이미지를 선택합니다.
속성
| 속성 | 설명 |
|---|---|
| 이름 | 요소의 이름입니다. |
| 클릭 전 이미지 | 누르지 않은 상태의 버튼 이미지 URL입니다. 외부 URL('https://google.com/example.jpg') 또는 라이브러리의 애셋('assets/example.jpg')을 참조할 수 있습니다. 동적 데이터에 결합될 수 있습니다. |
| 마우스 오버 이미지 | 마우스 오버 상태의 버튼 이미지 URL입니다. 외부 URL('https://google.com/example.jpg') 또는 라이브러리의 애셋('assets/example.jpg')을 참조할 수 있습니다. 동적 데이터에 결합될 수 있습니다. |
| 클릭 이미지 | 누른 상태의 버튼 이미지 URL입니다. 외부 URL('https://google.com/example.jpg') 또는 라이브러리의 애셋('assets/example.jpg')을 참조할 수 있습니다. 동적 데이터에 결합될 수 있습니다. |
| 배경 | 이미지가 구성요소 영역보다 작은 경우에 표시되는 색상입니다. 동적 데이터에 결합될 수 있습니다. |
| 정렬 |
구성요소 내에서 이미지가 정렬되는 방식입니다.
|
| 크기 조절 |
구성요소와 크기가 다른 이미지를 표시하는 방법:
|
| 사용중지됨 | 버튼 사용을 중지합니다. 기본적으로 선택 취소되어 있습니다. |
이벤트 및 작업
이미지 버튼 구성요소에서 전송하는 이벤트다음 이미지 버튼 구성요소 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.
| 이벤트 | 설명 |
|---|---|
| 이미지 버튼 로드됨 | 모든 버튼 이미지가 로드되면 전송됩니다. |
이벤트 대화상자에서 이러한 이벤트를 선택하려면 이미지 버튼 구성요소를 대상으로 설정하세요.
다른 이벤트에 대한 반응으로 다음과 같은 이미지 버튼 구성요소 작업이 트리거될 수 있습니다.
| 작업 | 구성 옵션 |
|---|---|
| Toggle enable | 없음 |
| Set images |
|
이벤트 대화상자에서 이러한 작업을 선택하는 경우 이미지 버튼 구성요소를 수신자로 설정하세요.
이벤트 구성 방법 알아보기
미리보기
Google Web Designer 인터페이스 내에서는 이 구성요소를 미리 볼 수 없습니다. 작동 중인 구성요소를 보려면 오른쪽 상단에 있는 미리보기 