드림위버 ) 비헤이비어 그 외

출처 : 실력이 탐나는 드림위버 CS5

Swap Image : 이벤트에 따라 지정한 이미지로 교체되게 한다. 예를들어 숫자 텍스트가 입력된 이미지 위해 마우스 포인터를 가져가면 상단에 위치한 큰 이미지가 교체되도록 설정할 수 있다. Swap Image 비헤이비어를 이용하여 롤오버 이벤트에 따라 서로 다른 이미지가 나타나는 롤오버 갤러리를 만들 수 있다.

롤오버에따라 이미지가 바뀌는 이미지를 선택하여 ID를 photo라고 넣었다.

그 후에 '1번 버튼'을 클릭하고 '비헤이비어 추가'에서 '이미지 교체'를 선택하였다.

아까 이름을 지어준 '이미지 "photo" *'를 선택하고 소스설정에서 바뀔 이미지를 찾아서 넣는다.

그리고 'onMouseOut 이미지 복구'의 체크를 해제한다. 만약 이걸 해제하지 않으면 마우스를 다른 곳으로 옮길때 처음의 이미지로 바뀌게 된다.

Change Property : ID로 지정한 DIV, TD, IMG, P와 같은 오브젝트에 해당하는 태그의 속성을 이벤트에 따라 변경시킨다. 예를 든것은 셀을 표시하는 TD 태그에 비헤이비어를 적용하여 셀의 배경 색상을 롤오버와 롤아웃 이벤트에 따라 변경하는것이다.

먼저 셀안에 있는 '서울'을 클릭 -> 태그 셀렉터에서 '<td>'를 선택 -> 속성패널의 ID 입력란에 'city1'을 입력 -> 비헤이비어 추가에서 '속성 바꾸기'선택 -> 아래처럼 속성바꾸기 대화상자를 바꾼다 -> 확인

확인을 누르고 나왔을때 나 같은경우는 'onFocus'로 되어있었는데 이것을 'onMouseOver'로 바꿔준다.

이제 Over가 아닌 Out되었을때는 배경색이 검은색이 되도록 비헤이비어를 또 하나 추가했다.

이것도 속성이 'onFocus'로 되어있었기 때문에 'onMouseOut'으로 바꿔주었다.

이렇게해서 두개가 잘 있는지 확인!

결과화면 : 마우스를 가져다대니 셀의 배경색이 분홍색으로 변했다.

마우스를 아웃시키니 배경이 검은색으로 바꼈다.