วิธีสร้าง Image Maps โดยไม่ใช้ Image Map Editor

แผนที่รูปภาพเป็นเพียงแท็ก HTML ง่ายๆ

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

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

การสร้างแผนที่รูปภาพ

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

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

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

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

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

<พื้นที่รูปร่าง = "rect" coords = "0,0,10,15" href = "morris.htm" alt = "Morris">

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

<พื้นที่รูปร่าง = "poly" coords = "17,34,41,96,110,121" href = "garfield.htm" alt = "Garfield">

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

<พื้นที่รูปร่าง = "circ" coords = "122,122,5" href = "catbert.htm" alt = "Catbert">

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

"มอร์ริส" <พื้นที่รูปร่าง = "poly" coords = "17 , 34,41,96,110,121 "href =" garfield.htm "alt =" Garfield "> <พื้นที่รูปร่าง =" circ "coords =" 122,122,5 "href =" catbert.htm "alt =" Catbert ">

การพิจารณา

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

แนวทางสมัยใหม่สนับสนุนการออกแบบที่ตอบสนองต่อและใช้สไตล์ชีต cascading เพื่อควบคุมตำแหน่งของภาพและการเชื่อมโยงหลายมิติบนหน้าเว็บ

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

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