html 錨點連接圖像熱區連接

時間 2019-12-06

標籤 html 連接圖像欄目 HTML 简体版

原文原文鏈接

除了對整幅圖像設置超連接外，還能夠將圖像劃分爲若干區域，這叫作"熱區"，每一個區域可設置不一樣的超連接。此時，包含熱區的圖像能夠稱爲映射圖像。
要進行熱區設置，首先須要在圖像文件中設置映射圖像名，格式爲：html

<img src = 圖像文件地址 usemap = 映射圖像名稱>htm

也就是說，此時須要使用<img>標記的usemap屬性，定義圖像的映射圖像名。
　而後，就要在圖像中定義各個熱區以及超連接了，主要語法爲：ci

      <map name = 映射圖像名稱>
            <area shape = 熱區形狀1 coords = 熱區座標1 href = 連接地址1>
          <area shape = 熱區形狀2 coords = 熱區座標2 href = 連接地址2>
           ……
          <area shape = 熱區形狀n coords = 熱區座標n href = 連接地址n>
       </map>get

       在該語法中又引入了兩個標記：<map>和<area>。<map>、</map>標記用於包含多個<area>標記，其中的"映射圖像名稱"就是在<img>標記中定義的名稱。<area>標記則用於定義各個熱區和超連接，它有兩個重要屬性：
　　（1）shape屬性：用來定義熱區形狀，它有三個值：
               ●　default：默認值，爲整幅圖像。
               ●　rect：矩形區域。
               ●　circle：圓形區域。
               ●　poly：多邊形區域。
　   （2）coords屬性：用來定義矩形、圓形或多邊形區域的座標。它的格式以下：
●　若是shape = "rect"，則coords包含四個參數，分別爲left、top、right和bottom，也能夠將這四個參數當作矩形左上角和右下角頂點的座標。
●　若是shape = "circle"，則coords包含三個參數，分別爲center-x、center-y和radius，這三個參數是圓心座標和圓的半徑。
●　若是shape = "poly"，則coords須要按順序取多邊形各個頂點的（x、y）座標值，所以形式爲"x1, y1, x2, y2, …… xn, yn"。能夠是逆時針，也能夠是順時針。HTML會按照定義頂點的順序將它們連接起來，造成多邊形熱區。
　　若是要定義的熱區形狀複雜，均可以用多邊形熱區來逼近，因此若是shape = "poly"，則coords可能包含不少座標值，其數量必須是偶數。
　　圖像的左上角座標是（0, 0），x軸向右、y軸向下爲正。
　　【例】it

<html>
<head>
    <title>itsway -- 圖像</title>
</head>
<body>
    <center><img src = "taihu.gif" usemap = "taihu" border = "0"><center>
    <map name = "taihu">
      <area shape="rect" coords="223,20,241,38" href="chap7_7meiyuan.html" target="_blank" alt="梅園">
      <area shape="circle" coords="234,53,7" href="chap7_7yuantouzhu.html" target="_blank" alt="黿頭渚">
      <area shape="poly" coords = "226, 228, 243, 219, 256, 207, 271, 217, 275, 225, 265, 229, 265, 232, 255, 250, 244, 253, 227, 239" href="chap7_7piaomiaofeng.html" target="_blank" alt="縹緲峯">
    </map>
</body>
</html>map

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

html 錨點連接 圖像熱區連接

html 錨點連接圖像熱區連接