3.19. Swap Image(이미지 교체)

제3장 웹 그래픽 기능 익히기 > Swap Image(이미지 교체)




이번에는 Swap Image(이미지 교체)에 대해 알아보겠습니다. 
이 부분은 상당히 매력있는 것으로 특정 이미지 위에 마우스 포인트를 올려놓으면 지정한 영역에 관련되는 다른 이미지가 나타나도록 하는 것으로 활용하기에 따라서는 매우 재미있는 내용으로 구현할 수가 있습니다.




1) 다음 그림을 이용해 보겠습니다.

아래 쪽의 버튼 위에 마우스를 올리면 화면에 각 방송국을 표시하는 글자가 나오도록 할  예정입니다.





2) 슬라이스 도구를 이용하여 모니터 부분을 자릅니다.





3) 아래쪽의 버튼도 자릅니다.





4) 프레임 패널의 메뉴에서 [프레임 복제]를 실행합니다.
3개의 프레임을 현재 프레임 이후에 삽입하도록 설정합니다.
버튼이 모두 3개이고 각 버튼에 따라 나타날 이미지가 3장이므로 이렇게 하는 것입니다.
 




5) 도구에서 [슬라이스와 핫스팟 영역 숨기기] 단추를 눌러 핫스팟을 숨긴 다음, 
[프레임] 패널 '프레임2'를 선택한 다음 화면 영역에 'KBS'를 입력합니다.
마찬가지 방법으로 '프레임3'을 선택하고 화면 영역에 'MBC'를 입력하고, '프레임4'을 선택한 후 화면 영역에 'SBS'를 입력합니다.

 

6) 다시 [슬라이스와 핫스팟 영역 보이기] 도구를 선택한 후, TV 아래쪽에 있는 버튼 중 첫 번째 버튼 슬라이스를 클릭합니다.
영역 가운데 시계 모양이 표시됩니다.
이 시계를 화면 영역으로 드래그하면 연결선이 생깁니다.





7) 마우스 버튼을 놓으면 다음과 같은 [이미지 교체] 대화 상자가 나옵니다.
여기서 KBS 글자가 들어있는 '프레임2'를 선택합니다.
 
마찬가지 방법으로 두 번째 슬라이스 영역을 드래그해서 화면 영역에 가져다 놓고,
[이미지 교체] 대화 상자에서 '프레임3'을 선택하고,
세 번째 슬라이스 영역을 드래그해서 화면 영역에 가져다 놓은 후,
[이미지 교체] 대화 상자에서 '프레임4'을 선택합니다.




8) 이렇게 하면 이미지 교체가 완료됩니다.
캔버스 상단에 있는 [미리보기] 탭을 누르고, 확인해 보십시오.




버튼에 링크하기

앞서 살펴본 바와 같이 핫스팟이나 슬라이스 영역에는 링크를 할 수 있습니다.
위의 예제의 경우 버튼 위에 마우스를 올리면 화면 영역에 글자가 나오고, 클릭을 하면 해당 방송국 홈페이지로 연결되도록 해보겠습니다.




1) 방법은 앞의 방법과 동일합니다.
먼저 첫 번째 버튼 슬라이스 영역을 클릭하여 선택한 후 [URL] 패널에 KBS 홈페이지 주소를 입력합니다.





2) 마찬가지 방법으로,
두 번째 버튼 슬라이스 영역을 클릭하여 선택한 후 [URL] 패널에 MBC 홈페이지 주소를 입력합니다.
http://www.imbc.com




3) 세 번째 버튼 슬라이스 영역을 클릭하여 선택한 후 [URL] 패널에 SBS 홈페이지 주소를 입력합니다.
 http://www.sbs.co.kr