HTML img標籤的width height ismap usemap title alt 屬性

前言

img 元素向網頁中嵌入一幅圖像

今天特意對 img 的幾個屬性作了一下測試，在這裏作一個筆記。

1. img 元素的width屬性和height屬性。

（1）不設置 width 和 和 height 時，圖片在瀏覽器中顯示大小等於原圖。
（2）只設置 width 或 height 時，圖片會經過按比例縮放來決定沒有設置的 width 或 height 的值。
（3）同時設置 width 和 height 時，圖片會縮放到恰好等於設置的寬度和高度，圖片中的內容會完整顯示，圖片可能變形（沒有按比例縮放的時候）。

2. img 元素的title屬性和alt屬性

（1）圖片正常顯示的時候，鼠標停留在圖片上能夠看到 title 的內容。
（2）圖片沒有顯示出來的時候，alt 的內容會顯示在原本應該顯示圖片的位置,鼠標停留在圖片上能夠看到 title 的內容。

3. img 元素的ismap屬性

（1）設置了 ismap 屬性以後，當用戶在 ismap 圖像上單擊時，瀏覽器會自動把鼠標的 x、y 位置（相對於圖像的左上角）發送到服務器端。
（2）只有當 <img> 元素屬於帶有有效 href 屬性的 <a> 元素的後代元素時，才容許 ismap 屬性。
（3）ismap 屬性將圖像定義爲【服務器端圖像映射】。【圖像映射】指的是帶有可點擊區域的圖像。

我理解的【服務端映射】：獲取座標，將座標交給服務器處理。

<a href="../images/拼圖.jpg">
    <img src='../images/拼圖.jpg' ismap title='地球平面圖' alt='地球平面圖' />
  </a>

由於在代碼中將連接地址設置爲圖片地址，因此單擊<img>中的圖片以後將會跳轉到一張圖片，同時在瀏覽器地址欄會顯示鼠標單擊時的座標。以下圖：

4. img 元素的usemap屬性

（1）使用 usemap 能夠將把鼠標在圖像上單擊時的座標轉換成特定的行爲，包括加載和顯示另一個文檔。
（2）使用 img 元素的 usemap 屬性能夠實現單擊圖片上的特定區域時跳轉到特定地址。
（3）usemap 屬性將圖像定義爲【客戶端圖像映射】。

我理解的【客戶端映射】：獲取座標，本地使用。

例如：能夠使用 usemap 實現單擊下圖中的瀏覽器圖片區域時跳轉到相關界面。

<img src="../images/拼圖.jpg" usemap="#testmap" alt="地球平面圖" title='地球平面圖' />
  <map name="testmap" id='testmap'>
    <area shape="circle" coords="182,352,50" href ="../images/chrome.png" alt="chrome" />
    <area shape="circle" coords="825,235,60" href ="http://www.oupeng.com/download/" alt="opera" />
    <area shape="circle" coords="356,143,60" href ="http://www.firefox.com.cn/desktop/performance/" alt="firefox" />
    <area shape="rect" coords="556,318,789,504" href ="https://www.supermapol.com/earth/" alt="earth" />
  </map>

在以上代碼中:

（1）<map>用於定義一個客戶端圖像映射，<img>中的usemap屬性可引用 <map> 中的 id 或 name 屬性（取決於瀏覽器），因此咱們應同時向 <map> 添加 id 和 name 屬性。
（2）<area> 標籤訂義圖像映射中的區域。【圖像映射】指帶有可點擊區域的圖像）。area 元素老是嵌套在 <map> 標籤中。

後語

• 在線DEMO https://hgy9473.github.io/myl...

• 參考資料：w3school http://www.w3school.com.cn/tags/tag_img.asp