วิธีสร้างแผนที่รูปภาพโดยไม่ต้องใช้โปรแกรมแก้ไขแผนที่รูปภาพ

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

การสร้างแผนผังรูปภาพ

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

เมื่อคุณแทรกรูปภาพ คุณจะต้องเพิ่มแอตทริบิวต์พิเศษที่ระบุพิกัดของแผนที่:

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

• รูปสี่เหลี่ยมผืนผ้าหรือรูปสี่ด้าน
• โพลี—รูปหลายเหลี่ยมหรือหลายด้าน
• วงกลม—วงกลม

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

สำหรับ สี่เหลี่ยมผืนผ้าคุณแมปเฉพาะมุมบนซ้ายและมุมขวาล่าง พิกัดทั้งหมดแสดงเป็น x, y (บน, ขึ้น) ดังนั้นสำหรับมุมซ้ายบน 0,0 และมุมขวาล่าง 10,15 คุณจะต้องพิมพ์ 0,0,10,15. จากนั้นคุณรวมไว้ในแผนที่:

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

วงกลม รูปร่างต้องการเพียงสองพิกัด เช่น สี่เหลี่ยมผืนผ้า แต่สำหรับพิกัดที่สอง คุณต้องระบุรัศมีหรือระยะทางจากจุดศูนย์กลางของวงกลม ดังนั้น สำหรับวงกลมที่มีจุดศูนย์กลางที่ 122,122 และรัศมี 5 คุณจะต้องเขียนว่า 122,122,5:

พื้นที่และรูปร่างทั้งหมดอาจรวมอยู่ในแท็กแผนที่เดียวกัน:

ข้อควรพิจารณา

แผนที่รูปภาพพบเห็นได้ทั่วไปในยุค Web 1.0 ของปี 1990 จนถึงต้นทศวรรษ 2000 แผนที่รูปภาพมักเป็นพื้นฐานของการนำทางของเว็บไซต์ นักออกแบบจะสร้างรูปภาพบางประเภทเพื่อระบุรายการเมนู แล้วตั้งค่าแผนที่

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

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

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