新!我的 44 頁電子書「44 分鐘學會 CSS」出爐了!😃

立即取得 →

範例: 複製

<img src="/images/world-continents.png" width="320" height="160" orgwidth="320" orgheight="160" usemap="#world-continents">
<map name="world-continents">
  <area title="North America" href="https://en.wikipedia.org/wiki/North_America" shape="poly" coords="48,89,67,69,77,49,140,0,68,0,6,10,4,31,16,69">
  <area title="South America" href="https://en.wikipedia.org/wiki/South_America" shape="poly" coords="48,88,61,74,119,99,95,160,66,159">
  <area title="Europe" href="https://en.wikipedia.org/wiki/Europe" shape="poly" coords="124,49,145,46,158,50,187,43,198,6,146,1,115,21">
  <area title="Africa" href="https://en.wikipedia.org/wiki/Africa" shape="poly" coords="121,53,140,47,169,51,186,77,196,80,188,137,156,136,138,97,118,86">
  <area title="Asia" href="https://en.wikipedia.org/wiki/Asia" shape="poly" coords="166,50,184,77,201,74,215,91,258,108,263,87,283,74,297,8,192,3,191,29,187,46,170,42">
  <area title="Australia" href="https://en.wikipedia.org/wiki/Australia_(continent)" shape="poly" coords="257,107,263,85,314,89,316,137,294,151,249,132,248,114">
</map>

title

定義區域標題。

"北美洲"

將滑鼠移至區域上時,標題會顯示。

shape

定義區域形狀。

"rect"

形狀為矩形,需要 4 個座標。

"circle"

形狀為圓形,需要 2 個座標和 1 個半徑。

"polygon"

形狀為多邊形,點數不限。

coords

定義與形狀相關的座標。

"116,104,234,154"

rect 需要兩組 x1,y1,x2,y2,第一組定義左上角,第二組定義右下角

"50,80,20"

circle 需要一組座標和一個半徑 x,y,r。座標組定義圓的中心

"198,374,243,303,428,387,361,624,296,624"

polygon 需要一組 x,y 座標組。

href

定義區域目標。

"https://htmlreference.dev.org.tw"

你可以傳遞絕對 URL。

"/element/div"

你可以傳遞相對於根網域的相對 URL。

"mailto:[email protected]"

你可以使用 mailto 協定。按一下區域會開啟使用者的電子郵件客戶端。

target

定義按一下區域後,會在哪個分頁或視窗中顯示。

"_blank"

在新瀏覽內容中開啟,通常是新分頁

"_self"

在目前分頁中開啟。

"_parent"

在父瀏覽內容中開啟,或如果沒有父瀏覽內容,則為 _self

"_top"

在頂層瀏覽內容中開啟,或如果沒有頂層瀏覽內容,則為 _self