วิธีสร้างภาพแบบโรลโอเวอร์ใน Dreamweaver

ภาพแบบโรลโอเวอร์เป็นภาพที่เปลี่ยนเป็นรูปภาพอื่นเมื่อคุณหรือลูกค้าม้วนเมาส์ เหล่านี้มักใช้เพื่อสร้างความรู้สึกแบบโต้ตอบเช่นปุ่มหรือแท็บ แต่คุณสามารถสร้างภาพแบบโรลโอเวอร์ได้จากทุกสิ่ง

บทแนะนำนี้ได้รับการออกแบบมาเพื่อช่วยให้คุณสร้างภาพแบบโรลโอเวอร์ใน Dreamweaver มีไว้สำหรับผู้ที่ใช้ Dreamweaver เวอร์ชันต่อไปนี้:

• Dreamweaver MX
• Dreamweaver MX 2004
• Dreamweaver 8
• Dreamweaver CS3
• Dreamweaver CS4
• Dreamweaver CS5
• Dreamweaver CS6

ข้อกำหนดสำหรับบทแนะนำนี้

• Dreamweaver
  หนึ่งในเวอร์ชันที่ระบุไว้ข้างต้น
• ภาพต้นฉบับ
  ตรวจสอบให้แน่ใจว่าได้เพิ่มประสิทธิภาพของรูปภาพนี้ วิธีนี้จะช่วยให้หน้าเว็บของคุณโหลดได้เร็วขึ้น
• ภาพแบบโรลโอเวอร์
  ภาพนี้ควรเป็นขนาดเดียวกับภาพต้นฉบับ และเช่นเดียวกับภาพต้นฉบับควรปรับให้เหมาะสมเพื่อช่วยในการโหลดหน้าเว็บ
• หน้าเว็บ
  นี่คือหน้า HTML ที่คุณจะวางภาพแบบโรลโอเวอร์ของคุณ

01 จาก 06

เริ่ม

1. เริ่มต้น Dreamweaver
2. เปิดหน้าเว็บที่คุณต้องการวางเมาส์

02 จาก 06

แทรกภาพรูปภาพแบบโรลโอเวอร์

Dreamweaver ทำให้ง่ายต่อการสร้างภาพแบบโรลโอเวอร์

1. ไปที่เมนูแทรกและลงไปที่เมนูย่อย "ภาพวัตถุ"
2. เลือก "การวางภาพภาพ" หรือ "ภาพแบบโรลโอเวอร์"

Dreamweaver เวอร์ชันเก่าบางรุ่นจะเรียกออบเจกต์ภาพ "Interactive Images" แทน

03 จาก 06

แจ้งให้ Dreamweaver ทราบว่าจะใช้ภาพอะไร

Dreamweaver จะเปิดกล่องโต้ตอบพร้อมช่องที่คุณต้องกรอกเพื่อสร้างภาพแบบโรลโอเวอร์ของคุณ

ชื่อรูปภาพ

เลือกชื่อภาพที่ไม่ซ้ำกันสำหรับเพจ ควรเป็นคำทั้งหมดหนึ่งคำ แต่คุณสามารถใช้ตัวเลขเครื่องหมายขีดล่าง (_) และเครื่องหมายยัติภังค์ (-) ซึ่งจะใช้เพื่อระบุภาพที่จะเปลี่ยนแปลง

ภาพต้นฉบับ

นี่คือ URL หรือตำแหน่งของภาพที่จะเริ่มต้นในหน้า คุณสามารถใช้ URL เส้นทางญาติหรือเส้นทางสัมบูรณ์ ในฟิลด์นี้ได้ นี่ควรเป็นภาพที่มีอยู่ในเว็บเซิร์ฟเวอร์ของคุณหรือคุณจะอัปโหลดด้วยหน้าเว็บ

ภาพแบบโรลโอเวอร์

นี่คือภาพที่จะปรากฏขึ้นเมื่อคุณเลื่อนเมาส์เหนือรูป เช่นเดียวกับภาพต้นฉบับนี่เป็นเส้นทางที่สมบูรณ์หรือเป็นสัมพัทธ์กับรูปภาพและควรมีอยู่หรือถูกอัปโหลดเมื่อคุณอัปโหลดหน้า

โหลดภาพแบบโรลโอเวอร์ล่วงหน้า

ตัวเลือกนี้ถูกเลือกโดยค่าเริ่มต้นเพราะช่วยให้การวางเมาส์แบบโรลโอเวอร์ปรากฏขึ้นอย่างรวดเร็ว เว็บเบราเซอร์จะจัดเก็บเว็บเพจไว้ในแคชจนกว่าเมาส์จะม้วนตัว

ข้อความสำรอง

ข้อความสำรองที่ดี ทำให้สามารถเข้าถึงรูปภาพของคุณได้มากขึ้น คุณควรใช้ข้อความอื่นแทนเมื่อเพิ่มรูปภาพ

เมื่อคลิกไปที่ URL

คนส่วนใหญ่จะคลิกที่ภาพเมื่อเห็นภาพบนหน้าเว็บ ดังนั้นคุณควรมีนิสัยในการทำให้สามารถคลิกได้ ตัวเลือกนี้ช่วยให้คุณสามารถระบุหน้าเว็บหรือ URL เพื่อนำผู้ดูไปยังเมื่อคลิกที่รูปภาพ แต่ตัวเลือกนี้ไม่จำเป็นต้องสร้างแบบโรลโอเวอร์

เมื่อคุณกรอกข้อมูลในฟิลด์ทั้งหมดแล้วคลิกตกลงเพื่อให้ Dreamweaver สร้างภาพแบบโรลโอเวอร์ของคุณ

หน้าถัดไปแสดงสคริปต์ที่ Dreamweaver เขียน

04 จาก 06

Dreamweaver เขียน JavaScript สำหรับคุณ

หากคุณเปิดหน้าเว็บในมุมมองโค้ดคุณจะเห็นว่า Dreamweaver แทรกบล็อค JavaScript ใน ของเอกสาร HTML ของคุณ บล็อกนี้มี 3 ฟังก์ชันที่คุณต้องมีภาพสลับเมื่อเมาส์ม้วนเหนือพวกเขาและฟังก์ชั่น preload หากคุณเลือกใช้งาน

ฟังก์ชัน MM_swapImgRestore ()
ฟังก์ชัน MM_findObj (n, d)
ฟังก์ชัน MM_swapImage ()
ฟังก์ชัน MM_preloadImages ()

05 จาก 06

Dreamweaver เพิ่ม HTML สำหรับแบบโรลโอเวอร์

หากคุณเลือกที่จะให้ Dreamweaver โหลดภาพแบบโรลโอเวอร์ก่อนหน้านี้คุณจะเห็นโค้ด HTML ในเนื้อหาของเอกสารเพื่อเรียกสคริปต์ preload เพื่อให้ภาพของคุณโหลดเร็วขึ้น

onload = "MM_preloadImages ( 'shasta2.jpg')"

นอกจากนี้ Dreamweaver ยังเพิ่มโค้ดทั้งหมดสำหรับรูปภาพของคุณและลิงก์ (ถ้าคุณรวม URL ไว้ด้วย) ส่วนโรลโอเวอร์จะถูกเพิ่มลงในแท็ก anchor เป็นคุณลักษณะ onmouseover และ onmouseout

onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ( 'Image1', '', 'shasta1.jpg', 1)"

06 จาก 06

ทดสอบ Rollover

ดูภาพแบบโรลโอเวอร์ที่ทำงานได้อย่างสมบูรณ์และเรียนรู้สิ่งที่อยู่ในใจของ Shasta