우리는 웹 페이지에서 이러한 효과를 자주 볼 수 있습니다. 마우스를 사진 위로 이동하면 원본 사진이 다른 사진으로 전환됩니다. 마우스를 이동하면 원래 모습으로 돌아갑니다. 처음에는 Frontpage에 비해 Dreamweaver의 장점 중 하나가 Dreamweaver에서 대화형 웹 페이지를 만들 수 있다는 점을 언급했습니다. 이제 Dreamweaver를 사용하여 가장 간단한 대화형 효과인 그림 변경을 만들어 보겠습니다.
같은 크기의 사진 두 장을 준비합니다. 하나는 마우스를 위로 이동하기 전이고, 다른 하나는 마우스를 위로 이동한 후의 사진입니다. 예를 들어 다음 두 그림에서 왼쪽 그림은 돌출된 버튼이고 오른쪽은 버튼입니다. 그림은 오목한 버튼입니다.
개체 패널을 클릭합니다. 을 클릭하면 다음 대화 상자가 표시됩니다.
① 이미지 이름: 변환된 이미지 효과의 태그 이름으로 Dreamweaver에서 자동으로 할당합니다.
② 원본 이미지 : 원본 이미지를 지정합니다. (예를 들어 올려진 이미지입니다.)
③ 롤오버 이미지: 마우스를 위로 이동한 후의 이미지를 지정합니다(예: 오목한 이미지).
④ Url: 이미지의 링크 URL입니다.
예를 들어 위와 같이 설정을 완료한 후 확인을 누른 다음 F12를 누르면 효과를 미리 볼 수 있습니다.
을 클릭하면 다음 대화 상자가 표시됩니다.