เรื่อง :: การสร้าง Layer เมื่อวางเมาส์บนภาพจะปรากฏกรอบรายละเอียด (sontaya12@hotmail.com)

ก่อนอื่นผมต้องขอขอบคุณ webmaster มาก ๆ ครับ เพราะความรู้นี้ผมได้จากการโพสกระทู้เรื่องนี้ ที่เวป
www.dwthai.com และได้ทดสอบและปรับปรุงตามคำแนะนำ จึงได้ดังที่ต้องการ และเพื่อเป็นวิทยาทาน
แก่ผู้อื่น ผมจึงขอให้ทาง webmaster ช่วยนำเนื้อหานี้ลงไว้ที่เวปด้วย

---

:: วิธีการทำ ::

ผู้เขียนขอยกตัวอย่าง ภาพแผนที่จังหวัดนครปฐม ซึ่งมีสถานที่ท่องเที่ยวสวยงามมากมาย
1. แทรกรูปภาพแผนที่ ดังตัวอย่าง (หรือรูปอื่น ๆ ที่คุณต้องการ) และใช้เครื่องมือ Hotspot ตามความเหมาะสม จะเป็นรูปสี่เหลี่ยม , วงกลม หรือ ลายเส้นอิสระ แล้วกำหนดเขตที่เราต้องการ (สังเกตจะเป็นพื้นที่เกิดจากการเลือกพื้นที่จะกลายเป็นสีฟ้า)

2. สร้าง Layer ขึ้นมา 1 อัน กำหนดพื้นที่ หรือตำแหน่งที่จะให้แสดง และแทรกรูปภาพ , ข้อความ
ที่ต้องการแสดงลงยัง Layer นั้น

3. กำหนดชื่อของ Layer นั้นโดยกำหนดที่ Properties ของ layer ตัวอย่าง watraikhing

- Vis เป็น hidden
- Tag เป็น DIV
- กำหนด Bg Color ตามสีที่ชอบ

4. กลับมาที่ แผนที่หลัก โดยคลิกที่ที่เราทำ Hotspot ไว้ และเปิดหน้าต่าง Behaivors ขึ้นมา

- แล้วคลิกที่ เครื่องหมาย บวก จะมีเกิดเมนูดังรูป ให้เลือกหัวข้อ Show Hide Layer
- แล้วจะเกิดหน้าต่างใหม่ ดังรูป ต่อไปนี้

- ที่หน้าต่างนี้จะปรากฏชื่อของ Layer ที่เราทำการสร้างไว้ และให้กำหนดสถานะ แรกเป็น Show โดยคลิกที่ปุ่ม Show
- จะมีคำว่า Show ต่อท้ายของชื่อ Layer นั้น แล้วคลิกที่ปุ่ม OK จะได้ดังรูปต่อไปนี้

- ที่หน้าต่าง Behaviors จะปรากฏ Events ขึ้นมาใหม่ 1 อัน

- และให้ทำตามขั้นตอนที่ 4 อีกครั้งหนึ่ง แต่ครั้งนี้กำหนดสถานะให้เป็น hide
ที่หน้าต่าง Behaviors จะเกิด Events เป็น 2 เหตุการณ์
- กำหนด Events โดยการคลิกที่ปุ่มลูกศร ให้เป็น On MouseOver ในบรรทัดบน ส่วนบรรทัดล่าง กำหนดเป็น On MouseOut (หาก Event ถูกต้องอยู่แล้วไม่ต้องทำการแก้ไขใด ๆ )
- ทดสอบว่าเมื่อวางเมาส์บนข้อความว่า หลวงพ่อวัดไร่ขิง แล้วจะเป็นอย่างไร
โดยการกดปุ่ม F12 เพื่อ preview แล้วดูผล

---

สนธยา
sontaya12@hotmail.com