생산 원리
스왑 이미지를 만드는 원리는 Dreamweaver의 비헤이비어 패널에 적용되는 스왑 이미지 도구입니다. 특정 버튼 이미지 위에 마우스를 올리면 버튼 자체가 이미지 교환(노란색 텍스트가 있는 그림으로 교환)을 실현하고, 동시에 포인터 이미지 교환(다음을 가리키는 포인터로 교환)을 설계하도록 설정합니다. 현재 버튼 포인터 그림) 위의 효과를 얻으려면
^-^: 사실 웹페이지에 있는 어떤 것들은 매우 신비로워 보이지만, 그 근본에는 단지 몇 장의 사진이나 몇 개의 레이어만 바꾸는 단순한 변화일 뿐입니다.
재료 제작
여기서 설명하는 것은 7개의 버튼 그림을 뒤집는 것입니다. 따라서 표시된 효과를 얻으려면 총 21개의 그림, 즉 14개의 버튼 그림과 7개의 포인터 그림을 만들어야 합니다. 그중 7개의 전면 버튼 그림은 각각 B1-1~B1-7로 명명되고, 7개의 배경 단추 그림은 각각 B2-1~B2-7로 명명되며, 7개의 포인터 그림은 각각 Z1~Z7로 명명되며 해당 포인터는 버튼을 가리킵니다. 하나부터 일곱까지. Fireworks와 같은 이미지 생성 소프트웨어를 사용하여 버튼 이미지를 생성할 수 있습니다.
준비 방법
1. 웹페이지 파일을 생성합니다.
2. 7×2 테이블을 삽입하고 테이블의 왼쪽 열을 병합하여 포인터 그림을 삽입합니다. 오른쪽의 7개 테이블은 버튼 이미지를 삽입하는 데 사용됩니다.
3. 왼쪽 테이블에 첫 번째 포인터 그림 Z1을 삽입하고 오른쪽 셀의 7개 행에 파란색 전면 버튼 B1-1~B1-7을 삽입합니다(효과는 그림 2에 표시됨).
4. "창(Windows) → 동작"을 클릭하여 동작 패널을 불러옵니다.
5. 동작을 설정할 첫 번째 그림을 선택하십시오. 여기에 "Guiding Idea"라고 쓰여진 버튼 그림이 있습니다. 그림 B1-1입니다.
6. 더하기 버튼을 클릭한 후 팝업 메뉴에서 이미지 교체를 선택하면 이미지 교체 대화 상자가 나타납니다. 설정의 주요 부분은 이 대화 상자에서 수행됩니다.
7. 대화 상자에서 찾아보기 버튼을 클릭한 다음 버튼 이미지를 뒤집을 대상 이미지를 선택합니다. 이 경우 노란색 텍스트가 있는 버튼 이미지, 즉 이미지 B2-1입니다. 그런 다음 확인을 클릭합니다.
8. 6단계를 반복하고 이미지의 텍스트 상자에서 포인터 그림 Z1을 선택한 다음 찾아보기 버튼을 다시 클릭하여 첫 번째 포인터 파일인 Z1로 전환합니다. 확인을 클릭하세요. 위의 작업을 완료한 후 동작 패널에 표시되는 결과는 그림 3과 같습니다.
9. 두 번째 버튼 그림 B1-2를 선택하고 위의 방법에 따라 버튼 B2-2로 뒤집은 다음 포인터 그림을 두 번째 포인터 그림 Z2로 뒤집습니다.
10. 위의 단계에 따라 다음 5개의 사진을 이미지 교환 동작으로 설정합니다.
11. F12를 눌러 미리보기하고 각 사진 위에 마우스 포인터를 올려놓으면 어떨까요?