หลักการผลิต
หลักการของการสร้างภาพสลับคือเครื่องมือสลับภาพที่ใช้กับแผงลักษณะการทำงานใน Dreamweaver ตั้งค่าเพื่อให้เมื่อเมาส์วางเมาส์เหนือรูปภาพของปุ่มใดรูปหนึ่ง ปล่อยให้ปุ่มนั้นเกิดการแลกเปลี่ยนรูปภาพ (เปลี่ยนเป็นรูปภาพที่มีข้อความสีเหลือง) และในขณะเดียวกันก็ออกแบบการแลกเปลี่ยนรูปภาพของตัวชี้ (เปลี่ยนเป็นตัวชี้ที่ชี้ไปที่ รูปภาพตัวชี้ปุ่มปัจจุบัน) เพื่อให้บรรลุผลข้างต้น
^-^: จริงๆ แล้วบางสิ่งบนหน้าเว็บดูเหมือนจะลึกลับมาก แต่โดยพื้นฐานแล้วเป็นเพียงการเปลี่ยนรูปภาพเพียงไม่กี่ภาพหรือสองสามเลเยอร์เท่านั้น
วัสดุหัตถกรรม
สิ่งที่แสดงให้เห็นที่นี่คือการพลิกรูปภาพ 7 ปุ่ม ดังนั้นเราจำเป็นต้องสร้างรูปภาพทั้งหมด 21 รูปภาพ รูปภาพ 14 ปุ่ม และรูปภาพตัวชี้ 7 รูป เพื่อให้ได้เอฟเฟกต์ที่แสดง ในบรรดารูปภาพปุ่มด้านหน้า 7 รูปมีชื่อว่า B1-1~B1-7 ตามลำดับ รูปภาพปุ่มพื้นหลัง 7 รูปมีชื่อว่า B2-1~B2-7 ตามลำดับ และรูปภาพตัวชี้ 7 รูปมีชื่อว่า Z1~Z7 ตามลำดับ และตัวชี้ชี้ไปที่ปุ่ม หนึ่งถึงเจ็ด คุณสามารถใช้ซอฟต์แวร์สร้างภาพ เช่น ดอกไม้ไฟ เพื่อสร้างภาพปุ่มได้
วิธีการเตรียม
1. สร้างไฟล์เว็บเพจ
2. แทรกตาราง 7×2 และรวมคอลัมน์ด้านซ้ายของตารางเพื่อแทรกรูปภาพตัวชี้ ตารางเจ็ดตารางทางด้านขวาใช้เพื่อแทรกรูปภาพของปุ่ม
3. ใส่รูปภาพตัวชี้แรก Z1 ในตารางด้านซ้าย และใส่ปุ่มด้านหน้าสีน้ำเงิน B1-1~B1-7 ในเซลล์ 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 เพื่อดูตัวอย่างและวางตัวชี้เมาส์ไว้เหนือแต่ละภาพ รู้สึกดีใช่ไหม?