การ์ดรูปภาพ การสร้างแผนที่รูปภาพใน HTML แผนที่กราฟิก html

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

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

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

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

ในบทนี้คุณจะได้เรียนรู้:

• Image Map คืออะไร และทำงานอย่างไร?
• วิธีสร้างไฟล์คอนฟิกูเรชันอิมเมจแมป
• วิธีสร้างลิงค์ในเอกสาร HTML โดยใช้แผนที่รูปภาพ

ข้าว. 6.1.ตัวอย่างของเว็บเพจที่สร้างเมนูหลักโดยใช้แผนผังรูปภาพ

• ควรปฏิบัติตามหลักการใดบ้างเมื่อใช้แผนที่รูปภาพ
• อะไรคือคุณสมบัติของไฟล์การกำหนดค่าแผนผังรูปภาพรูปแบบต่างๆ?
• คุณควรใช้ซอฟต์แวร์ใดในการสร้างแผนที่รูปภาพ

ข้อมูลพื้นฐานเกี่ยวกับแผนที่รูปภาพ

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

ข้าว. 6.2.การแสดงลิงก์ด้วยภาพ (ไปยังหน้าที่บอกเกี่ยวกับเจ็ดสิ่งมหัศจรรย์ของโลก) โดยใช้แผนที่รูปภาพ

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

มาดูแนวคิดพื้นฐานที่เกี่ยวข้องกับการใช้แผนที่รูปภาพกัน

คำศัพท์เฉพาะทาง

Imagemap, Image Map, Area Map, Clickable Map, Sensitive Map - ศัพท์ภาษาอังกฤษทั้งหมดนี้ใช้ในเอกสารอ้างอิงเพื่อแสดงถึงความเป็นไปได้แบบเดียวกัน - การใช้ภาพที่ฝังอยู่ในเอกสาร HTML ซึ่งมีจุด "ร้อน" (หรือใช้งานอยู่) กำหนดหรือพื้นที่ที่เชื่อมโยงไปยัง URL ที่แตกต่างกัน เราจะอธิบายความเป็นไปได้นี้ด้วยวลี "แผนที่รูปภาพ" ซึ่งหมายถึงการรวมกันขององค์ประกอบหลายอย่างที่รับประกันการนำแนวคิดนี้ไปใช้ ส่วนประกอบหลักคือ: ตัวรูปภาพเอง ซึ่งเราจะเรียกว่ารูปภาพอ้างอิงสำหรับแผนผังรูปภาพนี้ คำอธิบายการกำหนดค่าพื้นที่ใช้งาน ตลอดจนซอฟต์แวร์ที่เกี่ยวข้อง

การแสดงกราฟิกของแผนที่รูปภาพ

แผนที่รูปภาพนั้นเป็นกราฟิกที่ฝังอยู่บนเว็บเพจเป็นหลัก รูปภาพเหล่านี้สามารถอยู่ในรูปแบบที่ถูกต้อง (GIF หรือ JPG) ในกรณีนี้ รูปแบบ GIF สามารถใช้สีโปร่งใส รวมถึงโหมดเส้นสลับได้ เพื่อให้รูปภาพถูกใช้เป็นข้อมูลอ้างอิงสำหรับแผนผังรูปภาพ จึงไม่มีการกำหนดข้อจำกัดเพิ่มเติมอย่างเป็นทางการ

คำอธิบายการกำหนดค่าการ์ดรูปภาพ

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

ตัวเลือกสำหรับการนำแผนที่รูปภาพไปใช้

แนวคิดของแผนผังรูปภาพบนเว็บเพจสามารถนำไปใช้ได้ในสองเวอร์ชันที่แตกต่างกัน - แผนผังรูปภาพฝั่งเซิร์ฟเวอร์และแผนผังรูปภาพฝั่งไคลเอ็นต์ ชื่อหลังมักใช้เป็นตัวย่อ CSIM ในอดีต แผนที่รูปภาพเวอร์ชันเซิร์ฟเวอร์เป็นเวอร์ชันแรกที่ปรากฏและแพร่หลาย ซึ่งถูกนำมาใช้ครั้งแรกในเบราว์เซอร์ Mosaic เวอร์ชันเซิร์ฟเวอร์อนุญาตให้ใช้เวอร์ชันแรกของเบราว์เซอร์ชั้นนำทั้งสามเวอร์ชัน เวอร์ชันเซิร์ฟเวอร์สามารถใช้งานได้สองรูปแบบที่แตกต่างกัน ซึ่งตั้งชื่อตามชื่อขององค์กรนักพัฒนา - NCSA และ CERN

เมื่อเร็ว ๆ นี้เวอร์ชันไคลเอนต์ซึ่งใช้งานครั้งแรกในเบราว์เซอร์ Microsoft Internet Explorer ได้รับการพัฒนามากขึ้น ในเวอร์ชัน 2.0 ตัวเลือกนี้ยังรองรับเบราว์เซอร์ Netscape ด้วย ตัวเลือกนี้มีข้อได้เปรียบที่ไม่อาจปฏิเสธได้และกำลังได้รับความนิยมมากขึ้นเรื่อยๆ

ข้อดีและข้อเสียของ Image Map

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

แผนที่รูปภาพสะดวกที่สุดที่จะใช้ในสถานการณ์ต่อไปนี้:

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

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

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

ข้อเสียของแผนที่รูปภาพมีดังต่อไปนี้:

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

การใช้งานแผนที่รูปภาพฝั่งเซิร์ฟเวอร์

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

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

โปรดทราบว่ารูปภาพในบรรทัดสามารถใช้เป็นลิงก์ไฮเปอร์เท็กซ์ได้ หากรวมอยู่ในแท็ก<А>. ตัวอย่างเช่น หากต้องการสร้างรูปภาพชื่อ Myimage.gif เป็นลิงก์กราฟิกไปยังเอกสารในไดเร็กทอรีเดียวกันชื่อ Exampie.html คุณจะต้องเขียนว่า:

<А HREF=example.html >

HTML นี้จะบอกเซิร์ฟเวอร์ว่าเมื่อมีการคลิกรูปภาพ Mylmage.gif เอกสารชื่อ example.html ควรจะถูกส่งกลับไปยังเบราว์เซอร์

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

<А HREF=MyImage.map>< IMG SRC=MyImage.gif ISMAP>< /A>

ลิงก์ในตัวอย่างนี้ไม่ใช่ที่อยู่ของเอกสาร HTML อื่น แต่เป็นไฟล์การกำหนดค่าการแมปรูปภาพที่มีพิกัดสำหรับแต่ละพื้นที่ที่ใช้งานของรูปภาพชื่อ Myimage.gif

บันทึก

ลำดับของพารามิเตอร์แท็ก เป็นสิ่งที่กำหนดไว้เอง อย่างไรก็ตาม พารามิเตอร์ ISMAP มักจะถูกวางไว้สุดท้าย

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

คำแนะนำ

การ์ดรูปภาพแต่ละใบต้องมีไฟล์การกำหนดค่าแยกต่างหาก ทำให้เป็นกฎในการบันทึกไฟล์การกำหนดค่าในไดเร็กทอรีเดียวกันและใช้ชื่อเดียวกับรูปภาพที่เกี่ยวข้อง ตัวอย่างเช่น: main_menu.gif และ main menu.map

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

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

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

คำแนะนำ

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

รูปแบบเซิร์น

CERN เป็นศูนย์วิทยาศาสตร์ของยุโรปที่มีหัวข้อการวิจัยกว้างมาก ที่นี่เป็นที่ที่มีการพัฒนาแนวคิดของระบบเวิลด์ไวด์เว็บซึ่งเป็นแรงผลักดันสำหรับการพัฒนาทั้งหมดในพื้นที่ WWW CERN ถือได้ว่าเป็นแหล่งกำเนิดของเว็บอย่างถูกต้อง เมื่อจำเป็นต้องพัฒนาโครงสร้างสำหรับไฟล์การกำหนดค่าแผนที่รูปภาพ CERN เสนอรูปแบบต่อไปนี้:

URL พิกัดประเภทพื้นที่

ค่าของคู่พิกัด X และ Y จะถูกคั่นด้วยเครื่องหมายจุลภาคและอยู่ในวงเล็บ รูปแบบของ CERN ไม่อนุญาตให้แสดงความคิดเห็นเพื่ออธิบายการอ้างอิงที่เกี่ยวข้องกับพื้นที่ใดพื้นที่หนึ่ง สามารถใช้ประเภทพื้นที่ต่อไปนี้: สี่เหลี่ยม วงกลม โพลี และค่าเริ่มต้น รูปแบบนี้ช่วยให้สามารถเขียนชื่อประเภทพื้นที่ได้สองวิธี - ทั้งแบบย่อและแบบเต็ม นอกจากชื่อประเภทที่กำหนดแล้ว ยังสามารถใช้ชื่อสี่เหลี่ยมผืนผ้า วงกลม และรูปหลายเหลี่ยมได้

นี่คือตัวอย่างการบันทึกข้อมูลเกี่ยวกับพื้นที่บนแผนที่ภาพในรูปแบบ CERN:

ตรง (56.47) (357.265) http://www.anywhere.com/

วงกลม (366,147) 109 http://www.anywhere.com/

รูปหลายเหลี่ยม (534.62) (699.62) (698.236) (626.261) (534.235) (534.62)

http://www.anywhere.com/

รูปแบบของ กสทช

ศูนย์แอปพลิเคชันซูเปอร์คอมพิวเตอร์แห่งชาติ (NCSA) แห่งมหาวิทยาลัยอิลลินอยส์ยังได้มีส่วนสำคัญในการพัฒนาเว็บอีกด้วย เบราว์เซอร์กราฟิกยอดนิยมตัวแรกคือโปรแกรม Mosaic ถูกสร้างขึ้นที่นี่ NCSA เสนอรูปแบบไฟล์การกำหนดค่าที่แตกต่างจากรูปแบบการบันทึกของ CERN รูปแบบนี้มีลักษณะดังนี้:

พิกัด URL ของ area_type

สามารถใช้ประเภทพื้นที่ต่อไปนี้: สี่เหลี่ยม วงกลม โพลี ค่าเริ่มต้น และจุด

พิกัด X และ Y คั่นด้วยเครื่องหมายจุลภาค แต่ไม่อยู่ในวงเล็บ รูปแบบนี้อนุญาตให้ใช้บรรทัดความคิดเห็นได้ บรรทัดใดๆ ที่ขึ้นต้นด้วยอักขระ # จะถือเป็นความคิดเห็น และตัวแยกวิเคราะห์จะละเว้นเนื้อหา

รูปแบบ NCSA นำเสนอวิธีที่แตกต่างออกไปเล็กน้อยในการกำหนดพื้นที่วงกลม (เปรียบเทียบกับรูปแบบ CERN และเวอร์ชันไคลเอนต์ที่กล่าวถึงด้านล่าง) พื้นที่วงกลมถูกกำหนดโดยพิกัดของจุดสองจุด - จุดศูนย์กลางและจุดใดๆ ที่วางอยู่บนวงกลม

บันทึก

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

นี่คือตัวอย่างการเขียนไฟล์การกำหนดค่าในรูปแบบ NCSA:

#ตัวอย่างการเขียนไฟล์คอนฟิกูเรชัน

แก้ไข http://www.anywhere.com/ 56.47 357.265

วงกลม http://www.anywhere.com/ 366,147 366,256

โพลี http://www.anywhere.com/ 534.62 699.62 698.236 626.261 534.235 534.62

เวอร์ชันไคลเอ็นต์ของแผนผังรูปภาพ

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

หากต้องการระบุว่ารูปภาพที่ฝังไว้เป็นรูปภาพอ้างอิงสำหรับแผนที่ ให้ใช้พารามิเตอร์แท็ก USEMAP . ค่าของพารามิเตอร์ USEMAP เป็นการอ้างอิงถึงคำอธิบายการกำหนดค่าแผนที่

บันทึก

เบราว์เซอร์ Netscape ไม่อนุญาตให้ใช้ไฟล์แยกต่างหากเพื่ออธิบายการกำหนดค่าการ์ด

ตัวอย่างเช่น:

ในตัวอย่างนี้ รูปภาพที่จัดเก็บไว้ในไฟล์ชื่อ l ogo.gif เป็นรูปภาพอ้างอิงสำหรับแผนผังรูปภาพฝั่งไคลเอ็นต์

คำอธิบายของการกำหนดค่าฮอตสปอตจะต้องอยู่ในไฟล์เดียวกันกับบรรทัดโค้ด HTML นี้ และสำหรับตัวอย่างนี้คือ ชื่อโลโก้

แท็ก<МАР>

แท็กพิเศษใช้เพื่ออธิบายการกำหนดค่าพื้นที่ของแผนที่รูปภาพ<МАР>ซึ่งมีพารามิเตอร์เพียงตัวเดียวคือ NAME ค่าของพารามิเตอร์ NAME ระบุชื่อที่ต้องตรงกับชื่อใน USEMAP แท็ก<МАР>ต้องมีแท็กปิด. ภายในแท็กคู่นี้ควรมีคำอธิบายของพื้นที่ที่ใช้งานอยู่ในแผนที่ซึ่งมีการใช้แท็กพิเศษ .

แท็ก

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

พารามิเตอร์แท็ก ได้แก่ SHAPE, COORDS, HREF, NOHREF, TARGET และ ALT พิจารณาวัตถุประสงค์ของพารามิเตอร์เหล่านี้

พารามิเตอร์รูปร่าง

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

คำเตือน

อย่าสับสนระหว่างพื้นที่ของประเภท ค่าเริ่มต้น ซึ่งอธิบายจุดทั้งหมดในรูปภาพและค่าเริ่มต้นของพารามิเตอร์ SHAPE ซึ่งเป็นรูปสี่เหลี่ยมผืนผ้า

บันทึก

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

คำแนะนำ

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

พารามิเตอร์ COORDS

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

สำหรับพื้นที่ประเภทสี่เหลี่ยมผืนผ้าจะมีการระบุพิกัดมุมซ้ายบนและมุมขวาล่างของสี่เหลี่ยมผืนผ้า

สำหรับพื้นที่ประเภทวงกลม จะมีการระบุตัวเลขสามตัว - พิกัดของศูนย์กลางของวงกลมและรัศมี

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

พื้นที่ประเภทเริ่มต้นไม่จำเป็นต้องระบุพิกัด

พารามิเตอร์ HREF และ NOHREF

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

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

พารามิเตอร์เป้าหมาย

พารามิเตอร์ TARGET ถูกใช้เมื่อทำงานกับเฟรม โดยมีวัตถุประสงค์คือเพื่อระบุชื่อของเฟรมที่จะวางเอกสารที่ดาวน์โหลดจากลิงค์นี้ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับการใช้ตัวเลือกนี้ โปรดดูบทเกี่ยวกับการทำงานกับเฟรม

พารามิเตอร์ ALT

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

นี่คือตัวอย่างการระบุพื้นที่ประเภทต่างๆ:

<МАР NAME="logo">

!}

HREF="p.htm" ALT="รูปหลายเหลี่ยม"> !}

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

การรวมกันของตัวเลือกไคลเอนต์และเซิร์ฟเวอร์

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

นี่คือตัวอย่างของตัวเลือกแบบรวม:

<А HREF="http://www.anywhere.com/testmap/logo.map">

บันทึก

พารามิเตอร์ USEMAP ยังมีความสำคัญเหนือลิงก์ที่กำหนดโดยแท็กอีกด้วย<А>. ดังนั้น หากรูปภาพที่ใช้ในการนำแนวคิดแผนที่รูปภาพไปใช้ในเวอร์ชันไคลเอ็นต์นั้นถูกเขียนไว้ภายในขอบเขตของแท็ก<А HREF>จากนั้นลิงก์ที่ระบุโดยแท็กสุดท้ายจะถูกละเว้นโดยเบราว์เซอร์ที่สนับสนุนตัวเลือกฝั่งไคลเอ็นต์ สมมติว่ามีส่วนต่อไปนี้:

<А HREF=NoMaps.htm> .

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

คุณสมบัติของการใช้แผนที่รูปภาพ

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

วิธีการนำทางทางเลือก

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

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

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

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

เครื่องมือสร้างแผนที่รูปภาพ

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

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

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

มาดูโปรแกรมที่มีอยู่บ้าง

โปรแกรม MapEdit

หนึ่งในโปรแกรมที่ง่ายที่สุดและมีชื่อเสียงที่สุดในการแก้ไขไฟล์กำหนดค่าคือยูทิลิตี้ MapEdit ซึ่งพัฒนาโดย Thomas Boutell โปรแกรมนี้ดำเนินมาหลายปีแล้วและถูกนำไปใช้กับแพลตฟอร์มต่างๆ มีเวอร์ชันสำหรับ Windows 3.x และ Windows 95/98/NT โดยเฉพาะ เช่นเดียวกับโปรแกรมส่วนใหญ่ ยูทิลิตี้นี้มีหลายเวอร์ชัน ปัจจุบันเวอร์ชันล่าสุดสำหรับ Windows 95/98/NT คือเวอร์ชัน 2.6 (กันยายน 1999) สามารถรับข้อมูลเกี่ยวกับโปรแกรมได้ที่:

http://www.boutell.cora/mapedit/

MapEdit เป็นแชร์แวร์และมีระยะเวลาการประเมิน 30 วัน หลังจากนั้นจำเป็นต้องลงทะเบียน โปรแกรมมีขนาดเล็ก - การแจกจ่ายใช้เวลาประมาณ 300 KB และในขณะเดียวกันก็มีความสามารถที่จำเป็นเกือบทั้งหมด

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

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

บันทึก

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

สมมติว่าเราจำเป็นต้องสร้างไฟล์การกำหนดค่าใหม่สำหรับแมปรูปภาพเวอร์ชันเซิร์ฟเวอร์ เลือกเปิด/สร้างแผนที่จากเมนู

ไฟล์. กล่องโต้ตอบจะปรากฏขึ้น (รูปที่ 6.4) ซึ่งคุณควรระบุชื่อของไฟล์การกำหนดค่าที่จะสร้าง (เช่น Blazons.map) ระบุไฟล์รูปภาพที่มีอยู่และรูปแบบของไฟล์ที่สร้างขึ้น (NCSA หรือ CERN ). ไฟล์รูปภาพสามารถอยู่ในรูปแบบ GIF, JPG หรือ PNG

ข้าว. 6. 3 . หน้าจอเริ่มต้น MapEdit

ข้าว. 6. 4 . กล่องโต้ตอบเปิด/สร้างแผนที่สำหรับสร้างไฟล์การกำหนดค่า

บันทึก

โปรแกรมตีความไฟล์การกำหนดค่าฝั่งเซิร์ฟเวอร์หลายโปรแกรมต้องการให้ไฟล์มีนามสกุล MAP ขอแนะนำให้ปฏิบัติตามกฎนี้เสมอ

โปรแกรมจะโหลดไฟล์รูปภาพที่เลือกซึ่งจะสามารถทำเครื่องหมายพื้นที่ที่ใช้งานอยู่ได้ (รูปที่ 6.5)

ในการทำเช่นนี้คุณต้องเลือกรูปร่างของพื้นที่ใช้งาน - สี่เหลี่ยมผืนผ้าวงกลมหรือสี่เหลี่ยมผืนผ้าโดยคลิกที่ไอคอนที่เกี่ยวข้องหรือเลือกรายการที่ต้องการจากเมนูเครื่องมือ (รูปที่ 6.6)

การดำเนินการเพิ่มเติมจะดำเนินการบนรูปภาพโดยตรงโดยการทำเครื่องหมายจุดด้วยเมาส์ สำหรับพื้นที่สี่เหลี่ยม มุมซ้ายบนและมุมขวาล่างจะถูกทำเครื่องหมาย สำหรับพื้นที่วงกลม - จุดศูนย์กลางและจุดใดจุดหนึ่งบนวงกลม สำหรับรูปหลายเหลี่ยมจะมีการระบุจุดยอด ตัวอย่างเช่นในรูป รูปที่ 6.5 แสดงกรณีที่พื้นที่ใช้งานสามส่วนที่มีรูปร่างต่างกันถูกทำเครื่องหมายไว้บนภาพแล้ว โปรดทราบว่าเส้นที่จำกัดพื้นที่ใช้งานมีไว้เพื่อแสดงภาพเมื่อทำงานในโปรแกรมแก้ไขเท่านั้น และจะไม่เปลี่ยนแปลงไฟล์รูปภาพแต่อย่างใด รูปภาพในตัวอย่างนี้โดยพื้นฐานแล้วประกอบด้วยรูปภาพสามภาพที่แยกจากกัน (มีภาพตราแผ่นดินของเมืองเซนต์ปีเตอร์สเบิร์ก, Tomsk และ Yakutsk) ซึ่งโดยปกติแล้วจะไม่ปกติสำหรับภาพที่เหมือนจริง อย่างไรก็ตาม สำหรับภาพที่มีชุดปุ่มควบคุม เช่น สถานการณ์นี้ค่อนข้างเป็นเรื่องปกติ

ข้าว. 6. 5 . รูปภาพที่มีป้ายกำกับฮอตสปอตประเภทต่างๆ

ข้าว. 6. 6 . เมนูเครื่องมือ

ข้าว. 6. 7 . กล่องโต้ตอบ URL ของออบเจ็กต์สำหรับระบุ URL และความคิดเห็นเพิ่มเติม

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

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

ข้าว. 6. 8 . กล่องโต้ตอบ URL เริ่มต้นสำหรับการตั้งค่า URL เริ่มต้นสำหรับขอบเขต

ข้าว. 6. 9 . บันทึกเป็นกล่องโต้ตอบคำสั่ง

บันทึก

MapEdit เวอร์ชันเก่ามีข้อบกพร่องเล็กๆ น้อยๆ ที่เกี่ยวข้องกับการตั้งค่ารูปแบบของไฟล์การกำหนดค่าที่บันทึกไว้ หากระบุรูปแบบ CERN เมื่อสร้างไฟล์ เมื่อบันทึกข้อมูลในโหมดบันทึก ไฟล์จะยังคงบันทึกในรูปแบบ NCSA คุณสามารถสร้างไฟล์ฟอร์แมต CERN ได้เฉพาะเมื่อใช้โหมดบันทึกเป็นและระบุรูปแบบที่ต้องการเท่านั้น

สำหรับตัวอย่างนี้ ไฟล์ชื่อ Blazons.map จะถูกสร้างขึ้นโดยมีข้อมูลต่อไปนี้ (รูปแบบ NCSA):

#ตราแผ่นดินของเมืองตอมสค์

แก้ไข www.ifmo.ru/sergeev/tomsk.htm 35.58 187.244

#ตราแผ่นดินของเมืองยาคุตสค์

วงกลม www.ifmo.ru/sergeev/jakutsk.htm 364.150 468.150

#ตราแผ่นดินเมืองเซนต์ปีเตอร์สเบิร์ก

โพลี www.ifmo.ru/sergeev/Spb.htm 537.61 700.61 700.230 618.256 537.231

ข้อมูลเดียวกันที่บันทึกโดยตัวแก้ไขในรูปแบบ CERN จะมีลักษณะดังนี้:

ตรง (35.58) (187.244) www.ifmo.ru/sergeev/tomsk.htm วงกลม (364.150) 104 www.ifmo.ru/sergeev/jakutsk.htm โพลี (537.61) (700.61) (700.230) (618,256) (537,231) www.ifmo.ru/sergeev/Spb.htm

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

พิจารณางานสร้างแผนที่รูปภาพเวอร์ชันไคลเอ็นต์ เพื่อแก้ไขปัญหานี้ คุณต้องมีไฟล์ต้นฉบับ HTML ที่ประกอบด้วยรูปภาพที่ฝังไว้อย่างน้อยหนึ่งภาพ ไฟล์ต้นฉบับนี้สามารถสร้างล่วงหน้าด้วยโปรแกรมแก้ไขข้อความหรือโปรแกรมแก้ไข HTML พิเศษ สมมติว่ามีไฟล์ชื่อ CSIM.HTM ซึ่งมีโค้ดต่อไปนี้:

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

ข้าว. 6.1 0 . กล่องโต้ตอบเปิด/สร้างแผนที่สำหรับการเปิดไฟล์ HTML ที่มีอยู่

ข้าว. 6.1 1 . เลือกกล่องโต้ตอบรูปภาพอินไลน์

หลังจากเปิดไฟล์ HTML ต้นฉบับแล้ว ตัวแก้ไขจะแสดงกล่องโต้ตอบพร้อมรายการรูปภาพในตัวทั้งหมด ซึ่งคุณต้องเลือกรูปภาพที่คุณต้องการ (รูปที่ 6.11) แน่นอนว่าต้องมีไฟล์ที่มีรูปภาพที่เลือกอยู่

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

href="tomsk.htm">

href="jakutsk.htm">

coords="537,61,700,61, 700, 230, 618, 256, 537,231" href="Spb.htm">

โปรดทราบว่าตัวแก้ไขจะกำหนดชื่อโดยอัตโนมัติเพื่ออธิบายแผนผังรูปภาพที่ตรงกับชื่อของไฟล์รูปภาพอ้างอิง สำหรับตัวอย่างนี้ ไฟล์ที่มีรูปภาพมีชื่อว่า Blazons.gif จึงเป็นพารามิเตอร์ชื่อของแท็ก<тар>ได้รับมอบหมายให้มีค่าเป็น "Blazons"

บันทึก

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

แผนที่นี้!

ยูทิลิตี้อื่นสำหรับการสร้างและแก้ไขไฟล์การกำหนดค่าสำหรับแผนที่รูปภาพคือโปรแกรม Map THIS! ซึ่งสามารถรับข้อมูลได้ที่:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/.

การทำงานกับโปรแกรมนี้มีอุดมคติคล้ายกับโปรแกรม MapEdit พื้นฐานของการทำงานกับโปรแกรมคือการออกแบบภาพของพื้นที่ใช้งานพร้อมการบันทึกผลลัพธ์เพิ่มเติมในไฟล์ในรูปแบบใดรูปแบบหนึ่งที่เลือก โปรแกรมแก้ไขรองรับรูปแบบแผนที่รูปภาพทั้งฝั่งเซิร์ฟเวอร์และฝั่งไคลเอ็นต์ (NCSA และ CERN) สามารถโหลดรูปภาพได้จากไฟล์ GIF และ JPG

นี่คือตัวอย่างไฟล์การกำหนดค่าที่สร้างโดยโปรแกรมนี้ สำหรับตัวอย่างที่ให้ไว้ในส่วนก่อนหน้า ไฟล์ที่บันทึกในรูปแบบ NCSA จะมีลักษณะดังนี้:

#$MTIMFH

#$-:ไฟล์แผนที่รูปภาพที่สร้างโดย Map THIS!

#$-:แผนที่นี้! โปรแกรมแก้ไขแผนที่รูปภาพฟรีโดย Todd C. Wilson

#$-:กรุณาอย่าแก้ไขบรรทัดที่ขึ้นต้นด้วย "#$"

#$เวอร์ชัน:1.30

#$TITLE: เบลซอนส์

#$DESCRIPTION:เวอร์ชันเซิร์ฟเวอร์ของแผนผังรูปภาพ

#$DATE:อังคารที่ 14 กันยายน 12:10:42 1999

#$PATH:C:\ไฟล์โปรแกรม\Mapthis\

#$GIF:Blazons.gif

#$FORMAT:ncsa

#$EOH

ค่าเริ่มต้น default.htm

# ตราแผ่นดินของเมืองทอมสค์

แก้ไข Tomsk.htm 33.60 191.246

# ตราแผ่นดินของเมืองยาคุตสค์

วงกลม Jakutsk.htm 366,147 366,256

# ตราแผ่นดินของเมืองเซนต์ปีเตอร์สเบิร์ก

โพลี Spb.htm 534.62 699.62 698.236 626.261 534.235 534.62

ต่างจากโปรแกรม MapEdit ตรงที่ตัวแก้ไขนี้เขียนข้อมูลคำอธิบายค่อนข้างมากลงในไฟล์เอาท์พุต รวมถึงข้อมูลโดยย่อเกี่ยวกับตัวโปรแกรมเอง วันที่สร้างไฟล์ เป็นต้น นอกจากนี้ หลังสัญลักษณ์ # ซึ่งหมายถึงจุดเริ่มต้นของความคิดเห็น บรรทัด ตัวแก้ไขจะเพิ่มสัญลักษณ์ $ สำหรับบรรทัดความคิดเห็นที่สร้างโดยตัวแก้ไขเอง โปรดใส่ใจกับบรรทัดที่สี่ของโค้ดด้านบน ซึ่งขอให้คุณอย่าแก้ไขความคิดเห็นที่แทรกโดยบรรณาธิการ

ตัวอย่างเดียวกันที่บันทึกในรูปแบบ CERN จะมีลักษณะดังนี้:

ตรง (4096,4096) (4096,4096) mt:#$MTIMFH

rect (4096,4096) (4096,4096) mt:#$-:ไฟล์แผนที่รูปภาพที่สร้างโดย Map THIS!

rect (4096,4096) (4096,4096) mt:#$-:แผนที่นี้! โปรแกรมแก้ไขแผนที่รูปภาพฟรี

โดย ท็อดด์ ซี. วิลสัน

rect (4096,4096) (4096,4096) mt:#$-:โปรดอย่าแก้ไขบรรทัดที่เริ่มต้น

ด้วย "#$"

แก้ไข (4096,4096) (4096,4096) mt:#$VERSION:1.30

ตรง (4096,4096) (4096,4096) mt:#$TITLE: Blazons

แก้ไข (4096,4096) (4096,4096) mt:#$DESCRIPTION: เวอร์ชันของเซิร์ฟเวอร์

แผนที่ภาพ

แก้ไข (4096.4096) (4096.4096) mt:#$

แก้ไข (4096,4096) (4096,4096) mt:#$DATE:อังคาร 14 ก.ย. 12:10:42 1999

แก้ไข (4096,4096) (4096,4096) mt:#$PATH:C:\Program Files\Mapthis\

แก้ไข (4096,4096) (4096,4096) mt:#$GIF:Blazons.gif

แก้ไข (4096,4096) (4096,4096) mt:#$FORMAT:cern

แก้ไข (4096,4096) (4096,4096) mt:#$EOH

ค่าเริ่มต้น default.htm

ตรง (4096,4096) (4096,4096) mt:# ตราแผ่นดินของเมือง Tomsk

สี่เหลี่ยมผืนผ้า (33.60) (191,246) Tomsk.htm

ตรง (4096,4096) (4096,4096) mt:# ตราแผ่นดินของเมืองยาคุตสค์

เซอร์กิต (366,147) 109 Jakutsk.htm

ตรง (4096,4096) (4096,4096) mt:# ตราแผ่นดินของเมืองเซนต์ปีเตอร์สเบิร์ก

รูปหลายเหลี่ยม (534.62) (699.62) (698.236) (626.261) (534.235) (534.62) Spb.htm

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

ตรง (4096,4096) (4096,4096)

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

ตัวอย่างเดียวกันที่บันทึกเป็นไฟล์ HTML (สำหรับแผนที่รูปภาพเวอร์ชันไคลเอ็นต์) จะมีลักษณะดังนี้:

<МАР NAME="Blazons">

ALT="ตราแผ่นดินของเมืองทอมสค์"> !}

ALT="ตราแผ่นดินของเมืองยาคุตสค์"> !}

HREF="Spb.htm" ALT="ตราแผ่นดินของเมืองเซนต์ปีเตอร์สเบิร์ก"> !}

ที่นี่ต่างจากโปรแกรม MapEdit ตรงที่ต้องระบุชื่อของแผนที่รูปภาพด้วยตนเอง ดังนั้นจึงอาจไม่ตรงกับชื่อไฟล์กับรูปภาพอ้างอิง

โปรแกรมครอสอาย

โปรแกรมแก้ไขไฟล์การกำหนดค่า CrossEye สร้างโดย Sausage Software บริษัท ชื่อดังของออสเตรเลีย โปรแกรมนี้จะได้รับการต้อนรับจากแฟน ๆ ของโปรแกรมแก้ไข HTML ยอดนิยม HotDog เนื่องจากมันถูกสร้างขึ้นโดยบริษัทเดียวกันและมีอินเทอร์เฟซที่น่าดึงดูดและมีอารมณ์ขัน

ข้อมูลเกี่ยวกับแพ็คเกจ CrossEye สามารถรับได้จาก:

http://www.sausage.com.au

คุณสมบัติที่โดดเด่นของโปรแกรมคือชุดการแจกจ่ายขนาดค่อนข้างใหญ่ (ประมาณ 2.5 MB) รวมถึงช่วงเวลาสั้น ๆ (14 วัน) ในระหว่างที่สามารถใช้ในโหมดประเมินผลได้ โปรแกรมขนาดใหญ่เป็นเรื่องปกติสำหรับซอฟต์แวร์ทั้งหมดที่สร้างโดย Sausage Software ซึ่งเห็นได้ชัดว่าเกิดจากการเลือกเครื่องมือที่ใช้สำหรับการพัฒนา (Visual Basic)

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

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

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

ในแง่หนึ่งข้อบกพร่องได้รับการชดเชยด้วยคุณสมบัติเพิ่มเติมบางอย่างของตัวแก้ไข โดยเฉพาะอย่างยิ่งคุณจะพบว่านกแก้วซึ่งมองเห็นได้ที่มุมขวาบนของภาพด้านบนเรียกว่าพอลลี่ เขาเป็นคนช่างพูดค่อนข้างมากและผู้ใช้ที่ทำงานบนคอมพิวเตอร์ที่ติดตั้งการ์ดเสียงจะได้ยินเสียงอุทานของนกแก้วเป็นครั้งคราวซึ่งอย่างไรก็ตามไม่เกี่ยวข้องกับการกระทำที่กำลังทำอยู่ และในกล่องโต้ตอบการตั้งค่าตัวแก้ไขตัวใดตัวหนึ่งยังมีรายการพิเศษที่ให้คุณปิดนกแก้วที่น่าสงสารได้ นี่คือตัวอย่างการบริการชั้นยอด เห็นได้ชัดว่าต้องขอบคุณคุณสมบัติที่ระบุไว้จึงประเมินการให้คะแนนของตัวแก้ไขนี้ http://www.tucows.comสูงมากซึ่งไม่สามารถพูดได้เกี่ยวกับทั้งสองโปรแกรมที่อธิบายไว้ข้างต้น

ท้ายที่สุดแล้ว ตัวเลือกของโปรแกรมแก้ไขเพื่อสร้างแผนที่รูปภาพนั้นขึ้นอยู่กับผู้ใช้

วลาด เมอร์เซวิช

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

ในเวอร์ชันไคลเอ็นต์ แผนที่จะอยู่ในเอกสาร HTML เดียวกันกับลิงก์ไปยังรูปภาพ

เวอร์ชันไคลเอ็นต์ของแผนผังรูปภาพ

หากต้องการระบุว่ารูปภาพเป็นแผนที่ ให้ใช้แอตทริบิวต์ usemap ของแท็ก . ค่าคือลิงก์ไปยังคำอธิบายของการกำหนดค่าการ์ด

ตัวอย่างที่ 1: การใช้แผนที่รูปภาพ

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

แอตทริบิวต์แท็ก AREA

รูปร่าง

กำหนดรูปร่างของพื้นที่ใช้งาน รูปร่างสามารถอยู่ในรูปวงกลม (วงกลม) สี่เหลี่ยมผืนผ้า (สี่เหลี่ยม) รูปหลายเหลี่ยม (โพลี)

ทางเลือกอื่น

เพิ่มข้อความแสดงแทนสำหรับแต่ละพื้นที่ ทำหน้าที่เป็นความคิดเห็นสำหรับลิงก์เท่านั้น เนื่องจากไม่ได้แสดงบนหน้าจอ

พิกัด

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

สำหรับวงกลม จะมีการระบุตัวเลขสามตัว ได้แก่ พิกัดของจุดศูนย์กลางของวงกลมและรัศมี

สำหรับสี่เหลี่ยมผืนผ้า คือพิกัดของมุมซ้ายบนและมุมขวาล่าง

สำหรับรูปหลายเหลี่ยม พิกัดของจุดยอดจะถูกระบุ (รูปที่ 2)

ข้าว. 2. จุดพิกัดของรูปหลายเหลี่ยม

href

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

ประโยชน์ของแผนที่รูปภาพ

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

2. สะดวกกว่าในการทำงานกับไฟล์เดียว - คุณไม่ต้องกังวลกับการเข้าร่วมแต่ละส่วนและสามารถวางภาพวาดในตำแหน่งที่ถูกต้องได้อย่างง่ายดาย

ข้อบกพร่อง

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

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

3. ด้วยการ์ดรูปภาพ คุณไม่สามารถสร้างเอฟเฟ็กต์ต่างๆ ที่พร้อมใช้งานเมื่อตัดรูปภาพหนึ่งภาพออกเป็นส่วนๆ ได้: เอฟเฟกต์การกลิ้ง แอนิเมชั่นบางส่วน การปรับรูปภาพแต่ละภาพให้เหมาะสมเพื่อการโหลดที่รวดเร็ว

การใช้งาน

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

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

ทางเลือกอื่น

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

การใช้แฟลช

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

การแบ่งส่วนรูปภาพ

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

สรุป

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

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

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

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

ตอนนี้ถึงเวลาที่จะเริ่มสร้างแผนที่รูปภาพในรูปแบบ HTML แล้ว ในวิดีโอนี้ เราจะพูดถึงข้อมูลค่อนข้างมาก โดยเริ่มจากทฤษฎีและไปสู่การปฏิบัติ

เริ่มต้นด้วยการเรียนรู้แท็ก HTML อีกสองแท็ก ซึ่งก็คือแท็ก

แผนที่แท็ก HTML

แท็ก

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

พื้นที่แท็ก HTML

แท็ก มีหน้าที่ระบุพื้นที่ใช้งานภายในคอนเทนเนอร์

ในที่นี้ ฉันอยากจะพูดถึงบางสิ่งที่ฉันลืมพูดในบทเรียนวิดีโอด้วยว่าแท็กนี้สามารถแทนที่ด้วยแท็กเพื่อระบุไฮเปอร์ลิงก์ในเอกสาร HTML ได้อย่างง่ายดาย นั่นก็คือแท็ก . ถ้าจำได้ก็อยู่ที่แท็ก มีคุณลักษณะรูปร่างและพิกัดที่เหมือนกันทุกประการ ซึ่งมีจุดประสงค์เพื่อระบุรูปร่างฐานและพิกัดโดยเฉพาะ

การกำหนดพิกัดของสี่เหลี่ยมจัตุรัส สี่เหลี่ยม วงกลม และรูปหลายเหลี่ยม

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

ขั้นแรก เราจะดูรายละเอียดในทางทฤษฎีเกี่ยวกับวิธีการกำหนดพิกัดของสี่เหลี่ยมจัตุรัส จากนั้นวงกลม และสุดท้ายสำหรับรูปหลายเหลี่ยม

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

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

บทเรียนวิดีโอ: การสร้างแผนที่รูปภาพในรูปแบบ HTML

ไดเรกทอรี HTML และสื่ออื่นๆ สามารถดาวน์โหลดได้!

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

ภาพ HTMLเพิ่มไปยังหน้าเว็บโดยใช้แท็ก . การใช้กราฟิกทำให้หน้าเว็บดูน่าดึงดูดยิ่งขึ้น รูปภาพช่วยถ่ายทอดสาระสำคัญและเนื้อหาของเอกสารเว็บได้ดียิ่งขึ้น

การใช้แท็ก HTML

การแทรกรูปภาพลงในเอกสาร HTML

1. แท็ก

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

หรือ