Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> HTML

เราจะกำหนดพื้นที่ในแผนผังรูปภาพด้วย HTML ได้อย่างไร


ใช้แท็ก เพื่อกำหนดพื้นที่ในแผนผังรูปภาพใน HTML

แท็ก HTML รองรับแอตทริบิวต์เพิ่มเติมดังต่อไปนี้ -

แอตทริบิวต์
ค่า
คำอธิบาย
Alt
Text
ระบุข้อความสำรองสำหรับพื้นที่
coords
ถ้ารูปร่าง ="rect" แล้ว coords ="ซ้าย บน ขวา ล่าง"
ถ้ารูปร่าง ="circ" แล้ว coords ="centerx, centery, radius"
ถ้ารูปร่าง ="โพลี" แล้ว coords ="x1, y1, x2, y2,..,xn, yn"
ระบุพิกัดที่เหมาะสมกับแอตทริบิวต์รูปร่างเพื่อกำหนดขอบเขตของรูปภาพสำหรับแผนที่รูปภาพ
ดาวน์โหลด เราจะกำหนดพื้นที่ในแผนผังรูปภาพด้วย HTML ได้อย่างไร
ชื่อไฟล์
ระบุว่าเป้าหมายจะถูกดาวน์โหลดเมื่อผู้ใช้คลิกไฮเปอร์ลิงก์
Href
URL
ระบุ URL ของหน้าหรือชื่อของจุดยึดที่ลิงก์ไป
hreflang เราจะกำหนดพื้นที่ในแผนผังรูปภาพด้วย HTML ได้อย่างไร
language_code
ระบุภาษาของ URL เป้าหมาย
media เราจะกำหนดพื้นที่ในแผนผังรูปภาพด้วย HTML ได้อย่างไร
แบบสอบถามสื่อ
ระบุสื่อ/อุปกรณ์ที่ URL เป้าหมายได้รับการปรับให้เหมาะสม
Nohref
true/false
ยกเว้นพื้นที่จากแผนผังรูปภาพ
rel เราจะกำหนดพื้นที่ในแผนผังรูปภาพด้วย HTML ได้อย่างไร
alternate
ผู้เขียน
ที่คั่นหนังสือ
ช่วย
ใบอนุญาต
ต่อไป
ไม่ปฏิบัติตาม
noreferrer
ดึงข้อมูลล่วงหน้า
ก่อนหน้า
ค้นหา
แท็ก
ระบุความสัมพันธ์ระหว่างเอกสารปัจจุบันและ URL เป้าหมาย
Shape
rect
สี่เหลี่ยมผืนผ้า
วงเวียน
วงกลม
ระบุรูปร่างของแผนผังรูปภาพ

poly
รูปหลายเหลี่ยม

Target
_blank
_พ่อแม่
_ตัวเอง
_สูงสุด
จะเปิด URL เป้าหมายได้ที่ไหน
_blank - URL เป้าหมายจะเปิดขึ้นในหน้าต่างใหม่
_self – URL เป้าหมายจะเปิดในเฟรมเดียวกับที่คลิก
_parent - URL เป้าหมายจะเปิดขึ้นในพาเรนต์เฟรมเซ็ต
_top – URL เป้าหมายจะเปิดขึ้นแบบเต็มหน้าต่าง
type เราจะกำหนดพื้นที่ในแผนผังรูปภาพด้วย HTML ได้อย่างไร
mime_type
ระบุประเภท MIME (Multipurpose Internet Mail Extensions) ของ URL เป้าหมาย

ตัวอย่าง

คุณสามารถลองเรียกใช้โค้ดต่อไปนี้เพื่อใช้แท็ก

<!DOCTYPE html>
<html>
   <head>
      <title>HTML area Tag</title>
   </head>
   <body>
      <img src = /images/usemap.gif alt = "usemap" border = "0" usemap = "#tutorials"/>

      <map name = "tutorials">
         <area shape = "poly" coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial" target = "_blank" />

         <area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial"
            href = "/html/index.htm" target = "_blank" />

         <area shape = "circle" coords = "73,168,32" alt = "PHP Tutorial"
            href = "/php/index.htm" target = "_blank" />
      </map>
   </body>
</html>