ลิงก์แบบไดนามิก ลิงก์ที่เปิดใช้งานด้วยเมาส์

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

ข้อมูลการจับเมาส์ที่ดีขึ้น

Mouseover เป็นหนึ่งในวิธีการแบบไดนามิกที่ใช้กันอย่างแพร่หลายและมีประสิทธิภาพมากที่สุดบนเว็บ และเหตุผลที่ดีก็คือ ช่วยให้ผู้ดูได้รับผลตอบรับโดยตรงที่ชัดเจน ลองคิดดู: เลื่อนเมาส์ไปเหนือลิงก์ไฮเปอร์เท็กซ์ แล้วลิงก์นั้นจะถูกเน้น เปลี่ยนสี หรือเปลี่ยนเป็นพูดว่า "ฉันเป็นลิงก์!"

นี่ไม่ได้หมายความว่าลิงก์เมาส์โอเวอร์ทั้งหมดที่สร้างขึ้นจะเหมือนกัน พวกเขาแตกต่างกัน สถานการณ์ที่เลวร้ายที่สุดคือมีการใช้ลิงก์เมาส์โอเวอร์ในภาษา Java หรือรูปแบบพิเศษ เช่น รูปแบบ Shockwave ของ Macromedia ซึ่งผู้ชมต้องติดตั้งปลั๊กอินเพื่อดูเอฟเฟกต์ สถานการณ์กรณีที่ดีที่สุดคือลิงก์เมาส์โอเวอร์เขียนด้วย JavaScript ที่เบราว์เซอร์ทั้งหมดรองรับ แต่ถึงแม้จะใช้งานด้วย JavaScript แต่ก็ยังต้องการให้เบราว์เซอร์โหลดภาพสองภาพ ภาพหนึ่งสำหรับความสว่างสูงและอีกภาพหนึ่งสำหรับการแสดงผลปกติ ซึ่งเป็นการเปลืองการใช้แบนด์วิธ

ตอนนี้เรามาดู DHTML ซึ่งสร้างลิงก์เมาส์โอเวอร์โดยไม่ต้องโหลดรูปภาพใดๆ สิ่งเดียวที่ควรทราบก็คือเบราว์เซอร์จะต้องเปิดโค้ด DHTML เพื่อเปิดออบเจ็กต์เว็บเพจ เช่น ลิงก์และสไตล์ เพื่อให้ Document Object Model (DOM) อธิบายได้ กล่าวอีกนัยหนึ่ง ขณะนี้โค้ดใช้งานได้เฉพาะใน Internet Explorer 4.0 เท่านั้น อย่างไรก็ตาม เบราว์เซอร์รุ่นที่ห้าของ Netscape (คาดว่าจะเปิดตัวภายในสิ้นปีนี้) จะรองรับ DOM อย่างสมบูรณ์ นอกจากนี้ ไม่ต้องกังวลเกี่ยวกับการใช้ลิงก์เมาส์โอเวอร์ในเบราว์เซอร์ที่เข้ากันไม่ได้ เบราว์เซอร์ที่ไม่สนับสนุนโค้ด DHTML ในหน้าเว็บจะเพิกเฉยต่อลิงก์เหล่านั้น (สำหรับรายละเอียด โปรดดูส่วน "ให้ DOM ทำงานบนเว็บไซต์ของคุณ" ในภายหลัง)

โค้ด

ธรรมดาแบ่งออกเป็นสองส่วนหลัก: ส่วนหนึ่งคือพื้นที่เนื้อหา และอีกส่วนหนึ่งคือพื้นที่การนำทาง ลิงก์เมาส์โอเวอร์มักจะปรากฏในพื้นที่การนำทาง โดยทั่วไปแล้ว ปุ่มที่ไฮไลต์จะใช้เพื่อนำผู้ชมไปยังส่วนต่างๆ ของไซต์ เช่น กราฟิกของไซต์หรือหน้าคำติชม แทนที่จะใช้ปุ่ม เราจะเปลี่ยนลิงก์ข้อความธรรมดาให้เป็นลิงก์เมาส์โอเวอร์เชิงโต้ตอบ วิธีการคือ: ขั้นแรกให้แทรกลิงก์ข้อความธรรมดาลงในเอกสาร เช่น:

< a href="contact_us.html">

ติดต่อเรา

ขั้นตอนที่สองเปลี่ยนสีของลิงก์ข้อความเมื่อเลื่อนเมาส์ไปเหนือลิงก์นั้น โปรแกรมสคริปต์ DHTML เป็นดังนี้:

function rollon( ){

if (window.event.

srcElement.tagName == "A"){

window.event.srcElement.

style.color = "red";}

}

function rolloff( ){

if ( window.event.srcElement.tagName

== "A"){

window.event.srcElement.style.color

= "";}

}

document.onmouseover = rollon;

document.onmouseout

= rolloff;

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

โปรแกรมสคริปต์ที่เขียนไว้ก่อนหน้านี้กำหนดฟังก์ชันหลักสองฟังก์ชัน: Rollon (เปิดใช้งานเมื่อเลื่อนเมาส์ไปเหนือลิงก์) และ Rolloff (เปิดใช้งานเมื่อเมาส์เคลื่อนออกจากลิงก์) แต่ละฟังก์ชันเริ่มต้นด้วยคำสั่ง 'if' ง่ายๆ ซึ่งหมายความว่า ทุกครั้งที่มีการเรียกเหตุการณ์ onmouseover ในเอกสารเว็บ ฟังก์ชัน rollon จะแจ้งให้เบราว์เซอร์ทราบว่าวัตถุที่เปิดใช้งานเหตุการณ์นั้นเป็นแท็ก Anchor หรือไม่ (window.event srcElement.tagName == "ก") หากเป็นเช่นนั้น สคริปต์จะใช้รูปแบบพิเศษ (สีแดงในกรณีนี้) กับลิงก์ ในทำนองเดียวกัน เมื่อเหตุการณ์ onmouseout เกิดขึ้น ฟังก์ชัน rolloff จะคืนสไตล์ให้เป็นสีเริ่มต้น (color="")

สองบรรทัดสุดท้ายของสคริปต์นี้แจ้งให้เบราว์เซอร์เรียกใช้ฟังก์ชัน rollon เมื่อเกิดเหตุการณ์ onmouseover และให้ปิดฟังก์ชันลิงก์เมาส์โอเวอร์ (mouseover) เมื่อเกิดเหตุการณ์ onmouseout

รับผลลัพธ์สองเท่าโดยใช้ความพยายามเพียงครึ่งเดียว

Internet Explorer 4.0 ช่วยให้คุณใช้ DHTML เพื่อควบคุมทุกวัตถุในเอกสาร โดยธรรมชาติแล้ว คุณสามารถบรรลุฟังก์ชันต่างๆ ได้มากขึ้น นอกเหนือจากการเปลี่ยนสีของแท็ก Anchor ในความเป็นจริง คุณสามารถใช้องค์ประกอบใดๆ จาก Cascading Style Sheets (CSS ซึ่งเป็นข้อกำหนดการจัดรูปแบบมาตรฐาน W3C) กับออบเจ็กต์หรือส่วนประกอบทรัพยากรประเภทใดก็ได้ ตัวอย่างเช่น นอกจากการทำให้ลิงก์ปรากฏเป็นสีแดงแล้ว คุณยังสามารถเพิ่มหรือลบการขีดเส้นใต้ออกจากลิงก์ได้อีกด้วย

หากต้องการลบการขีดเส้นใต้ เพียงแทรกแอตทริบิวต์สไตล์ต่อไปนี้ลงในแท็กจุดยึดทั้งหมดบนหน้าเว็บ:

style = "text- decoration: none"

คำสั่งนี้จะลบการขีดเส้นใต้ออกจากลิงก์ ทำให้ปรากฏเป็นสถานะปกติหรือเป็นค่าเริ่มต้น (ตามค่าเริ่มต้น Internet Explorer 4.0 และ Navigator 4.0 จะขีดเส้นใต้ลิงก์ข้อความทั้งหมด คำสั่งข้างต้นจะเปลี่ยนสถานะเริ่มต้นของลิงก์เหล่านี้ทีละรายการ)

จากนั้น ให้เพิ่มคำสั่งต่อไปนี้ด้านล่างฟังก์ชัน rollon:

window.event.style

textDecoration = "ขีดเส้นใต้";

ตอนนี้ ทรัพยากรสำหรับเหตุการณ์การวางเมาส์ที่คุณกำหนดไว้จะเปลี่ยนเป็นสีแดงและมีลักษณะขีดเส้นใต้ ควรสังเกตว่าสามารถลบขีดเส้นใต้ได้โดยการเพิ่มคำสั่งต่อไปนี้ในฟังก์ชัน rolloff:

window.event.srcElement.style

.

textDecoration = "none";

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

-------------------

Edward Grossman เป็นโปรดิวเซอร์ของเว็บไซต์ www.windowspro.com เขามีปริญญาเอกด้านปรัชญาและมีส่วนร่วมในการวิจัยในสาขา ปรัชญาก่อนการเกิดขึ้นของเว็บ อีเมลของเขา: [email protected]

เพียงเพิ่มโค้ดประมาณ 15 บรรทัดที่ 1 ส่วนหัวของเอกสาร และคุณสามารถเปลี่ยน 2 ลิงก์ข้อความปกติบนเว็บเพจใดก็ได้ให้เป็น 3 ลิงก์ที่เปิดใช้งานด้วยเมาส์แบบโต้ตอบ (วางเมาส์เหนือ)

------------

ทำให้ DOM ทำงานบนเว็บไซต์ของคุณ

ด้วย Dynamic HTML (DHTML) การเขียนโปรแกรมเชิงวัตถุไม่ใช่สิ่งที่มีเพียงผู้เชี่ยวชาญด้านการเขียนโปรแกรมเท่านั้นที่สามารถทำได้อีกต่อไป แต่กำลังกลายเป็นพื้นที่ของทุกคนที่เคยมีประสบการณ์กับเว็บ ผู้สร้างเพจสามารถมีส่วนร่วมได้ ซึ่งส่วนใหญ่ต้องขอบคุณ Document Object Model หรือ DOM ข้อกำหนด W3C นี้ถือว่าทุกองค์ประกอบในเอกสารเป็นออบเจ็กต์ ไม่ว่าจะเป็นเอกสาร สไตล์ หรือลิงก์ สคริปต์สามารถแก้ไขออบเจ็กต์เหล่านี้ตามการป้อนข้อมูลของผู้ใช้ ประเภทของเบราว์เซอร์ หรือตัวแปรอื่นๆ มากมาย รวมถึงการเปลี่ยนขนาด การเปลี่ยนสไตล์ หรือการอัพเดตลิงก์

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

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับ DOM กรุณาเยี่ยมชมเว็บไซต์: www.w3.org/dom , www.microsoft.com/workshop/author/dhtml/ และ Developer.netscape.com/docs/manuals/communicator/dynhtml/

สำหรับตัวอย่างแอปพลิเคชัน DHTML โปรดไปที่: www.windowspro.com และ www.projectcool.com (ลองลากดาวเสาร์ไปรอบๆ) และเรียกดู "ดูแหล่งที่มา"

ใน IE 4.0 คุณสามารถใช้ Dynamic HTML เพื่อควบคุมออบเจ็กต์ได้หลายสิบรายการ ดูรายการโดยละเอียดได้ที่ www.microsoft.com