頁面映像動態加熱區,(使用map標籤)

來源:互聯網
上載者:User

在Html中,給映像使用map標籤,可以給映像的某個部分建立超串連,用法如下:

<img src=img.gif usemap="MAP-Name">
<map name="MAP-Name">
<area shape="rect|circle|poly" coords="#" href="url">
</map>
注:所有的座標都是相對於圖片左上方的

其中,座標coords對各個shape的解釋如下:

shape="rect" coords="x1,y1,x2,y2" // (x1,y1)=Upper Left, (x2,y2)=Lower Right

即,當shape是矩形時,coords表示矩形左上及右下(x2, y2)的座標
shape="circle" coords="x,y,r" // (x,y)=Center, r=Radius

即,當shape是圓形時,coords表示圓中心點座標(x, y)及半徑

shape="poly" coords="x1,y1,x2,y2,x3,y3..." // (x1,y1>=First Corner, (x2,y2)=Second Corner, ...

即,當shape是poly多邊形時,coords表示多邊形所有頂點的座標(x1,y1),(x2,y2),(x3,y3)...

注意:以上所有座標都是相對於圖形img.gif左上腳座標而言的

以下是一個例子:

<img src="mapimg.gif" usemap="#Face">
<map name="Face">
   <area shape="rect" href="page.html" coords="140,20,280,60">
   <area shape="poly" href="image.html" coords="100,100,180,80,200,140">
   <area shape="circle" href="new.html" coords="80,100,60">
</map>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.