HTML元素 – map的用法

 

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

-------------------------------------------------------------------------------------------------------------

HTML元素 - map

包含用戶端影像對應的座標資料。

Contains coordinate data for client-side image maps.

所謂影像地圖，就是帶有預先定義地區的映像，這些地區包含了指向其它文檔或錨的連結。例如，你可以在一副太陽系的映像上建立使用者點擊後可瀏覽不同星球的連結。

map 對象由 IMG 元素的 USEMAP 屬性引用，格式如下：

<IMG SRC="solarsys.gif" USEMAP="#SystemMap">

MAP 元素包含一組定義映像中連結地區的 AREA 元素。