โพสต์นี้จะสอนคุณ:
- แผนที่รูปภาพ HTML คืออะไร
- จะสร้างแผนที่รูปภาพในเอกสาร HTML ได้อย่างไร
- จะสร้างแผนที่รูปภาพที่เชื่อมโยงกับเพจอื่นได้อย่างไร
แผนที่รูปภาพ HTML คืออะไร
แผนที่รูปภาพเป็นภาพที่มีพื้นที่ที่สามารถคลิกได้ ในการสร้างแผนที่รูปภาพใน HTML ให้ใช้ปุ่ม “ <แผนที่> ” องค์ประกอบถูกนำมาใช้ นอกจากนี้หนึ่งหรือมากกว่านั้น “ <พื้นที่> ” แท็กถูกเพิ่มภายในองค์ประกอบ “
ไวยากรณ์
ไวยากรณ์เพื่อระบุแผนที่รูปภาพในเอกสาร HTML ระบุไว้ด้านล่าง:
< img src = 'images/img1.jpg' ทุกอย่าง = 'แล็ปท็อป' แผนที่การใช้งาน = '#คลิกสเปซ' >
< แผนที่ ชื่อ = 'คลิกสเปซ' >
< พื้นที่ รูปร่าง = 'ตรง' พิกัด = '224,37,422,312' href = 'laptop.html' >
< / แผนที่ >
“ ” องค์ประกอบถูกกำหนดด้วยแอตทริบิวต์ต่อไปนี้:
- “ src ” ระบุเส้นทางของภาพ
- “ ทุกอย่าง ” แสดงข้อความแสดงแทนเมื่อโหลดรูปภาพไม่ได้
- “ แผนที่การใช้งาน ” ถูกระบุเพื่อทำให้พื้นที่ภาพสามารถคลิกได้ หากต้องการสร้างลิงก์ ค่าของลิงก์จะต้องเหมือนกับคลาสหรือรหัสขององค์ประกอบ “
“ <แผนที่> ” องค์ประกอบถูกเพิ่มด้วยแอตทริบิวต์ต่อไปนี้:
- “ รูปร่าง ” ระบุขนาดพื้นที่ของ HTML “ <แผนที่> ' องค์ประกอบ.
- “ พิกัด ” แอตทริบิวต์กำหนดพิกัดของพื้นที่ที่คลิกได้
- “ href แอตทริบิวต์กำหนด URL ของแหล่งที่มา
จะสร้างแผนที่รูปภาพในเอกสาร HTML ได้อย่างไร
หากต้องการสร้างแผนที่รูปภาพในเอกสาร HTML โปรดดูคำแนะนำที่ให้ไว้:
- ใน HTML ให้เพิ่ม “ ” องค์ประกอบ และกำหนดคลาส “ แผนที่ภาพ '.
- ภายใน div นี้ ให้เพิ่ม '
” องค์ประกอบเพื่อเพิ่มรูปภาพที่เกี่ยวข้องกับแอตทริบิวต์ที่กล่าวถึงข้างต้น
- จากนั้นเพิ่ม HTML “ <แผนที่> ” องค์ประกอบและกำหนดให้เป็น “ คลิกสเปซ ' ชื่อ.
- โปรดทราบว่า “ แผนที่การใช้งาน แอตทริบิวต์ถูกกำหนดชื่อ #คลิกสเปซ ” ชี้ไปที่ “ ชื่อ ” แอตทริบิวต์ของแท็ก “
- ข้างในใส่คำว่า “ <พื้นที่> ” แท็กที่มีแอตทริบิวต์ที่ระบุไว้ข้างต้น:
< แผนก ระดับ = 'แผนที่ภาพ' >
< img src = 'images/img1.jpg' ทุกอย่าง = 'แล็ปท็อป' แผนที่การใช้งาน = '#คลิกสเปซ' >
< แผนที่ ชื่อ = 'คลิกสเปซ' >
< พื้นที่ รูปร่าง = 'ตรง' พิกัด = '224,37,422,312' href = 'laptop.html' >
< / แผนที่ >
< / แผนก >ไปที่ส่วน CSS เพื่อปรับขนาดรูปภาพ
สไตล์ “
” ใน CSSใช้ “ .image-แผนที่ ” คลาสเพื่อเข้าถึง “
” และใช้คุณสมบัติ CSS ต่อไปนี้: .image-แผนที่ {
ความกว้าง : 700px;
ขอบ: รถยนต์;
}นี่คือคำอธิบายของคุณสมบัติ CSS ที่กล่าวถึง:
- “ ความกว้าง คุณสมบัติ ” กำหนดความกว้างขององค์ประกอบ div
- “ ขอบ ” คุณสมบัติ เพิ่มพื้นที่รอบ ๆ องค์ประกอบ
สไตล์องค์ประกอบ 'img'
.image-แผนที่ img {
ความกว้าง : 100 %;
}ดูพิกัดพื้นที่ที่ระบุในหัวข้อ “ พิกัด แอตทริบิวต์ ” สามารถคลิกได้แล้ว:
ในหัวข้อถัดไป เราจะเรียนรู้วิธีเชื่อมโยงแผนที่รูปภาพกับแหล่งข้อมูลอื่น
จะสร้างแผนที่รูปภาพที่เชื่อมโยงกับเพจอื่นได้อย่างไร
สร้างหน้า HTML อื่นด้วยนามสกุล “ .html ” โดยทำตามขั้นตอนด้านล่าง:
- ในกรณีของเรา เราให้ชื่อว่า “ laptop.html '.
- เพิ่มองค์ประกอบ div และกำหนดเป็นคลาส “ แล็ปท็อป-img '.
- จากนั้น วางภาพโดยใช้ปุ่ม “
” องค์ประกอบและเชื่อมโยง “ src ' และ ' ความกว้าง ' คุณลักษณะ.
- ถัดไป ระบุย่อหน้าโดยใช้ปุ่ม “ ' องค์ประกอบ:
< img src = '/images/laptop.jpg' ความกว้าง = '400px' >
< หน้า >แล็ปท็อปคือคอมพิวเตอร์แบบพกพาที่สามารถเคลื่อนย้ายและใช้งานในการตั้งค่าต่างๆ ได้< / หน้า >
< / แผนก >ใน CSS ให้ระบุคุณสมบัติ CSS ต่อไปนี้เป็น “ แล็ปท็อป-img ' ระดับ:
.laptop-img {
ความกว้าง : 500px;
ขอบ: รถยนต์;
}เอาต์พุต
ตอนนี้เราจะเชื่อมโยง ' laptop.html ” หน้าไปยังรูปภาพ “ <พื้นที่> ” องค์ประกอบของหน้าแรก ในการทำเช่นนั้น ให้ระบุ URL ของหน้าไปที่ “ href ” แอตทริบิวต์ขององค์ประกอบ “ ” ดังแสดงด้านล่าง:
< พื้นที่ รูปร่าง = 'ตรง' พิกัด = '310,57,590,470' href = 'laptop.html' >เอาต์พุต
เราได้เรียนรู้ว่าแผนที่ภาพคืออะไรและเชื่อมโยงกับแหล่งข้อมูลอื่นอย่างไร
บทสรุป
HTML “ <แผนที่> องค์ประกอบ ” ใช้เพื่อสร้างแผนที่ภาพหรือภาพที่มีพื้นที่คลิกได้ ในการกำหนดพื้นที่ที่สามารถคลิกได้ของภาพ หนึ่งหรือมากกว่า “ <พื้นที่> ” แท็กถูกเพิ่มภายในองค์ประกอบ “
- ภายใน div นี้ ให้เพิ่ม '