비디오: ※어도비 포토샵 cs3 강좌▶27.롤오버 이미지 만들기◀ 샘플 강의 IB96추천 2025
Dreamweaver에서 롤오버 이미지 - 이름에서 알 수 있듯이 누군가가 이미지 위로 커서를 가져 가면 반응합니다. 그 효과는 개가 사자 그림으로 대체 된 것과 같이 극적 일 수 있으며, 한 이미지가 다른 이미지로 바뀌면 바뀌는 단어의 색처럼 미묘합니다. 어쨌든 Dreamweaver에는 적용 할 수있는 가장 쉬운 동작 중 하나 인 간단한 롤오버 효과를 만드는 롤오버를위한 특별한 대화 상자가 있습니다.
Dreamweaver의 이미지 롤오버 삽입 대화 상자를 사용하여 롤오버 이미지를 만들려면 다음 단계를 따르십시오.
1. 롤오버를 표시 할 페이지에 커서를 놓으려면 클릭하십시오.
롤오버 효과에는 최소한 두 개의 이미지가 필요합니다. 하나는 초기 상태이고 다른 하나는 롤오버 상태입니다. 두 개의 다른 이미지 나 두 개의 유사한 이미지를 사용할 수 있지만 둘 다 같은 크기 여야합니다. 그렇지 않으면 두 이미지가 페이지의 정확히 같은 공간에 표시되어야하기 때문에 이상한 배율 효과가 발생합니다.
2. 삽입 -> 이미지 객체 -> 롤오버 이미지를 선택하십시오.
이미지 롤오버 삽입 대화 상자가 나타납니다. 3. 이미지 이름 상자에 이미지 이름을 지정합니다.
이미지와 같은 요소에 비헤이비어를 적용하려면 비헤이비어 스크립트가이를 참조 할 수 있도록 요소에 이름이 있어야합니다. 공백이나 특수 문자를 사용하지 않는 한 원하는 이름을 지정할 수 있습니다. 4. 원본 이미지 상자에 표시 할 첫 번째 이미지를 지정하십시오. 찾아보기 단추를 사용하여 이미지를 찾아 선택하십시오.
이미지가 사이트의 루트 폴더에없는 경우 롤오버를 만들 때 이미지가 사이트로 복사됩니다. 5. 롤오버 이미지 상자에서 방문자가 첫 번째 이미지 위로 커서를 이동할 때 보이게하려는 이미지를 입력하십시오.
다시, 찾아보기 단추를 사용하여 이미지를 찾아 선택할 수 있습니다. 6. 페이지가 처음로드 될 때 모든 롤오버 이미지를 브라우저의 캐시에로드하려면 [롤오버 이미지 미리로드] 확인란을 선택합니다.이 단계를 수행하지 않으면 원래 이미지 위에 마우스를 올릴 때까지 두 번째 이미지가 다운로드되지 않으므로 방문자가 지연 될 수 있습니다.
7. 클릭 할 때 URL로 이동 상자에 웹 주소를 입력하거나 찾아보기를 클릭하여 사이트에서 링크하려는 다른 페이지를 찾으십시오.
URL을 지정하지 않으면 Dreamweaver에서 자동으로 # 기호를 자리 표시 자로 삽입합니다. 8. 확인을 클릭하십시오.
이미지가 자동으로 롤오버로 설정됩니다. 9. 브라우저에서 작업을 미리보고 롤오버 작동 방식을 테스트하려면 작업 영역 상단에있는 지구 모양 아이콘을 클릭하십시오.
