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

ทฤษฎี

มาเริ่มกันที่ทฤษฎี เราจะอยู่ที่ไหนถ้าไม่มีมัน? แผนที่รูปภาพมีสองแท็ก: แผนที่- ที่เก็บการ์ดและ พื้นที่- โซนการเลือก แผนที่ไม่ได้จำกัดอยู่เพียงโซนเดียวและสามารถบรรจุได้ไม่จำกัดจำนวน แท็ก พื้นที่นอกจากคุณสมบัติมาตรฐานแล้ว ยังมีคุณสมบัติของตัวเองอีกด้วย:

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

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

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

เราเขียนโปรแกรมระบายสี

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

ขั้นแรก มาเตรียมเค้าโครงกันก่อน:

ปุ่มสำหรับควบคุมสีจะถูกแทรกลงใน #bar
รหัส html ที่สร้างขึ้นจะแสดงใน #info

เนื้อความ ( ระยะขอบ: 0; การขยาย: 20px; ตระกูลฟอนต์: Arial, Helvetica, sans-serif; ) img ( เส้นขอบ: ไม่มี; โครงร่าง: ไม่มี; จอแสดงผล: บล็อก; -moz-user-select: ไม่มี; -webkit-user -select: none; ผู้ใช้เลือก: none; ) .canvas ( border: 2px solid #333; padding: 2px; margin-bottom: 16px; display: inline-block; //display: inline; //zoom:1; ) .canvas.draw ( สีเส้นขอบ: #3C0; ) .canvas .inner ( ตำแหน่ง: สัมพันธ์; ) .canvas .point ( ความกว้าง: 1px; ความสูง: 1px; สีพื้นหลัง: #fff; เส้นขอบ: 1px solid #000 ; ล้น: ซ่อนอยู่; ตำแหน่ง: สัมบูรณ์; ) .bar ( ขอบล่าง: 16px; ) .info ( สีพื้นหลัง: #FCFCFC; เส้นขอบ: 1px จุด #CCC; ขนาดตัวอักษร: 12px; รูปแบบตัวอักษร: ตัวเอียง; : 8px; word-wrap: แบ่งคำ;
ในจาวาสคริปต์ ทุกอย่างค่อนข้างง่าย ในระหว่างกระบวนการเขียน ฉันใช้ไลบรารีการต่อสู้ของตัวเอง ดังนั้นอย่าแปลกใจกับฟังก์ชันที่ไม่ได้มาตรฐาน ก่อนอื่น เรามาแนบเหตุการณ์การเลื่อนเมาส์ไปที่ #canvas ซึ่งมีจุดบนรูปภาพ จะแสดงผลและพิกัดของมันจะถูกบันทึก

Var addPoint = function(e)( var e = _.getEvent(e), offset = _.getOffset(nodes["canvas"]), x = e.clientX + _.getDocScrollLeft() - offset, y = e clientY + _.getDocScrollTop() - ออฟเซ็ต, โหนด = โหนด ["canvas"].appendChild(_.node("div", ("class": "จุด"))); node.style.top = y-1 +"px"; node.style.left = x-1+"px"; point.push(("x" : x, "y" : y, "node" : node)); ;
จากนั้นเราจะเขียนฟังก์ชันที่จะสร้างโค้ด html ของแผนที่ของเรา

Var renderInfo = function())( var text; _.clearNode(nodes["info"]); nodes["info"].appendChild(_.node("span", " ")); };
) ข้อความ += "">"; nodes["info"].appendChild(_.node("span", text)); nodes["info"].appendChild(_.node("br"); ) ) โหนด ["ข้อมูล"].appendChild(_.node("span", "

มาจัดเฟรมทุกอย่างในคลาสกัน ฟังก์ชันตัวช่วยสองสามฟังก์ชัน แค่นั้นเอง ฉันหวังว่าเครื่องมือนี้จะเป็นประโยชน์กับใครบางคน

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

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

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

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

แผนที่แท็ก HTML

แท็ก

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

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

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

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

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

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

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

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

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

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

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

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

ในเอกสาร html

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

อย่ากลัวเลย มันไม่ยากเลย สิ่งที่สำคัญที่สุดคือการเข้าใจทฤษฎีและรวมเข้ากับการปฏิบัติ

เอาล่ะ มาดูทฤษฎีกันดีกว่า

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

คุณลักษณะพื้นที่

1. คุณลักษณะรูปร่าง
รูปร่าง – กำหนดรูปร่างของพื้นที่ ( สี่เหลี่ยม วงกลม รูปหลายเหลี่ยม).
สี่เหลี่ยมผืนผ้า - "ตรง" ตัวอย่าง: รูปร่าง =" ตรง";
วงกลม - "วงกลม" ตัวอย่าง: รูปร่าง =" วงกลม";
รูปหลายเหลี่ยม - "โพลี" ตัวอย่าง: รูปร่าง =" โพลี"

2. แอตทริบิวต์ coords
coords คือการจัดเรียงรูปทรงเรขาคณิต

ลองดูตัวอย่างโดยใช้รูปทรงเรขาคณิตของสี่เหลี่ยม

คุณรู้อยู่แล้วว่าหากคุณต้องการรูปทรงสี่เหลี่ยมผืนผ้า คุณต้องตั้งค่าในแอตทริบิวต์รูปร่าง « ตรง ».

จุดอ้างอิงเริ่มต้นจากมุมซ้ายบนของภาพซึ่งมีพิกัดคือ (0;0)

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

สำหรับตัวอย่างที่มีสี่เหลี่ยมผืนผ้าหมายเลข 1 ให้ใช้พิกัดต่อไปนี้:

x1=25, y1=36, x2=114, y2=98

นี่คือลักษณะของโค้ด:

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

ตอนนี้เรามาเชื่อมต่อการ์ดกับรูปภาพกัน ในการดำเนินการนี้ เราใช้แอตทริบิวต์ usemap
ตัวอย่างการเขียน:
usemap=" #map_name"

ในกรณีของเรามันจะเป็นดังนี้:

ทีนี้มารวบรวมทุกอย่างเข้าด้วยกันแล้วจดพิกัดของสี่เหลี่ยมหมายเลข 2 อีกอันที่มีข้อมูลเดียวกัน (x1=153, y1=11, x2=219, y2=127)

ตอนนี้ดูผลลัพธ์ คลิกที่สี่เหลี่ยม #1 และสี่เหลี่ยม #2

ก่อนอื่นคุณต้องระบุประเภทพื้นที่ เมื่อต้องการทำเช่นนี้ ให้ตั้งค่า "วงกลม" ในแอตทริบิวต์รูปร่าง

ตอนนี้เรามาดูพิกัดกันดีกว่า
ในการสร้างพิกัดสำหรับพื้นที่วงกลม คุณต้องป้อนข้อมูลที่จุดศูนย์กลาง (xy) และระบุความยาวของรัศมี (R)
ลำดับของพิกัดการบันทึกสำหรับแอตทริบิวต์ coords จะเป็นดังนี้:

สำหรับวงกลมหมายเลข 1 ให้ใช้พิกัดต่อไปนี้:

x=46, y=48; และความยาวรัศมีคือ R=35

ตอนนี้เรามารวบรวมทุกอย่างเข้าด้วยกันแล้วจดพิกัดของวงกลมหมายเลข 2 ด้วยข้อมูลต่อไปนี้ x=158, y=75, R=53

ตอนนี้ดูผลลัพธ์ คลิกที่วงกลม #1 และวงกลม #2:

พื้นที่รูปหลายเหลี่ยมเป็นพื้นที่ที่ซับซ้อนที่สุดในแผนที่นำทาง

ก่อนอื่นคุณต้องระบุประเภทพื้นที่ เมื่อต้องการทำเช่นนี้ ให้ตั้งค่า "poly" ในแอตทริบิวต์รูปร่าง

ตอนนี้เรามาดูพิกัดกันดีกว่า

ลำดับของพิกัดการบันทึกสำหรับแอตทริบิวต์ coords จะเป็นดังนี้:

คำอธิบาย:
x1 ,y1 - พิกัดมุมแรก
x2 ,y2 - พิกัดมุมที่สอง
xN,yN - พิกัดโค้งสุดท้าย

นั่นคือสำหรับรูปหลายเหลี่ยมหมายเลข 2 ดูเหมือนว่า:

ตอนนี้เรามาตั้งชื่อแผนที่และเชื่อมโยงแผนที่เข้ากับรูปภาพ:

ตอนนี้เรามารวบรวมทุกอย่างเข้าด้วยกันแล้วจดพิกัดสำหรับรูปหกเหลี่ยมหมายเลข 1 ด้วยข้อมูลต่อไปนี้: x1=54, y1=20, x2=109, y2=20, x3=147, y3=58, x4=109, y4= 96, x5= 54, y5=96, x6=16, y6=58

ตอนนี้ดูผลลัพธ์ คลิกที่รูปหลายเหลี่ยม #1 และรูปหลายเหลี่ยม #2:

ความเป็นไปได้ของการรวมกัน

มีหลายกรณีที่คุณต้องการใช้พื้นที่ที่แตกต่างกันในเวลาเดียวกันในรูปภาพเดียว เช่น วงกลมและสี่เหลี่ยมผืนผ้า:

นอกจากนี้โดยใช้ TITLE

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

ตอนนี้ดูผลลัพธ์ วางเมาส์เหนือวงกลมแล้วเหนือสี่เหลี่ยม:

นั่นคือทั้งหมดที่ เราหาแผนที่รูปภาพในรูปแบบ HTML (แผนที่นำทาง)

แท็ก HTML

ความหมายและการประยุกต์

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

รองรับเบราว์เซอร์

แท็ก			โอเปร่า		ไอเอ็กซ์พลอเรอร์	ขอบ
	ใช่	ใช่	ใช่	ใช่	ใช่	ใช่

คุณสมบัติ

คุณสมบัติของแท็ก เราระบุทั้งพิกัดของพื้นที่ (แอตทริบิวต์ coords) และประเภทของรูปร่างที่เราต้องการ (แอตทริบิวต์รูปร่าง):

ตัวอย่างการใช้งาน

ลองดูตัวอย่างที่เมื่อคุณคลิกที่รูปร่างใดรูปร่างหนึ่งในภาพเดียว คุณจะไปที่หน้าเว็บต่างๆ ที่อธิบายรูปร่างเหล่านี้ (ลิงก์ไปยัง Wikipedia):

เลือกรูป:

"มี 4 รูปทรงให้เลือก" >

ตามลำดับ สิ่งที่เราทำในตัวอย่างนี้:

• ลงรูปภาพ (tag ) ซึ่งเราจะใช้ในภายหลังในการสร้างแผนที่รูปภาพ ในแอตทริบิวต์ usemap คุณต้องระบุชื่อของภาพแผนที่ที่เราจะใช้ในองค์ประกอบ
• วางภาพแผนที่ (tag
• วางสี่แท็ก ซึ่งกำหนดพื้นที่โต้ตอบในภาพแผนที่:
  • อันดับแรกเราถาม พื้นที่สี่เหลี่ยม(แอตทริบิวต์รูปร่างที่มีค่า "rect") ซึ่งสอดคล้องกับของเรา อันดับแรกภาพ ( สองคนแรกค่าต่างๆ จะตรงกับมุมซ้ายบนดังนี้ สองค่ากำหนดมุมขวาบนและล่าง)
  • ที่สองระบุ พื้นที่ทรงกลม(แอตทริบิวต์รูปร่างที่มีค่า "วงกลม") ซึ่งสอดคล้องกับของเรา ที่สองภาพ ( อันดับแรกค่าสอดคล้องกับพิกัดแกน xและอันที่สองตามแนวแกน ยบุคคลที่สามเป็นผู้กำหนด รัศมี).
  • เกี่ยวกับ สามและ รูปที่สี่แล้วเรียบเรียงตามหลักการ พื้นที่รูปหลายเหลี่ยม(แอตทริบิวต์รูปร่างที่มีค่า "โพลี") คุณกำหนดจำนวนจุดที่ต้องการในภาพคำนวณพิกัดของจุดเหล่านี้ (โปรแกรมแก้ไขกราฟิก) และระบุตามลำดับที่เบราว์เซอร์สามารถเชื่อมต่อด้วยบรรทัดเดียว ใช้รูปสามเหลี่ยมเป็นตัวอย่าง (ภาพที่ 3): อันดับแรกจุด (พิกัด xและ ยจุดยอด) ที่สองจุด (พิกัด xและ ยมุมซ้ายล่าง) และ ที่สามจุด (พิกัด xและ ยมุมขวาล่าง)

ฉันดึงความสนใจของคุณไปที่ความจริงที่ว่าหากแท็ก