마우스오버(Hover)를 활용한 이미지 전환 효과내기
마우스오버(Hover) 효과란 텍스트, 이미지, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다. 이 도움말에서는 이미지 위젯에 마우스오버(롤오버) 효과를 적용하는 방법을 설명합니다.
설정방법
이미지 위젯은 아래의 그림처럼 두 가지 이미지를 추가할 수 있도록, 이미지 설정 항목이 기본 이미지 와 마우스오버 이미지 항목이 나눠져 있습니다. 사용자는 기본 이미지에 기본으로 표시될 이미지를 추가하고, 마우스오버 이미지엔 마우스 포인터를 올렸을 때 전환될 이미지를 추가할 수 있습니다.
1단계: 이미지 위젯 추가 및 설정 열기
이미지 위젯을 삽입하고, 해당 위젯의 설정을 여는 과정을 설명합니다.
- 디자인 모드에 접속합니다. 접속방법
- 왼쪽 상단의 위젯 추가 ＋ 아이콘을 클릭합니다.
- 이미지 위젯을 클릭합니다.
- 삽입한 이미지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
- 컨텍스트 메뉴가 나오면 이미지 설정 을 클릭합니다.
2단계: 기본 이미지 추가 및 효과 설정하기
기본 이미지를 추가하고 효과, 설명 등을 추가 설정합니다.
- 기본 이미지를 업로드합니다.
이미지 설정 창 최상단의 [이미지를 추가해주세요] 를 클릭하여 이미지를 추가합니다 - 효과 항목에서 옵션을 선택합니다.
음영 항목에서 이미지 위에 올릴 색상을 추가로 설정할 수 있습니다. 컬러픽커를 클릭해 색상을 선택하거나 직접 색상값을 입력합니다. 필요에 따라 알파값을 조절해 색상을 투명하게 변경할 수 있습니다. 컬러픽커로 투명도 조절하기 - 설명 항목에 텍스트를 입력할 수 있습니다. 입력한 텍스트는 감추거나, 이미지 아래 표시하거나, 이미지 위에 표시할 수 있습니다.
- 클릭 시 동작 항목에서 기능을 선택합니다. 클릭 시 동작 추가하기
3단계: 마우스(롤오버) 이미지 추가 및 효과 설정하기
마우스 오버 이미지를 추가하고, 효과 및 음영을 추가 설정합니다. 위 2단계에서 설정한 기본 이미지의 설정과 마우스오버 이미지의 설정이 같으면 전환 시 차이점이 드러나지 않으니 주의해 주세요.
- 마우스(롤오버) 이미지를 업로드합니다.
최상단의 탭에서 [마우스오버]를 클릭합니다.
효과 항목 하위의 [이미지 추가] 영역을 클릭하여 이미지를 추가합니다. - 효과 항목에서 옵션을 선택합니다.
- 설명 항목에서 텍스트 표시여부 및 감추기 여부를 선택합니다.
- 음영 항목에서 이미지 위에 색상을 추가할 수 있습니다. 컬러픽커를 클릭해 색상을 선택하거나 직접 색상값을 입력합니다. 필요에 따라 알파값을 조절해 색상을 투명하게 변경합니다. 컬러픽커로 투명도 조절하기
4단계: 마우스(롤오버) 효과 확인하기
마우스오버 효과를 확인합니다. 마우스오버 효과는 디자인 모드에서는 동작하지 않으며, 미리보기 모드 또는 게시 후 사이트에서 확인할 수 있습니다.