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