แท็กใดที่อธิบายการแมปรูปภาพไคลเอ็นต์ แผนที่รูปภาพในรูปแบบ HTML แอตทริบิวต์แท็ก AREA

"ฉันสร้างเทมเพลตสำหรับวางลิงก์ไปยังหน้าเว็บต่างๆ (“”) ในบางพื้นที่ของหน้านั้น

ตอนนี้หากคุณคลิกที่ตัวเลขพร้อมคำจารึก หน้าเว็บที่เกี่ยวข้องจะเปิดขึ้น: โปรไฟล์ ไดอารี่ หรือโพสต์ทั้งหมดจากส่วน “ บทเรียน Photoshop"(โปรดทราบ! หลังจากย้ายบล็อกไปยัง WordPress และออกแบบใหม่แล้ว ลิงก์ใช้งานไม่ได้! แต่บทเรียนยังคงมีความเกี่ยวข้อง!)

เพื่อให้รูปภาพใช้งานได้ ฉันเขียนโค้ด HTML ต่อไปนี้โดยประมาณ:

สามารถแทรกรหัสนี้ลงในช่องข้อความ (โดยกดปุ่ม "แหล่งที่มา") หรือใน epigraph...

อย่างไรก็ตามมีโพสต์อื่น ๆ ในหัวข้อ: “HTML คืออะไร", "รหัส HTML ของรูปภาพ", "ลิงค์รูปภาพ” และอื่นๆ

1. พิกัด

ในการเขียนโค้ดข้างต้น ฉันจำเรขาคณิตได้นิดหน่อย :)

ระบบพิกัด: แกน X - บนลงล่าง แกน Y - จากซ้ายไปขวา
ในการกำหนดพิกัดของรูป คุณต้องตั้งค่า:
- สี่เหลี่ยมจัตุรัส (หรือสี่เหลี่ยมผืนผ้า) ซึ่งด้านข้างขนานกับแกน - พิกัดของมุมที่ตรงกันข้ามสองมุม - X1, Y1 และ X2, Y2
- รูปหลายเหลี่ยม - พิกัดของทุกมุม
— วงกลม — พิกัดกึ่งกลางและรัศมี

ในกรณีของฉัน ปรากฎว่าฉันต้องการพิกัด จุด A,C— สำหรับลิงค์ “โปรไฟล์” (สี่เหลี่ยม) จุด D,E,F,G,H— สำหรับลิงก์ “Diary” (รูปหลายเหลี่ยม), Q และความยาว R — สำหรับลิงก์ “บทช่วยสอน Photoshop” (วงกลม) ตัวเลขทั้งหมดนี้ในโค้ด HTML ด้านบนจะถูกเน้นด้วยสีแดง

นอกจากนี้คุณต้องทราบขนาดของภาพเป็นพิกเซล (สีเขียว) ไม่จำเป็นต้องมีความแม่นยำพิเศษดังนั้นคุณจึงสามารถกำหนดพิกัดโดยใช้ "ไม้บรรทัด" ใน Photoshop - เพื่อเรียกมันว่าคลิก

Ctrl+R มันน่าสนใจกว่าสำหรับฉันที่จะให้คนอื่นคำนวณพิกัด เพื่อทำเช่นนี้ฉันเปิดตัวเอ็มเอส เพ้นท์

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

2. รหัส HTML

แผนที่การนำทางจะถูกระบุโดยแท็ก แท็กแผนที่ประกอบด้วยแท็ก

ซึ่งกำหนดขอบเขตทางเรขาคณิตของแผนที่รูปวาดและลิงก์ที่เกี่ยวข้อง

— นี่คือวิธีที่ฉันคิดออก: เพื่อสร้างแผนที่นำทางที่คุณต้องการ:

— แท็กพร้อมคำอธิบายภาพ

— แท็กแผนที่

แท็กพื้นที่

• ในกรณีของฉันค่ากลายเป็น: ความกว้าง="640" ความสูง="367"
• – ขนาดภาพ
• src="https://site/f02c73a3cd94.jpg" - ที่อยู่รูปภาพบนเว็บไซต์ ใช้แผนที่ = #รูปภาพ" — ชื่อธรรมดาของแผนที่รูปภาพ
• (สามารถเป็นอะไรก็ได้) ชื่อแผนที่="รูปภาพ" (— ชื่อการ์ด อย่างเต็มที่

ค่าสำหรับพื้นที่ลิงก์—href—เป้าหมายของลิงก์ รูปร่าง—รูปร่างของพื้นที่ และพิกัด—พิกัด—สอดคล้องกับสามพื้นที่ในภาพ

สี่เหลี่ยมผืนผ้า "โปรไฟล์"

• href="https://site/profile/" — ที่อยู่หน้าโปรไฟล์
• shape="rect" - การกำหนดรูปร่าง "สี่เหลี่ยมผืนผ้า"
• coords="235,61,472,117" — พิกัดของจุด A (235,61) และ C (472,117)

รูปหลายเหลี่ยม "ไดอารี่"

• href="https://site/blog" - ที่อยู่ของหน้าไดอารี่
• shape="poly" - การกำหนดรูปร่าง "รูปหลายเหลี่ยม"
• coords="235,118,362,118,474,152,457,207,229,146" - พิกัดของมุมของรูปหลายเหลี่ยม: จุด D (235,118), E (362,118), F (474,152), G (457,207) และ H (229,146)

วงกลม "บทเรียน Photoshop"

• href="https://site/showjournal.php?journalid=2447247&keywordid=929323" — ที่อยู่ของหน้าโพสต์จากส่วน “บทช่วยสอน Photoshop”
• shape="circle" - การกำหนดรูปร่าง "วงกลม"
• coords="551,198,65" — พิกัดวงกลม: ศูนย์กลาง — จุด Q (551,198) และรัศมี — R=65

3. เสร็จสิ้น

ฉันแทนที่ค่าที่ได้รับทั้งหมดลงในโค้ด HTML “ระบบ” สำหรับแผนที่รูปภาพการนำทางและได้รับสิ่งต่อไปนี้:

เป็นรหัสนี้ที่เมื่อใช้แล้ว "เปลี่ยน" เป็นรูปภาพพร้อมพื้นที่ลิงก์

สำหรับการฝึกอบรมมีตัวเลือกง่ายๆ "น้ำหนักเบา" สำหรับการสร้างพื้นที่ลิงก์ - โพสต์ "การฝึกอบรม: พื้นที่ลิงก์ในภาพ"

หากคุณพบข้อผิดพลาด โปรดเน้นข้อความและคลิก Ctrl+ป้อน.

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

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

แผนที่รูปภาพประกอบด้วยขอบเขตรูปภาพและลิงก์ที่เกี่ยวข้อง .

อธิบายส่วนของรูปภาพและกำหนดแท็กเดียวให้เป็นลิงก์

คุณสมบัติของแท็ก

ตามค่าเริ่มต้น พิกัดจะวัดเป็นพิกเซล

แหล่งกำเนิดพิกัดอยู่ที่มุมซ้ายบนของหน้าจอ เช่น

ตัวอย่างรูปร่างต่างๆ ของพื้นที่แผนที่รูปภาพ

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

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

เมื่อคุณคลิกที่พื้นที่ต่างๆ ของรูปภาพที่กำหนด สีของข้อความที่เกี่ยวข้องจะเปลี่ยนไป

ในเอกสาร html

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

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

สำหรับตัวอย่างที่มีสี่เหลี่ยมผืนผ้าหมายเลข 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:

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

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

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

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

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

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

ภายในภาชนะ

องค์ประกอบ มีคุณสมบัติดังต่อไปนี้

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

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

.

แท็ก มีแอตทริบิวต์ src ที่จำเป็นซึ่งค่าเป็นเส้นทางสัมบูรณ์หรือสัมพัทธ์ไปยังรูปภาพ:

สำหรับแท็ก มีแอตทริบิวต์ต่อไปนี้:

ตารางที่ 1. แอ็ตทริบิวต์แท็ก

คุณลักษณะ	คำอธิบาย ค่าที่ยอมรับ
ทางเลือกอื่น	แอตทริบิวต์ alt จะเพิ่มข้อความแสดงแทนลงในรูปภาพ แสดงตำแหน่งที่รูปภาพปรากฏก่อนโหลดหรือเมื่อปิดใช้งานกราฟิก และยังแสดงเป็นคำแนะนำเครื่องมือเมื่อวางเมาส์ไว้เหนือรูปภาพ ไวยากรณ์: alt="image description" . !}
ครอสออริจิน	แอตทริบิวต์ crossorigin ช่วยให้คุณโหลดรูปภาพจากทรัพยากรบนโดเมนอื่นโดยใช้คำขอ CORS ภาพที่โหลดลงในแคนวาสโดยใช้คำขอ CORS สามารถนำมาใช้ซ้ำได้ ค่าที่อนุญาต: ไม่ระบุชื่อ - คำขอข้ามแหล่งกำเนิดถูกสร้างขึ้นโดยใช้ส่วนหัว HTTP และไม่มีการส่งข้อมูลรับรอง หากเซิร์ฟเวอร์ไม่ได้ให้ข้อมูลประจำตัวแก่เซิร์ฟเวอร์ที่มีการร้องขอเนื้อหา รูปภาพจะเสียหายและการใช้งานจะถูกจำกัด use-credentials - คำขอ Cross-origin ดำเนินการโดยการส่งผ่านข้อมูลรับรอง ไวยากรณ์: crossorigin="anonymous"
ความสูง	แอตทริบิวต์ height ระบุความสูงของภาพในหน่วย px ไวยากรณ์: height="300" .
อิสแมป	คุณลักษณะ ismap ระบุว่ารูปภาพเป็นส่วนหนึ่งของภาพแผนที่ที่อยู่บนเซิร์ฟเวอร์ (ภาพแผนที่คือภาพที่มีพื้นที่ที่สามารถคลิกได้) เมื่อคุณคลิกที่ภาพแผนที่ พิกัดจะถูกส่งไปยังเซิร์ฟเวอร์เป็นสตริงการสืบค้น URL แอตทริบิวต์ ismap จะได้รับอนุญาตเฉพาะในกรณีที่องค์ประกอบ เป็นผู้สืบทอดของธาตุ ด้วยแอตทริบิวต์ href ที่ถูกต้อง ไวยากรณ์: ismap
ยาว	URL คำอธิบายรูปภาพแบบขยายที่เสริมแอตทริบิวต์ alt ไวยากรณ์: longdesc="http://www.example.com/description.txt"
src	แอตทริบิวต์ src ระบุเส้นทางไปยังรูปภาพ ไวยากรณ์: src="flower.jpg"
ขนาด	ตั้งค่าขนาดภาพขึ้นอยู่กับตัวเลือกการแสดงผล ใช้งานได้เฉพาะเมื่อมีการระบุแอตทริบิวต์ srcset ค่าแอตทริบิวต์คือหนึ่งสตริงขึ้นไป คั่นด้วยเครื่องหมายจุลภาค
srcset	สร้างรายการแหล่งรูปภาพที่จะเลือกตามความละเอียดของหน้าจอ สามารถใช้ร่วมกับหรือแทนแอตทริบิวต์ src ได้ ค่าแอตทริบิวต์คือหนึ่งสตริงขึ้นไป คั่นด้วยเครื่องหมายจุลภาค
แผนที่การใช้งาน	แอตทริบิวต์ usemap ระบุรูปภาพเป็นแผนที่รูปภาพ ค่าต้องขึ้นต้นด้วยสัญลักษณ์ # ค่านี้เชื่อมโยงกับค่าของชื่อแท็กหรือแอตทริบิวต์ id
ความกว้าง	แอตทริบิวต์ width ระบุความกว้างของภาพในหน่วย px ไวยากรณ์: width="500"

1.1. ที่อยู่รูปภาพ

ที่อยู่รูปภาพสามารถระบุได้แบบเต็ม (URL สัมบูรณ์) เช่น:
URL (http://anysite.ru/images/anyphoto.png)

หรือผ่านทางเส้นทางสัมพัทธ์จาก เอกสารหรือ ไดเรกทอรีรากเว็บไซต์:
url(../images/anyphoto.png) - เส้นทางสัมพันธ์จากเอกสาร
url(/images/anyphoto.png) - เส้นทางสัมพันธ์จากไดเรกทอรีราก

สิ่งนี้ถูกตีความดังนี้:
../ - หมายถึงขึ้นไปหนึ่งระดับไปยังไดเร็กทอรีราก
รูปภาพ/ - ไปที่โฟลเดอร์ที่มีรูปภาพ
anyphoto.png - ชี้ไปที่ไฟล์รูปภาพ

1.2. ขนาดภาพ

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

1.3. รูปแบบไฟล์กราฟิก

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

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

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

รูปแบบ APNG (กราฟิกเครือข่ายแบบพกพาแบบเคลื่อนไหว)- รูปแบบภาพขึ้นอยู่กับ รูปแบบ PNG- ช่วยให้คุณสามารถจัดเก็บภาพเคลื่อนไหวและยังรองรับความโปร่งใส

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

รูปแบบบีเอ็มพี (รูปภาพบิตแมป)- หมายถึงไม่มีการบีบอัด (ต้นฉบับ) ภาพแรสเตอร์ซึ่งมีเทมเพลตเป็นตารางสี่เหลี่ยมพิกเซล ไฟล์บิตแมปประกอบด้วยส่วนหัว จานสี และข้อมูลกราฟิก ส่วนหัวเก็บข้อมูลเกี่ยวกับภาพกราฟิกและไฟล์ (ความลึกของพิกเซล ความสูง ความกว้าง และจำนวนสี) จานสีจะแสดงเฉพาะในไฟล์บิตแมปที่มีภาพจานสี (8 บิตหรือน้อยกว่า) และประกอบด้วยองค์ประกอบไม่เกิน 256 รายการ ข้อมูลกราฟิกแสดงถึงรูปภาพนั้นเอง ความลึกของสี รูปแบบนี้สามารถเป็น 1, 2, 4, 8, 16, 24, 32, 48 บิตต่อพิกเซล

รูปแบบ ICO (ไอคอนวินโดวส์)- รูปแบบการจัดเก็บไฟล์ไอคอนในรูปแบบ ไมโครซอฟต์ วินโดวส์- นอกจากนี้ ไอคอน Windows ยังใช้เป็นไอคอนบนเว็บไซต์บนอินเทอร์เน็ตอีกด้วย เป็นรูปภาพรูปแบบนี้ที่แสดงถัดจากที่อยู่เว็บไซต์หรือบุ๊กมาร์กในเบราว์เซอร์ ไฟล์ ICO หนึ่งไฟล์ประกอบด้วยไอคอนตั้งแต่หนึ่งไอคอนขึ้นไป โดยสามารถตั้งค่าขนาดและสีของแต่ละไอคอนแยกกันได้ ขนาดไอคอนสามารถเป็นขนาดใดก็ได้ แต่ขนาดที่พบบ่อยที่สุดคือไอคอนสี่เหลี่ยมจัตุรัสที่มีด้าน 16, 32 และ 48 พิกเซล

2. แท็ก

แท็ก

แท็ก มีแอตทริบิวต์ name ซึ่งระบุชื่อของแผนที่ ค่าของแอตทริบิวต์ชื่อสำหรับแท็ก

องค์ประกอบ

3. แท็ก

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

ตารางที่ 2. แอ็ตทริบิวต์แท็ก

คุณลักษณะ	คำอธิบายสั้น ๆ
ทางเลือกอื่น	ตั้งค่าข้อความแสดงแทนสำหรับพื้นที่แผนที่ที่ใช้งานอยู่
พิกัด	กำหนดตำแหน่งของพื้นที่บนหน้าจอ พิกัดระบุเป็นหน่วยความยาวและคั่นด้วยเครื่องหมายจุลภาค: สำหรับ วงกลม- พิกัดศูนย์กลางและรัศมีของวงกลม สำหรับ สี่เหลี่ยมผืนผ้า- พิกัดมุมซ้ายบนและมุมขวาล่าง สำหรับ รูปหลายเหลี่ยม— พิกัดของจุดยอดรูปหลายเหลี่ยมตามลำดับที่ต้องการ แนะนำให้ระบุพิกัดสุดท้ายซึ่งเท่ากับพิกัดแรกเพื่อความสมบูรณ์ของรูป
ดาวน์โหลด	เสริมแอตทริบิวต์ href และบอกเบราว์เซอร์ว่าควรโหลดทรัพยากรทันทีที่ผู้ใช้คลิกลิงก์ แทนที่จะต้องเปิดก่อน (เช่น ไฟล์ PDF) โดยการระบุชื่อสำหรับแอตทริบิวต์ เรากำลังตั้งชื่อให้กับวัตถุที่โหลด อนุญาตให้ใช้แอตทริบิวต์โดยไม่ต้องระบุค่าของมัน
href	ระบุ URL สำหรับลิงก์ สามารถระบุที่อยู่ลิงก์แบบสัมบูรณ์หรือแบบสัมพันธ์ได้
hreflang	ระบุภาษาของเอกสารเว็บที่เกี่ยวข้อง ใช้ร่วมกับแอตทริบิวต์ href เท่านั้น ค่าที่ยอมรับคือตัวย่อที่ประกอบด้วยตัวอักษรคู่หนึ่งที่ระบุรหัสภาษา
สื่อ	กำหนดประเภทของอุปกรณ์ที่จะปรับให้เหมาะสมสำหรับไฟล์ ค่านี้สามารถเป็นคิวรีสื่อใดก็ได้
ญาติ	ขยายแอตทริบิวต์ href ด้วยข้อมูลเกี่ยวกับความสัมพันธ์ระหว่างเอกสารปัจจุบันและเอกสารที่เกี่ยวข้อง ค่าที่ยอมรับ: ทางเลือก - เชื่อมโยงไปยัง เวอร์ชันทางเลือกเอกสาร (เช่น แบบฟอร์มหน้าที่พิมพ์ การแปล หรือมิเรอร์) ผู้เขียน — ลิงก์ไปยังผู้เขียนเอกสาร บุ๊กมาร์ก - URL ถาวรที่ใช้สำหรับบุ๊กมาร์ก ความช่วยเหลือ - ลิงก์ไปยังความช่วยเหลือ ใบอนุญาต - ลิงก์ไปยังข้อมูลลิขสิทธิ์สำหรับเอกสารเว็บนี้ ถัดไป/ก่อนหน้า - ระบุความสัมพันธ์ระหว่าง URL แต่ละรายการ ด้วยมาร์กอัปนี้ Google สามารถระบุได้ว่าเนื้อหาของหน้าเหล่านี้เกี่ยวข้องกันในลำดับเชิงตรรกะ nofollow - ห้าม เครื่องมือค้นหาตามลิงค์ในหน้านี้หรือลิงค์เฉพาะ noreferrer - ระบุว่าเมื่อติดตามลิงก์ เบราว์เซอร์ไม่ควรส่งส่วนหัวคำขอ HTTP (ผู้อ้างอิง) ซึ่งจะบันทึกข้อมูลเกี่ยวกับหน้าที่ผู้เยี่ยมชมไซต์มาจาก ดึงข้อมูลล่วงหน้า - ระบุว่าควรแคชเอกสารเป้าหมาย เช่น เบราว์เซอร์ใน พื้นหลังโหลดเนื้อหาของหน้าลงในแคช ค้นหา - ระบุว่าเอกสารเป้าหมายมีเครื่องมือค้นหา แท็ก - บ่งชี้ คำหลักสำหรับเอกสารปัจจุบัน
รูปร่าง	ระบุรูปร่างของพื้นที่ที่ใช้งานอยู่บนแผนที่และพิกัด สามารถรับค่าต่อไปนี้: สี่เหลี่ยมผืนผ้า - พื้นที่ใช้งานเป็นรูปสี่เหลี่ยมผืนผ้า วงกลม — พื้นที่ใช้งานในรูปของวงกลม โพลี — พื้นที่ใช้งานในรูปของรูปหลายเหลี่ยม; ค่าเริ่มต้น - พื้นที่ใช้งานจะครอบครองพื้นที่ทั้งหมดของภาพ
เป้า	ระบุตำแหน่งที่จะดาวน์โหลดเอกสารเมื่อมีการคลิกลิงก์ รับค่าต่อไปนี้: _self — เพจถูกโหลดเข้าสู่หน้าต่างปัจจุบัน _blank — หน้าจะเปิดขึ้นในหน้าต่างเบราว์เซอร์ใหม่ _parent — เพจถูกโหลดลงในเฟรมพาเรนต์ _top - หน้าเว็บโหลดในหน้าต่างเบราว์เซอร์แบบเต็ม
พิมพ์	ระบุประเภท MIME ของไฟล์ลิงก์ เช่น นามสกุลไฟล์.

4. ตัวอย่างการสร้างแผนที่รูปภาพ

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

ข้าว. 1. ตัวอย่างมาร์กอัปรูปภาพเพื่อสร้างแผนที่

2) ตั้งชื่อการ์ดโดยเพิ่มลงในแท็ก

Jpg" alt="flowers_foto" width="680" height="383" usemap="#flowers"> !}
ข้าว. 2. ตัวอย่างการสร้างแผนผังรูปภาพ เมื่อคุณคลิกเคอร์เซอร์บนดอกไม้ คุณจะไปที่หน้าพร้อมคำอธิบาย