롤오버 작업

롤오버는 클릭하거나 가리키면 모양이 변하는 대화식 개체입니다. 롤오버는 웹에서 탐색 도구로 종종 사용됩니다. 예를 들어, 클릭할 때 단추 색상이 변하거나 가리키면 텍스트가 표시되도록 만들 수 있습니다.

롤오버 효과는 JavaScript 이미지 스왑을 사용하는 웹 브라우저에서 구현됩니다. 원리는 간단합니다. 각 롤오버 영역은 크기가 동일한 두 개 이상의 이미지를 사용합니다. 사용자 동작(예: 이미지 위로 포인터 이동)에 따라 한 이미지가 다른 이미지로 빠르게 교체됩니다.

마우스 아웃 상태(왼쪽)와 마우스 오버 상태(오른쪽)의 롤오버

이를 통해 간단한 애니메이션을 만들 수 있으며, 각 이미지는 애니메이션의 프레임 역할을 합니다. 여기에서는 각 프레임을 "상태"라고 지칭합니다. Corel Painter에서는 각 롤오버에 대해 세 개의 상태를 지원합니다.

•

마우스 아웃 상태는 기본 이미지를 표시합니다. Corel Painter에서는 페이지를 처음 읽어들일 때 그리고 포인터가 롤오버를 벗어날 때 이를 표시합니다. 웹 브라우저가 JavaScript 이미지 스왑을 지원하지 않으면 기본 이미지만 표시됩니다.

•

마우스 오버 상태는 포인터가 롤오버 위로 이동할 때 이미지를 표시합니다.

•

마우스 클릭 상태는 사용자가 롤오버를 클릭할 때 이미지를 표시합니다. 사용자가 마우스 단추를 놓으면 마우스 아웃 이미지가 다시 표시됩니다.

모든 브라우저 버전이 이러한 상태를 지원하는 것은 아닙니다. 마우스 오버와 마우스 아웃 상태는 JavaScript 1.1을 지원하는 브라우저(Microsoft Internet Explorer 4.0 이상)에서 표시됩니다.

마우스 클릭 상태는 JavaScript 1.2를 지원하는 브라우저(Microsoft Internet Explorer 4.0 이상)에서 표시됩니다. 해당 JavaScript 버전을 지원하지 않는 브라우저나 JavaScript를 전혀 실행하지 않는 브라우저에는 롤오버 효과가 표시되지 않습니다.

롤오버 만들기

롤오버를 만들기 전에 이미지를 신중하게 분석해야 합니다.

•

어떤 이미지 영역에 롤오버 효과를 적용해야 하는가?

•

각 영역에 대해 어떤 롤오버 상태 조합을 사용할 것인가?

•

각 영역에 대해 어떻게 롤오버 상태를 만들 것인가?

위 목록에서 마지막 항목이 특히 중요합니다. 각 롤오버 영역에 두 개 또는 세 개의 상태를 적용해야 하기 때문에 각 상태를 어떻게 나타낼지 결정해야 합니다.

상태를 나타내는 가장 일반적인 방법은 상태별로 하나씩 여러 레이어를 사용한 후 필요에 따라 숨기거나 표시하는 것입니다. 또 다른 방법은 모양이나 동적 텍스트를 사용한 후 속성(색상, 불투명도, 크기 등)을 상태별로 재정의하는 것입니다.

레이어를 복제하여 롤오버에서 사용할 때 Option (Mac OS) 또는 Alt (Windows)를 누른 상태로 클릭하여 정렬을 제어합니다. 확실하지 않으면 각 레이어를 두 번 클릭하고 위치 위, 위치 왼쪽 필드를 확인하여 레이어 정렬을 검토합니다. 필드에 숫자를 입력하여 필요한 만큼 정렬을 조절합니다.

이 페이지가 유용했습니까? 피드백을 보내주십시오.