롤오버 이미지는 사용자 또는 고객이 마우스를 롤오버 할 때 다른 이미지로 변경되는 이미지입니다. 버튼이나 탭과 같은 대화식 느낌을 내기 위해 일반적으로 사용됩니다. 하지만 롤오버 이미지를 만들 수 있습니다.
이 자습서는 Dreamweaver 에서 롤오버 이미지를 만드는 데 도움을주기 위해 작성되었습니다. 다음 버전의 Dreamweaver를 사용하는 사람들이 사용하기위한 것입니다.
- Dreamweaver MX
- Dreamweaver MX 2004
- 드림위버 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
이 자습서의 요구 사항
- 드림위버
위에 나열된 버전 중 하나입니다. - 원본 이미지
이 이미지를 최적화해야합니다. 이렇게하면 페이지가 더 빨리로드되는 데 도움이됩니다. - 롤오버 이미지
이 이미지는 원본 이미지와 동일한 크기 여야합니다. 또한 원본 이미지와 마찬가지로 페이지로드 시간을 높이기 위해 최적화되어야합니다. - 웹 페이지
롤오버 이미지를 넣을 HTML 페이지입니다.
01 / 06
시작하다
- Dreamweaver 시작
- 롤오버를 원하는 웹 페이지를 엽니 다.
02 of 06
롤오버 이미지 이미지 개체 삽입
Dreamweaver에서는 롤오버 이미지를 쉽게 만들 수 있습니다.
- 삽입 메뉴로 이동하여 "이미지 객체"하위 메뉴로 이동하십시오.
- "이미지 롤오버"또는 "롤오버 이미지"를 선택하십시오.
일부 이전 버전의 Dreamweaver에서는 대신 이미지 객체 "대화 형 이미지"를 호출합니다.
03 / 06
Dreamweaver에 사용할 이미지를 지정하십시오
Dreamweaver는 롤오버 이미지를 만들기 위해 입력해야하는 필드가있는 대화 상자를 표시합니다.
이미지 이름
페이지에 고유 한 이미지 이름을 선택하십시오. 모두 한 단어가되어야하지만 숫자, 밑줄 (_) 및 하이픈 (-)을 사용할 수 있습니다. 변경 될 이미지를 식별하는 데 사용됩니다.
원본 이미지
페이지에서 시작할 이미지의 URL 또는 위치입니다. 이 필드에서 상대 경로 또는 절대 경로 URL 을 사용할 수 있습니다. 이것은 귀하의 웹 서버에 존재하거나 페이지와 함께 업로드 할 이미지 여야합니다.
롤오버 이미지
이것은 이미지 위로 마우스를 가져 가면 나타날 이미지입니다. 원본 이미지와 마찬가지로 이미지의 절대 경로 또는 상대 경로 일 수 있으며 페이지를 업로드 할 때 파일이 존재하거나 업로드되어야합니다.
프리로드 롤오버 이미지
이 옵션은 롤오버가보다 빨리 표시되기 때문에 기본적으로 선택됩니다. 롤오버 이미지를 미리로드하도록 선택하면 웹 브라우저는 마우스를 롤오버 할 때까지 캐시에 롤오버 이미지를 저장합니다.
대체 텍스트
좋은 대체 텍스트를 사용하면 이미지에 더 쉽게 액세스 할 수 있습니다. 이미지를 추가 할 때는 항상 대체 텍스트를 사용해야합니다.
클릭하면 URL로 이동
대부분의 사람들은 페이지에서 하나를 볼 때 이미지를 클릭합니다. 따라서 클릭을 할 수있는 습관이 있어야합니다. 이 옵션을 사용하면 이미지를 클릭 할 때 페이지 또는 URL을 지정할 수 있습니다. 그러나이 옵션은 롤오버를 만들 필요가 없습니다.
모든 필드를 완료했으면 확인을 클릭하여 Dreamweaver에서 롤오버 이미지를 만듭니다.
다음 페이지에서는 Dreamweaver에서 쓰는 스크립트를 보여줍니다.
04 / 06
Dreamweaver에서 자바 스크립트 작성
코드 뷰에서 페이지를 열면 Dreamweaver에서 HTML 블록의
에 JavaScript 블록을 삽입하는 것을 볼 수 있습니다. 이 블록에는 마우스가 롤오버 할 때 이미지 스왑을 필요로하는 3 가지 기능과이를 원한다면 프리로드 기능이 포함됩니다.함수 MM_swapImgRestore ()
함수 MM_findObj (n, d)
함수 MM_swapImage ()
함수 MM_preloadImages ()
05/06
Dreamweaver 롤오버 용 HTML을 추가합니다.
Dreamweaver에서 롤오버 이미지를 미리로드하도록 선택한 경우 문서 본문에 HTML 코드가 표시되어 미리로드 스크립트를 호출하여 이미지를 더 빨리로드 할 수 있습니다.
onload = "MM_preloadImages ( 'shasta2.jpg')"
또한 Dreamweaver는 이미지의 모든 코드를 추가하고 링크합니다 (URL이 포함 된 경우). 롤오버 부분은 onmouseover 및 onmouseout 속성으로 앵커 태그에 추가됩니다.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"
06 년 6 월
롤오버 테스트
완전한 기능의 롤오버 이미지를보고 Shasta의 마음에 무엇이 있는지 알아보십시오.