มีจุดในประวัติศาสตร์ของการออกแบบเว็บที่เว็บไซต์จำนวนมากใช้คุณลักษณะที่เรียกว่า "แผนที่รูปภาพ" นี่คือรายการพิกัดที่แนบมากับภาพที่ระบุในเพจ พิกัดเหล่านี้สร้างพื้นที่เชื่อมโยงหลายมิติในภาพนั้นจำเป็นต้องเพิ่ม "ฮอตสปอต" ลงในภาพซึ่งแต่ละส่วนสามารถจัดทำเป็นโค้ดเพื่อเชื่อมโยงไปยังสถานที่ต่างๆได้ ซึ่งแตกต่างจากการเพิ่มแท็กลิงก์ลงในรูปภาพซึ่งจะทำให้ภาพกราฟิกทั้งหมดกลายเป็นลิงก์ใหญ่ ๆ ไปยังจุดหมายปลายทางเดียว
ตัวอย่าง: ลองจินตนาการถึงการมีไฟล์กราฟิกพร้อมภาพลักษณ์ของสหรัฐอเมริกา หากคุณต้องการให้แต่ละรัฐเป็น "คลิกได้" เพื่อไปยังหน้าที่เกี่ยวกับสถานะเฉพาะดังกล่าวคุณสามารถทำแผนที่ภาพได้ ในทำนองเดียวกันถ้าคุณมีภาพของวงดนตรีคุณสามารถใช้แผนที่ภาพเพื่อให้สมาชิกแต่ละรายสามารถคลิกไปยังหน้าถัดไปเกี่ยวกับสมาชิกกลุ่มนั้นได้
ภาพแผนที่มีประโยชน์หรือไม่? แน่นอนพวกเขาได้ แต่พวกเขาได้หลุดพ้นจากความกรุณาในเว็บปัจจุบันแล้ว นี่เป็นอย่างน้อยที่สุดในบางส่วนเนื่องจากแผนที่รูปภาพต้องใช้พิกัดเฉพาะเพื่อทำงาน ไซต์ในปัจจุบันมีการตอบสนองและภาพจะขึ้นอยู่กับขนาดของหน้าจอหรืออุปกรณ์ ซึ่งหมายความว่าพิกัดที่กำหนดไว้ล่วงหน้าซึ่งเป็นวิธีที่แผนที่รูปภาพทำงานแตกสลายเมื่อไซต์มีขนาดและขนาดของภาพเปลี่ยนไป นี่เป็นเหตุผลที่แผนที่ภาพมักไม่ค่อยมีใครใช้ในไซต์โปรดักชั่นในปัจจุบัน แต่ก็ยังมีข้อได้เปรียบสำหรับการสาธิตหรืออินสแตนซ์ที่คุณบังคับให้มีขนาดของหน้า
ต้องการทราบวิธีสร้างแผนที่รูปภาพโดยเฉพาะวิธีการทำเช่นนี้กับ Dreamweaver? กระบวนการนี้ไม่ใช่เรื่องยากโดยเฉพาะ แต่ก็ไม่ใช่เรื่องง่ายดังนั้นคุณควรมีประสบการณ์ก่อนที่คุณจะเริ่มต้น
เริ่มต้นใช้งาน
มาเริ่มกันเลย. ขั้นตอนแรกที่คุณต้องทำคือการเพิ่มภาพลงในหน้าเว็บของคุณ จากนั้นคุณจะคลิกที่รูปภาพเพื่อไฮไลต์ จากนั้นคุณจะต้องไปที่เมนูคุณสมบัติ (และคลิกที่หนึ่งในสามเครื่องมือวาดภาพฮอตสปอต: สี่เหลี่ยมผืนผ้าวงกลมหรือรูปหลายเหลี่ยมอย่าลืมตั้งชื่อภาพซึ่งคุณสามารถทำได้ในแถบคุณสมบัติคุณสามารถตั้งชื่อได้ ทุกอย่างที่คุณต้องการใช้ "แผนที่" เป็นตัวอย่าง
ตอนนี้วาดรูปร่างที่คุณต้องการในภาพโดยใช้เครื่องมือเหล่านี้ หากต้องการพื้นที่สี่เหลี่ยมผืนผ้าให้ใช้สี่เหลี่ยมผืนผ้า เหมือนกันสำหรับวงกลม หากต้องการให้รูปทรงฮอตสปอตมีความซับซ้อนมากขึ้นให้ใช้รูปหลายเหลี่ยม นี่คือสิ่งที่คุณน่าจะใช้ในตัวอย่างแผนที่สหรัฐอเมริกาเนื่องจากรูปหลายเหลี่ยมจะช่วยให้คุณสามารถวางจุดและสร้างรูปทรงที่ซับซ้อนและไม่สม่ำเสมอในภาพ
ในหน้าต่างคุณสมบัติของฮอตสปอตให้พิมพ์หรือเรียกดูหน้าเว็บที่ควรเชื่อมโยงฮอตสปอต นี่คือสิ่งที่สร้างพื้นที่เชื่อมโยงดังกล่าว ดำเนินการเพิ่มจุดต่อไปจนกว่าแผนที่ของคุณจะเสร็จสมบูรณ์และลิงก์ทั้งหมดที่คุณต้องการเพิ่ม
เมื่อทำเสร็จแล้วให้ตรวจสอบแผนที่รูปภาพของคุณในเบราว์เซอร์เพื่อให้แน่ใจว่าการทำงานถูกต้อง คลิกแต่ละลิงก์เพื่อให้แน่ใจว่าจะไปที่แหล่งข้อมูลหรือเว็บเพจที่เหมาะสม
ข้อเสียของ Image Maps
อีกครั้งโปรดทราบว่าแผนที่รูปภาพมีข้อเสียหลายประการแม้อยู่นอกเหนือจากการขาดการสนับสนุนดังกล่าวข้างต้นกับเว็บไซต์ที่ตอบสนองต่อ ประการแรกรายละเอียดเล็ก ๆ อาจถูกบดบังไว้ในแผนที่ภาพ ตัวอย่างเช่นแผนที่รูปภาพทางภูมิศาสตร์อาจช่วยในการกำหนดว่าผู้ใช้มาจากทวีปใด แต่แผนที่เหล่านี้อาจไม่ละเอียดพอที่จะระบุประเทศต้นทางของผู้ใช้ ซึ่งหมายความว่าแผนที่ภาพอาจช่วยในการระบุว่าผู้ใช้มาจากเอเชีย แต่ไม่ได้มาจากประเทศกัมพูชาโดยเฉพาะ
แผนที่ภาพอาจโหลดช้าๆ ไม่ควรใช้หลายครั้งในเว็บไซต์เนื่องจากใช้พื้นที่มากเกินไปเพื่อใช้ในแต่ละหน้าของเว็บไซต์ การสร้างแผนที่ภาพจำนวนมากเกินไปในหน้าเดียวอาจก่อให้เกิดคอขวดที่ร้ายแรงและส่งผลต่อประสิทธิภาพของไซต์มาก
สุดท้ายแผนที่ภาพอาจไม่ใช่เรื่องง่ายสำหรับผู้ใช้ที่มีปัญหาด้านภาพในการเข้าถึง หากคุณใช้แผนที่รูปภาพคุณควรสร้างระบบนำทางอื่นสำหรับผู้ใช้เหล่านี้เป็นทางเลือก
Bottom Line
ใช้แผนที่รูปภาพเป็นครั้งคราวเมื่อพยายามรวมการสาธิตอย่างรวดเร็วเกี่ยวกับการออกแบบและวิธีการทำงาน ตัวอย่างเช่นถ้าคุณกำลังเยาะเย้ยการออกแบบสำหรับแอปบนอุปกรณ์เคลื่อนที่และคุณต้องการใช้แผนที่รูปภาพเพื่อสร้างฮอตสปอตเพื่อจำลองการโต้ตอบของแอป ง่ายกว่าที่จะทำกับโค้ดแอพพลิเคชั่นหรือแม้กระทั่งสร้างหน้าเว็บหลอกลวงที่สร้างขึ้นตามมาตรฐานปัจจุบันด้วย HTML และ CSS แต่การนำพวกเขาเข้าไปในไซต์หรือแอปผลิตเป็นเรื่องที่ยุ่งยากมากและน่าจะหลีกเลี่ยงได้ในเว็บไซต์ของวันนี้
