資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚學
法學HTMLcoords 屬性
圖象區域中的區域座標可使用 <area> 元素的 cords 屬性來設定。將該屬性與形狀屬性配合使用，並設定區域的大小和形狀。
以下是語法
<area coords="value">
在以上值下面，你可以透過不同的引數來設定以下的座標−
| x1,y1,x2,y2 | 矩形左上角和右下角的座標 (shape="rect") |
| x,y,radius | 圓心的座標和半徑 (shape="circle") |
| x1,y1,x2,y2,..,xn,yn | 多邊形的邊緣座標。 |
現在讓我們來看一個示例，實現 <area> 元素的 cords 屬性 −
示例
<!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>
輸出
在以上示例中，我們已經對下面的影像設定了對映 −
<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>
在設定區域時，我們已經使用 cords 屬性設定了區域的座標 −
<area shape = "rect" coords = "22,83,126,125" alt = "HTML Tutorial" href = "/html/index.htm" target = "_blank" />
更新日期： 2019-07-30
449 次瀏覽
廣告