แหล่งความรู้หมวด  คอมพิวเตอร์ >>โปรแกรมมิ่ง Web Design >>Dreamweaver
ลงประกาศฟรี โฆษณาฟรี ลงโฆษณาฟรี โปรโมทเว็บฟร PHP programming[79]
ลงประกาศฟรี โฆษณาฟรี ลงโฆษณาฟรี โปรโมทเว็บฟร Adobe Photoshop[26]
ลงประกาศฟรี โฆษณาฟรี ลงโฆษณาฟรี โปรโมทเว็บฟร Adobe Flash[19]
ลงประกาศฟรี โฆษณาฟรี ลงโฆษณาฟรี โปรโมทเว็บฟร Dreamweaver[13]
ลงประกาศฟรี โฆษณาฟรี ลงโฆษณาฟรี โปรโมทเว็บฟร Ajax Scripts,Java Script,โค๊ดแต่งเว็บไซต์[29]
ลงประกาศฟรี โฆษณาฟรี ลงโฆษณาฟรี โปรโมทเว็บฟร web design[9]

การทำ Show-Hide Layers Effect

โดย  นิรนาม
การทำ Show-Hide Layers Effect

เครื่องมือที่ใช้สร้าง คือ Layer และ Behaviors

1. ใส่ link ให้เมนู ข้อความ หรือรูปภาพที่จะทำ Show-Hide Layer
การใส่ link ให้ใส่เครื่องหมาย # ในช่อง Link ของ Property Inspector
เครื่องหมาย # นี้เป็นเหมือน Link หลอกๆ คือไม่สามารถคลิ๊กไปที่ไหนได้
ทดลองใช้ mouse มาชี้ที่ Menu 1

 

2. สร้าง Layer ในตำแหน่งที่คุณต้องการให้ปรากฎในหน้า Webpage

3. ทำการซ่อน Layer ด้วยการคลิ๊กที่ Layer ที่สร้าง

Property Inspector จะเปลี่ยนเป็น Layer Inspector ตรงช่อง Vis ให้เปลี่ยนจาก default เป็น hidden

4. เลือก Link ที่ต้องการจะใส่คำสั่ง Show-hide Layer

5. เปิด Behaviors Palette (Window>Behaviors)
คลิ๊กที่ แล้วเลือกคำสั่ง Show-Hide Layers

6. ใน Show-Hide Layer Property เลือก Layer ที่ต้องการให้ Show แล้วคลิ๊กปุ่ม Show กด OK

7. ใน Behavior Palette จะปรากฎ Events เป็น onClick ให้เปลี่ยนเป็น onMouseOver แทน

8. คลิ๊กที่ ใน Behaviors เพื่อเลือกคำสั่ง Show-Hide Layer อีกครั้ง
ใน Show-Hide Layer Property ให้เลือก Layer เดิมในข้อ 6 แล้วคลิ๊กปุ่ม hide กด OK

ใน Behavior Palette จะปรากฎ Events เป็น onClick ให้เปลี่ยนเป็น onMouseOut

9. Save แล้ว Test ใน Browser

10. ทำซ้ำตามขั้นตอน 1 - 8 กับ link อื่นที่ต้องการทำ Show-Hide Layers

ที่มา http://sleepydesign.tripod.com/show.html

เมื่อ 31 สิงหาคม 2551 
แสดงความคิดเห็น
ชื่อ
รายละเอียด
  
***กรอกรหัสที่เห็นในช่องข้างบนครับ
 
 
 
 
© 2009 Thaicenterway.com