HTML圖像映射允許單個(gè)圖像上的多個(gè)可單擊的區(qū)域，每個(gè)區(qū)域鏈接到不同的URL。它使用標(biāo)籤與usemap屬性和包含定義可單擊區(qū)域的標(biāo)籤的

HTML圖像映射是一種在單個(gè)圖像上定義多個(gè)可單擊區(qū)域的方法，其中每個(gè)區(qū)域都鏈接到其他URL或操作。您可以將其分為區(qū)域（例如矩形，圓圈或多邊形），而不是使整個(gè)圖像成為鏈接，並且每個(gè)區(qū)域都可以充當(dāng)單獨(dú)的超鏈接。

當(dāng)您想創(chuàng)建交互式圖像時(shí)，這很有用，例如，單擊一個(gè)國家 /地區(qū)的世界地圖將您帶到有關(guān)該國家 /地區(qū)的頁面，或者是與其規(guī)格鏈接的不同部分的產(chǎn)品圖。

它如何工作

圖像映射使用兩個(gè)主要的HTML元素：

• <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175380643894300.jpeg" class="lazy" alt="什麼是HTML圖像圖？" >帶有usemap屬性
• <map></map>使用<area>標(biāo)籤定義可點(diǎn)擊區(qū)域的元素

<img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175380643894300.jpeg" class="lazy" alt="什麼是HTML圖像圖？" >標(biāo)籤中的usemap屬性引用<map></map> by name （或id ），將圖像鏈接到映射定義。

例子

<img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175380643894300.jpeg"  class="lazy"  src =“ world-map.png” alt =“ world Map” usemap =“＃worldmap”>

<Map Name =“ WorldMap”>
  <區(qū)域shape =“ rect” coords =“ 0,0,100,100” href =“ north-america.html” alt =“北美”>
  <區(qū)域shape =“ circle” coords =“ 150,150,50” href =“歐洲.html” alt =“歐洲”>
  <區(qū)域shape =“ poly” coords =“ 250,250,300,200,350,250,300,300” href =“ africa.html” alt =“ aft =“ africa”>
</map>

關(guān)鍵點(diǎn)

• 形狀：定義可點(diǎn)擊區(qū)域的形狀：
  • rect - 矩形（坐標(biāo)：X1，Y1，X2，Y2）
  • circle - 圓圈（坐標(biāo)：中心X，中心Y，半徑）
  • poly - 多邊形（x，y坐標(biāo)對列表）
• 坐標(biāo)：指定與圖像相對於圖像的形狀的位置和大小。
• HREF ：該區(qū)域的鏈接目的地。
• Alt ：提供可訪問性信息，就像常規(guī)圖像一樣。

何時(shí)使用圖像地圖

• 互動圖或平面圖
• 帶有多個(gè)部分的導(dǎo)航圖像
• 教育工具（例如，解剖圖）

限制

• 默認(rèn)情況下不是很響應(yīng) - 坐標(biāo)固定在圖像大小上，因此縮放會破壞地圖，除非調(diào)整
• 如果未正確標(biāo)記alt文本，則訪問較低
• 通常被SVG或JavaScript解決方案取代以進(jìn)行複雜的交互性

基本上，圖像地圖是一種簡單的老式方式，可以使圖像的一部分交互 - 它們?nèi)匀豢梢允褂茫枰屑?xì)處理現(xiàn)代響應(yīng)式網(wǎng)站。

以上是什麼是HTML圖像圖？的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！