用戶端圖檔映射:
<img src="planets.gif" alt="Planets" usemap="#planetmap" />
<map name="planetmap" id="planetmap">
<area href="sun.htm" target="_blank" rel="external nofollow" shape="rect" coords="0,0,110,260">Sun</a>
<area href="mercur.htm" target="_blank" rel="external nofollow" shape="circle" coords="129,161,10">Mercury</a>
<area href="venus.htm" target="_blank" rel="external nofollow" shape="circle" coords="180,139,14">Venus</a>
</map>
上面這段源代碼将一幅圖像 planets.gif 映射為 3 個區域,當使用者單擊其中某一個區域時,将被連結到不同的文檔中。
<usemap>
<usemap>
usemap 屬性将圖像定義為用戶端圖像映射(圖像映射image-map指帶有可點選區域的圖像)。
usemap 屬性與
<map>
元素的 name 或 id 屬性相關聯,以建立
<img>
與
<map>
之間的關系。
<map>
<map>
<map>
标簽定義一個用戶端圖像映射。
注釋:
area 元素永遠嵌套在 map 元素内部。area 元素可定義圖像映射中的區域。
<img>
中的 usemap 屬性可引用
<map>
中的 id 或 name 屬性(取決于浏覽器),是以我們應同時向
<map>
添加 id 和 name 屬性。
<area>
<area>
<area>
标簽定義圖像映射中的區域。
area 元素總是嵌套在
<map>
标簽中。
屬性 | 值 | 描述 |
---|---|---|
alt(必選) | text | 定義此區域的替換文本。 |
coords | 坐标值 | 定義可點選區域(對滑鼠敏感的區域)的坐标。 |
href | URL | 定義此區域的目标 URL。 |
nohref | nohref | 從圖像映射排除某個區域。 |
shape | default/rect/circ/poly | 定義區域的形狀 |
target | _blank/_parent/_self/_top | 規定在何處打開 href 屬性指定的目标 URL。 |
<area>
标簽的coords 屬性規定區域的 x 和 y 坐标,與 shape 屬性配合使用,來規定區域的尺寸、形狀和位置。圖像左上角的坐标是 “0,0”。
可以将用戶端圖像映射中的超連結區域定義為矩形、圓形或多邊形等。
下面列出了每種形狀的适當值:
圓形:shape=“circle”,coords="x,y,r"
這裡的 x 和 y 定義了圓心的位置(“0,0” 是圖像左上角的坐标),r 是以像素為機關的圓形半徑。
多邊形:shape=“polygon”,coords="x1,y1,x2,y2,x3,y3,…"
每一對 “x,y” 坐标都定義了多邊形的一個頂點(“0,0” 是圖像左上角的坐标)。定義三角形至少需要三組坐标;高緯多邊形則需要更多數量的頂點。
多邊形會自動封閉,是以在清單的結尾不需要重複第一個坐标來閉合整個區域。
矩形:shape=“rectangle”,coords="x1,y1,x2,y2"
第一個坐标是矩形的一個角的頂點坐标,另一對坐标是對角的頂點坐标,“0,0” 是圖像左上角的坐标。請注意,定義矩形實際上是定義帶有四個頂點的多邊形的一種簡化方法。
usemap和ismap的差異
usemap 屬性提供了一種“用戶端”的圖像映射機制,有效地消除了伺服器端對滑鼠坐标的處理,以及由此帶來的網絡延遲問題。通過特殊的
<map>
和
<area>
标簽,HTML 創作者可以提供一個描述 usemap 圖像中超連結敏感區域坐标的映射,這個映射同時包含相應的超連結 URL。usemap 屬性的值是一個 URL,它指向特殊的
<map>
區域。使用者計算機上的浏覽器将把滑鼠在圖像上單擊時的坐标轉換成特定的行為,包括加載和顯示另外一個文檔。
地圖就是很好地應用 ismap 和 usemap 屬性的一個示例,例如,在浏覽一家全國範圍的大公司網頁時,使用者可能會在地圖上單擊他們所居住的城市,以獲得附近地區零售店的位址和電話号碼等。
usemap 用戶端處理圖像映射的好處是,它不要求有伺服器或特殊的伺服器軟體,與 ismap 機制不同,它可以用在非 web (無網絡)環境中,例如在本地的檔案或者 CD-ROM 中使用。