ตัวอย่างการใช้งาน

ลองดูตัวอย่างที่เมื่อคุณคลิกรูปร่างบางอย่างในรูปเดียว คุณจะไปที่หน้าเว็บต่างๆ ที่อธิบายรูปร่างเหล่านี้ (ลิงก์ไปยังวิกิพีเดีย):

เลือกรูป:

"มีให้เลือก 4 แบบ"

ตามลำดับ สิ่งที่เราทำในตัวอย่างนี้:

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

หากคุณมีปัญหากับงาน ให้ตรวจสอบโค้ดของเพจโดยเปิดตัวอย่างในหน้าต่างแยกต่างหากและศึกษาอย่างรอบคอบ

"ฉันเว้นว่างไว้เพื่อวางลิงก์ไปยังหน้าเว็บต่างๆ ในบางส่วนของมัน ("")

ตอนนี้หากคุณคลิกที่ตัวเลขที่มีคำจารึก หน้าที่ตรงกันจะเปิดขึ้น: โปรไฟล์ ไดอารี่ หรือโพสต์ทั้งหมดจากส่วน "บทเรียน Photoshop" (โปรดทราบ! หลังจากโอนบล็อกไปยัง WordPress และทำใหม่แล้ว ลิงก์ไม่ทำงาน! แต่บทเรียนยังคงมีความเกี่ยวข้อง!)

เพื่อให้รูปภาพทำงานได้ ฉันเขียนโค้ด HTML แบบนี้:

รหัสนี้สามารถแทรกลงในช่องข้อความ (โดยกดปุ่ม "แหล่งที่มา") หรือลงใน epigraph ...

นอกจากนี้ยังมีโพสต์อื่นในหัวข้อ:HTML คืออะไร?รหัส HTML ของภาพวาด", "ลิงก์รูปภาพ" เป็นต้น

1. พิกัด

ในการเขียนรหัสที่ระบุ ฉันจำรูปทรงเรขาคณิตเล็กน้อยได้ :)

ระบบพิกัด: แกน X - จากบนลงล่าง, แกน Y - จากซ้ายไปขวา
ในการกำหนดพิกัดของรูปภาพ คุณต้องตั้งค่า:
- สี่เหลี่ยมจัตุรัส (หรือสี่เหลี่ยมผืนผ้า) ที่มีด้านขนานกับแกน - พิกัดของมุมตรงข้ามสองมุม - X1, Y1 และ X2, Y2
- รูปหลายเหลี่ยม - พิกัดของทุกมุม
- วงกลม - พิกัดของศูนย์กลางและรัศมี

ในกรณีของฉัน ปรากฎว่าเราต้องการพิกัดของจุด A, C - สำหรับลิงก์ "โปรไฟล์" (สี่เหลี่ยมผืนผ้า), จุด D, E, F, G, H - สำหรับลิงก์ "ไดอารี่" (รูปหลายเหลี่ยม), Q และความยาว R - สำหรับลิงค์ " บทเรียน Photoshop" (วงกลม) ตัวเลขทั้งหมดนี้ในโค้ด HTML ที่ด้านบนจะถูกเน้นด้วยสีแดง นอกจากนี้ คุณต้องทราบขนาดของภาพเป็นพิกเซล (สีเขียว)

ไม่จำเป็นต้องมีความแม่นยำเป็นพิเศษดังนั้นคุณสามารถค้นหาพิกัดโดยใช้ "ไม้บรรทัด" ใน Photoshop - เพื่อเรียกมันว่าฉันกด ctrl+r

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

2. รหัส HTML

แผนภูมิการนำทางถูกกำหนดโดยแท็ก

แท็กแผนที่ประกอบด้วยแท็ก ซึ่งกำหนดพื้นที่ทางเรขาคณิตของแผนผังรูปวาดและข้อมูลอ้างอิงที่เกี่ยวข้อง

ฉันคิดออกแล้ว - เพื่อสร้างแผนที่นำทาง คุณต้อง:

— แท็กคำอธิบายรูปภาพ

— แท็กแผนที่

— แท็กพื้นที่

ในกรณีของฉันค่าคือ:

• ความกว้าง= "640"ส่วนสูง= "367"- ขนาดภาพ
• src="https://website/f02c73a3cd94.jpg" — URL ของรูปภาพบนเว็บไซต์
• usemap="# รูปภาพ"— ชื่อเงื่อนไขของภาพแผนที่ (สามารถเป็นอะไรก็ได้)
• ชื่อแผนที่= รูปภาพ- ชื่อการ์ด (อย่างเต็มที่ ตามข้างต้น)

ค่าสำหรับพื้นที่ลิงก์ - href - เป้าหมายของลิงก์ รูปร่าง - รูปร่างของพื้นที่และพิกัด - พิกัด - สอดคล้องกับสามพื้นที่ (พื้นที่) บนรูปภาพ

สี่เหลี่ยมผืนผ้า "โปรไฟล์"

• href="https://website/profile/" — ที่อยู่ของหน้าโปรไฟล์
• รูปร่าง = "rect" - การกำหนดรูปร่าง "สี่เหลี่ยมผืนผ้า"
• coords="235,61,472,117" — พิกัดของจุด A (235,61) และ C (472,117)

รูปหลายเหลี่ยม "ไดอารี่"

• href="https://website/blog" — ที่อยู่ของหน้าไดอารี่
• รูปร่าง = "โพลี" - การกำหนดรูปร่าง "รูปหลายเหลี่ยม"
• coords="235,118,362,118,474,152,457,207,229,146" — พิกัดของมุมของรูปหลายเหลี่ยม: จุด D (235,118), E (362,118), F (474,152), G (457,207) และ H (229,146)

วงกลม "บทเรียน Photoshop"

• href="https://website/showjournal.php?journalid=2447247&keywordid=929323" — URL ของหน้าโพสต์จากส่วน Photoshop Tutorials
• รูปร่าง = "วงกลม" - การกำหนดรูปร่าง "วงกลม"
• coords="551,198,65" — พิกัดวงกลม: ศูนย์กลาง — จุด Q (551,198) และรัศมี — R=65

3. เสร็จสิ้น

แทนที่ค่าที่ได้รับทั้งหมดลงใน "ระบบ" ของรหัส HTML สำหรับแผนที่ภาพการนำทางและได้สิ่งต่อไปนี้:

รหัสนี้เมื่อใช้แล้วจะ "เปลี่ยน" เป็นรูปภาพที่มีพื้นที่เชื่อมโยง

สำหรับการฝึกอบรม มีตัวเลือกที่ง่าย "น้ำหนักเบา" สำหรับการสร้างส่วนลิงก์ - โพสต์ "การฝึกอบรม: พื้นที่ลิงก์ในรูปภาพ"

หากคุณพบข้อผิดพลาด โปรดเน้นข้อความและคลิก Ctrl+Enter.

วลาด แมร์เซวิช

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

ในฝั่งไคลเอ็นต์ แผนที่จะอยู่ในเอกสาร HTML เดียวกันกับลิงก์ไปยังรูปภาพ

เวอร์ชันไคลเอ็นต์ของภาพแผนที่

แอตทริบิวต์ usemap ของแท็กใช้เพื่อระบุว่ารูปภาพเป็นแผนที่ . ค่านี้อ้างอิงถึงคำอธิบายของการกำหนดค่าแผนที่

ตัวอย่างที่ 1: การใช้ Image Map

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

แอตทริบิวต์แท็ก AREA

รูปร่าง

ระบุรูปร่างของฮอตสปอต รูปร่างสามารถอยู่ในรูปของวงกลม (วงกลม) สี่เหลี่ยมผืนผ้า (rect) รูปหลายเหลี่ยม (poly)

อื่น ๆ

เพิ่มข้อความแสดงแทนสำหรับแต่ละภูมิภาค ทำหน้าที่เป็นความคิดเห็นสำหรับลิงก์เท่านั้น เนื่องจากไม่ได้แสดงบนหน้าจอ

พิกัด

ตั้งค่าพิกัดของฮอตสปอต พิกัดจะวัดเป็นพิกเซลจากมุมซ้ายบนของภาพ ซึ่งมีค่าเท่ากับ 0.0 ตัวเลขแรกคือพิกัดแนวนอน ตัวเลขที่สองคือพิกัดแนวตั้ง รายการพิกัดขึ้นอยู่กับรูปร่างของพื้นที่

สำหรับวงกลมจะมีการระบุตัวเลขสามตัว - พิกัดของจุดศูนย์กลางของวงกลมและรัศมี

สำหรับสี่เหลี่ยมผืนผ้า หมายถึงพิกัดของมุมซ้ายบนและมุมขวาล่าง

สำหรับรูปหลายเหลี่ยม จะมีการระบุพิกัดของจุดยอด (รูปที่ 2)

ข้าว. 2. พิกัดจุดสำหรับรูปหลายเหลี่ยม

href

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

ประโยชน์ของแผนที่ภาพ

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

2. การทำงานกับไฟล์เดียวสะดวกกว่า - คุณไม่ต้องกังวลเกี่ยวกับการรวมชิ้นส่วนแต่ละส่วนและสามารถวางรูปภาพในตำแหน่งที่ถูกต้องได้อย่างง่ายดาย

ข้อบกพร่อง

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

2. ด้วยรูปร่างที่ซับซ้อนของพื้นที่ลิงค์ จำนวนโค้ด HTML จึงเพิ่มขึ้น รูปร่างประมาณโดยชุดของส่วนตรงสำหรับแต่ละจุดของส่วนดังกล่าวควรระบุพิกัดสองพิกัดและจำนวนรวมของจุดดังกล่าวอาจมีขนาดค่อนข้างใหญ่ ในความเป็นธรรม ควรสังเกตว่ารูปแบบที่ซับซ้อนเป็นกรณีพิเศษและใช้ค่อนข้างน้อย

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

การใช้งาน

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

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

ทางเลือก

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

การใช้แฟลช

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

การแบ่งภาพ

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

สรุป

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

HTML - บทที่ 15. แผนที่นำทาง - แผนที่

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

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

ตัวอย่างเช่น สมมติว่าเราเป็นร้านขายเครื่องใช้ในบ้าน และในส่วนหัวของไซต์เรามีรูปภาพต่อไปนี้:

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

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

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

สำหรับวัตถุประสงค์เหล่านี้ มักใช้บางโปรแกรม เช่น Image Ready ซึ่งมีเครื่องมือพิเศษสำหรับติดตามพื้นที่และสร้างคำอธิบายของพื้นที่เหล่านี้โดยอัตโนมัติ การพิจารณาการทำงานของโปรแกรมเหล่านี้ไม่รวมอยู่ในหลักสูตร HTML ดังนั้นที่นี่เราจะตั้งค่าพิกัด "ด้วยตา" ดูภาพของเราอีกครั้ง:

รูปภาพของเรามีความกว้าง 738 พิกเซลและสูง 192 พิกเซล วาดเส้นตามขอบของภูมิภาคของเราและกำหนดพิกัดอย่างคร่าว ๆ ตอนนี้เราพร้อมที่จะเพิ่มตัวเลือกเหล่านี้ให้กับแท็กของเราแล้ว .

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

สรุปบทเรียนของเรา คุณคุ้นเคยกับคุณสมบัติทั้งหมดของภาษา HTML แล้ว ในการรวมทักษะของคุณ ลองดูบทเรียนสองบท การสร้างไซต์ - เค้าโครงแบบตาราง

สุดท้าย ต้องบอกว่ามีองค์ประกอบที่ยอดเยี่ยมอีกสองอย่างในแท็ก HTML