HTML <area> 標(biāo)簽的 coords 屬性
定義和用法
coords 屬性規(guī)定區(qū)域的 x 和 y 坐標(biāo)。
coords 屬性與 shape 屬性配合使用,來(lái)規(guī)定區(qū)域的尺寸、形狀和位置。
圖像左上角的坐標(biāo)是 "0,0"。
詳細(xì)解釋:
<area> 標(biāo)簽的 coords 屬性定義了客戶端圖像映射中對(duì)鼠標(biāo)敏感的區(qū)域的坐標(biāo)。坐標(biāo)的數(shù)字及其含義取決于 shape 屬性中決定的區(qū)域形狀。可以將客戶端圖像映射中的超鏈接區(qū)域定義為矩形、圓形或多邊形等。
下面列出了每種形狀的適當(dāng)值:
圓形:shape="circle",coords="x,y,z"
這里的 x 和 y 定義了圓心的位置("0,0" 是圖像左上角的坐標(biāo)),r 是以像素為單位的圓形半徑。
多邊形:shape="polygon",coords="x1,y1,x2,y2,x3,y3,..."
每一對(duì) "x,y" 坐標(biāo)都定義了多邊形的一個(gè)頂點(diǎn)("0,0" 是圖像左上角的坐標(biāo))。定義三角形至少需要三組坐標(biāo);高緯多邊形則需要更多數(shù)量的頂點(diǎn)。
多邊形會(huì)自動(dòng)封閉,因此在列表的結(jié)尾不需要重復(fù)第一個(gè)坐標(biāo)來(lái)閉合整個(gè)區(qū)域。
矩形:shape="rectangle",coords="x1,y1,x2,y2"
第一個(gè)坐標(biāo)是矩形的一個(gè)角的頂點(diǎn)坐標(biāo),另一對(duì)坐標(biāo)是對(duì)角的頂點(diǎn)坐標(biāo),"0,0" 是圖像左上角的坐標(biāo)。請(qǐng)注意,定義矩形實(shí)際上是定義帶有四個(gè)頂點(diǎn)的多邊形的一種簡(jiǎn)化方法。
例如,下面的 XHTML 片段在一個(gè) 100x100 像素圖像的右下方四分之一處,定義了一個(gè)對(duì)鼠標(biāo)敏感的區(qū)域,并在圖像的正中間定義了一個(gè)圓形區(qū)域。
<map name="map"> <area shape="rect" coords="75,75,99,99" nohref="nohref"> <area shape="circ" coords="50,50,25" nohref="nohref"> </map>
實(shí)例
<img src ="planets.gif" alt="Planets" usemap ="#planetmap" /> <map name="planetmap"> <area shape="rect"coords="0,0,110,260"
href="sun.htm" alt="Sun" /> <area shape="circle"coords="129,161,10"
href="mercur.htm" alt="Mercury" /> <area shape="circle"coords="180,139,14"
href="venus.htm" alt="Venus" /> </map>
提示和注釋
注釋:如果某個(gè) area 標(biāo)簽中的坐標(biāo)和其他區(qū)域發(fā)生了重疊,會(huì)優(yōu)先采用最先出現(xiàn)的 area 標(biāo)簽。瀏覽器會(huì)忽略超過(guò)圖像邊界范圍之外的坐標(biāo)。
語(yǔ)法
<area coords="value">
屬性值
值 | 描述 |
---|---|
x1,y1,x2,y2 | 如果 shape 屬性設(shè)置為 "rect",則該值規(guī)定矩形左上角和右下角的坐標(biāo)。 |
x,y,radius | 如果 shape 屬性設(shè)置為 "circ",則該值規(guī)定圓心的坐標(biāo)和半徑。 |
x1,y1,x2,y2,..,xn,yn | 如果 shape 屬性設(shè)置為 "poly",則該值規(guī)定多邊形各邊的坐標(biāo)。如果第一個(gè)坐標(biāo)和最后一個(gè)坐標(biāo)不一致,那么為了關(guān)閉多邊形,瀏覽器必須添加最后一對(duì)坐標(biāo)。 |