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

HTML coords คุณสมบัติ


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

ต่อไปนี้เป็นรูปแบบไวยากรณ์

<area coords="value">

ภายใต้ค่าข้างต้น คุณสามารถตั้งค่าพิกัดต่อไปนี้ด้วยพารามิเตอร์ต่างๆ −

x1,y1,x2,y2 พิกัดของมุมบนซ้ายและมุมล่างขวาของสี่เหลี่ยม (shape="rect")
x,y,รัศมี พิกัดของจุดศูนย์กลางวงกลมและรัศมี (shape="circle")
x1,y1,x2,y2,..,xn,yn พิกัดขอบของรูปหลายเหลี่ยม

ให้เราดูตัวอย่างการใช้แอตทริบิวต์สายไฟขององค์ประกอบ -

ตัวอย่าง

<!DOCTYPE html>
<html>
<body>
<h2>Learning</h2>
<p>Learn these technologies with ease....</p>
<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>

ผลลัพธ์

HTML  area  coords คุณสมบัติ

ในตัวอย่างข้างต้น เราได้ตั้งค่าแผนที่ในภาพต่อไปนี้ -

<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>

ขณะตั้งค่าพื้นที่ เราได้กำหนดพิกัดของพื้นที่ด้วยแอตทริบิวต์สายไฟ -

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