ต้องรู้
• ใช้รูปภาพขนาดปกติที่เบราว์เซอร์จะไม่ปรับขนาด คุณจะต้องใช้โปรแกรมแก้ไขรูปภาพและ HTML หรือโปรแกรมแก้ไขข้อความ
• เมื่อแทรกรูปภาพ ให้เพิ่มแอตทริบิวต์พิเศษเพื่อระบุพิกัดของแผนที่
• ตัวอย่างเช่น:
บทความนี้อธิบายวิธีสร้าง 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 แต่การใช้อุปกรณ์มือถือที่มีฟอร์มแฟคเตอร์ขนาดเล็กอาจนำไปสู่ปัญหาด้านประสิทธิภาพที่ไม่คาดคิดกับแผนที่รูปภาพ นอกจากนี้ ปัญหาแบนด์วิดท์หรือรูปภาพที่เสียหายยังส่งผลต่อมูลค่าของแผนที่รูปภาพ
ดังนั้น อย่าลังเลที่จะใช้เทคโนโลยีที่เสถียรและเข้าใจดีนี้ต่อไป เพราะรู้ว่ามีทางเลือกที่มีประสิทธิภาพมากกว่าในปัจจุบันสำหรับนักออกแบบเว็บไซต์