頁面圖像加熱區 image map使用


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

 <img src=img.gif usemap="#MAP-Name"> 
  <map name="MAP-Name" id="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>


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM