Download to read offline
![13 3.7 link[ใบความรู้]](https://cdn.slidesharecdn.com/ss_thumbnails/13-3-140902033605-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
หน่วยที่ 6
- 1.
- 2. เว็บเพจ จำนวนนับล้ำนหน้ำที่พบในอินเทอร์เน็ต จะไม่มีประโยชน์เลยหำกกำรเชื่อมโยงถึงโดยกำรลิงก์ซึ่งเป็นสิ่งที่ช่วยให้ผู้ใช้ สำมำรถท่องอินเทอร์เน็ตได้โดยกำรคลิก เพื่อไปสู่หน้ำเว็บเพจต่ำงๆ กำรใช้ลิงก์นี้เอง ทำให้เว็บเพจแตกต่ำงจำกเอกสำรธรรมดำ เพรำะมันทำให้เนื้อหำในเว็บเพจสำมำรถตอบสนองผู้ใช้ได้โดยที่ผู้ใช้ไม่ต้องอ่ำนเนื้อหำทั้งหมดในเว็บแต่ละหน้ำ แต่สำมำรถคลิก เพื่อเปิดดุเฉพำะเว็บเพจที่สนใจ ในบทนี้จะกล่ำวถึงกำรสร้ำงลิงก์ รูปแบบต่ำงๆ เพื่อเชื่อมโยงข้อมูลในเว็บเพจเข้ำด้วยกัน
- 3. การสร้างลิงก์ <a> ลิงก์สำมำรถเชื่อมโยงข้อมูลได้3 วิธีคือ .กำรเชื่อมโยงข้อมูลภำยในหน้ำเว็บเพจเดียวกัน .กำรเชื่อมโยงข้อมูลในหน้ำเว็บเพจหน้ำอื่น .กำรเชื่อมโยงข้อมูลในหน้ำเว็บไซต์อื่น การเชื่อมโยงข้อมูลภายในเว็บหน้าเดียวกัน หำกเรำมีข้อมูลภำยในเว็บเดียวกันที่ต้องกำรเชื่อมโยง โดยเมื่อมีกำรคลิกที่ลิงก์ให้เลื่อนขึ้นบนหรือลงล่ำงไปที่ตำแหน่งข้อมูลนั้น อยู่ ให้เรำใช้คำสั่ง การเชื่อมโยงข้อมูลในเว็บเพจหน้าอื่น แต่ยังอยู่ภายในเว็บไซต์เดียวกัน เรำสำมำรถเชื่อมโยงเว็บเพจของเรำกับเว็บเพจที่อยู่หน้ำอื่นที่อยู่ในเว็บไซตทเดียวกัน เช่น ถ้ำเรำมีเว็บเพจอยู่ 4 หน้ำที่ต้องกำร ให้มีกำรเชื่อมโยงถึงกัน การเชื่อมโยงข้อมูลในเว็บไซต์อื่น เรำสำมำรถเชื่อมโยงข้อมูลกับเว็บไซต์อื่นได้โดยกำรระบุ URL ของเว็บเพจที่เรำต้องกำรแท็ก <a href…>
- 4. ตัวอย่างการเชื่อมโยงเว็บเพจหน้าอื่น ตัวอย่ำงต่อไปนี้เป็นกำรใช้ลิงก์เชื่อมโยงข้อมูลในเว็บเพจหน้ำนี้ โดยมีเว็บเพจหน้ำเริ่มต้นคือ home.htmlไปยังเว็บเพจอื่นดังนี้ . เว็บเพจ gimp.html ในไดเรกทอรี webpage ที่เป็นไดเรกทอรีพ่อของไดเรกทอรี project ที่เว็บเพจ home.html อำศัยอยู่ . เว็บเพจ maya.html ในไดเรกทอรีเดียวกับเว็บเพจ home.html
- 5. ทาความเข้าใจกับ Relative PathNames ในตัวอย่ำงกำหนดให้เว็บเพจ home.thml เป็นเว็บเพจเริ่มต้น หำกเรำต้องกำรเชื่อมโยงจำกเว็บเพจเริ่มต้นไปยังเว็บเพจ maya.html ซึ่งเป็นเว็บเพจที่อยู่ในไดเรกทอรีเดียวกัน สำมำรถเชื่อมโยงได้โดยใช้แท็ก <a href…> โดยพิมพ์ชื่อของเว็บเพจที่ต้องกำรได้เลย เช่น ถ้ำหำกเรำต้องกำรเชื่อมโยงจำกเว็บเพจเริ่มต้นไปยัง เว็บเพจที่อยู่ในไดเรกทอรีที่ต่ำกว่ำในที่นี้คือ maya.html ดังรูป เรำสำมำรถใช้แท็ก <a href…> แล้วอ้ำงอิงตำแหน่งของ เว็บเพจปลำยทำงจำกเว็บเพจเริ่มต้นได้เช่น
- 9. กาหนดสีของลิงก์ โดยปกติลิงก์ที่แสดงในเว็บเพจใช้ข้อควำมขีดเส้นใต้ที่มีสีแตกต่ำงจำกข้อควำมธรรมดำ เพื่อให้ผู้ใช้สังเกตได้ง่ำย สีของลิงก์จะมี ควำมแตกต่ำงไปตำมสถำนะ .สีของลิงก์ที่ยังไม่ได้ถูกคลิก . สีของลิงก์ที่ถูกคลิกไปแล้ว . สีของลิงก์ตอนถูกคลิก เพื่อป้องกันไม่ให้สีของลิงก์กลืนกับสีของฉำกพื้นหลัง เรำสำมำรถกำหนดสีของลิงก์ในสถำนะต่ำงๆได้ดังนี้
- 10. การทา lmage map ในหัวข้อที่ผ่ำนมำเรำใช้ภำพมำทำเป็นลิงก์ซึ่งผลลัพธ์คือพื้นที่ทั้งภำพจะเป็นลิงก์ทั้งหมดแต่กำรกำหนดพื้นที่ในภำพบำงส่วน หรือ ทั้งหมดมำทำเป็นลิงก์ โดยปกติ ภำพหนึ่งจะสำมำรถเชื่อมโยงไปได้แค่ที่เดียวเท่ำนั้น แต่กำรใช้สร้ำงพื้นที่ย่อยเรียกว่ำ จะทำให้ภำพสำมำรถลิงก์ไปยัง หลำยๆ ที่ขึ้นอยู่กับผู้ใช้คลิกลิงก์ไปพื้นที่ใด ขั้นที่ 1 กำหนดพื้นที่บนรูปเพื่อให้ทำลิงก์ <ara> ขั้นที่ 2 กำรกำหนดแม็พ <map> แม็พ ก็คือกำรกำหนดพื้นที่หลำยๆ พื้นที่ไว้ภำยในแม็พ เพื่อจะนำไปใช้กับรูปภำพได้สะดวก โดยรูปภำพเมื่อติดต่อกับแม็พ ก็ จะได้กำหนดพื้นที่ทั้งหมดที่อยู่ในแม็พนั้นไป ขั้นที่ 3 นำแม็พ map มำใช้งำนกับรุป เมื่อเรำกำหนดพื้นที่ที่จะนำมำทำเป็นลิงก์เรียบร้อยแล้ว จำกนั้นสร้ำงแท็ก ของพื้นที่ทังหมด สุดท้ำยนำแม็พที่สร้ำงไว้ลงในรูป
- 11. สร้างลิงก์แบบ Rollover ในส่วนนี้เรำจะสร้ำงลิงก์ให้กับรูปภำพ ดดยที่จะเพิ่มลุกเล่นให้กับภำพดดยเมื่อใดก็ตำมโดยเมื่อใดก้ตำมที่เรำนำเมำส์ไปวำงที่ รูป ภำพก็จะเปลี่ยนไปเป็นอีกรูปหนึ่ง และเมื่อใดก้ตำมที่เรำนำเมำส์ออกจำกรูป ภำพนั้นก็จะกลับเป็นรูปเดิม เหตุกำรณ์เช่นนี้เรำ เรียกว่ำ Rollover และขั้นตอนกำรทำงำนตรงนี้ก็ง่ำยมำก คือเรำต้องเตรียมรูปภำพให้พร้อมในกำรทำงำน 2 รูป และที่สำคัญต้อง เขียนคำสั่งของScript เพิ่มเติม ซึ่งสิ่งที่เรำจะเขียน หรือคำสั่งตอบสองเหตุกำรณ์โดยที่คำสั่งเหล่ำนี้สำมำรถแท็กไปกับ html ได้เลย ส่วนวีกำรทำงำนของคำสั่งตอบสนองเหตุกำรณ์ก็คือ คำสั่งเหล่ำนี้จะทำงำนได้ก็ต้องเกิดเหตุกำรณ์ใดเหตุกำรณ์หนึ่งที่ผู้ใช้ได้ทำ กับเครื่องคอมพิวเตอร์ของเรำ ตอนนี้เรำรู้แล้วจะใช้เหตุกำรณ์เป็นตัวกระตุ้นให้คำสั่งเขียนนั้นเริ่มกำรทำงำน ทีนี่เรำมำดูในส่วนของคำสั่ง ซึ่งส่วนของคำสั่งมีผู้กระทำตำมคำสั่งในที่นี้รูปภำพจะเป็นตัวถุกระทำ ดังนั้นเรำจึงต้องตั้งชื่อให้กับรุปภำพนั้นก่อน โดยใช้แอตทริบิวต์ มีกำรทำงำนดังนี้
- 12. สร้ำงเหตุกำรณ์ ommouseover โค้ดส่วนนี้จะเป็นโค้ดที่บอกว่ำรุปจะเปลี่ยนไปเป็นอีกรูปหนึ่ง เมื่อเรำนำเมำส์ไปวำงเหนือรูปที่เป็นลิงก์นั้น สร้ำงเหตุกำรณ์onmouseout จำกโค้ดที่ผ่ำนมำ เรำจะเห็นได้ว่ำเมื่อเรำนำเมำส์ไปคลิกที่รูปจะทำให้เกิดกำรเปลี่ยนรูปขึ้นแต่ปัญหำที่เกิดขึ้น จะทำได้อย่ำงไร รูปเก่ำนั้นกลับคืนมำ เพรำะว่ำตัวอย่ำงก่อนเรำทำกำรเปลี่ยนแปลงรูปไป แต่ไม่ได้เปลี่นนรูปกลับที่จะต้องทำคือกำรเปลี่ยนรูปกลับ