【實例介紹】

html圖像熱區(qū)鏈接

          同一個圖像的不同部分可以鏈接到不同的文檔，這就是熱區(qū)鏈接。要使圖像特定部分成為超鏈接，就要在圖像中設(shè)置“熱區(qū)”，然后再創(chuàng)建鏈接，這樣當(dāng)鼠標(biāo)移動到圖像熱區(qū)的時候會變成手的形狀，當(dāng)按下鼠標(biāo)的時候，頁面就跳轉(zhuǎn)到或者打開設(shè)定的uRL。
         <map>定義一個客戶端圖像映射，圖像映射(image．map)指帶有可點(diǎn)擊區(qū)域的一幅圖像。<area>標(biāo)簽定義圖像映射中的區(qū)域。<img>標(biāo)簽中的usemap屬性與map元素的n鋤e屬性相關(guān)聯(lián)，創(chuàng)建圖像與映射之間的聯(lián)系。

【基本語法】

【語法介紹】

【實例代碼】

<img src="images/9956.jpg" alt="Planets" width="500" 
height="320" border="0" usemap="#planetmap" />
<map name="planetmap" id="planetmap2">
  <area shape="circle" coords="180,139,14" 
href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" 
href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="456,82,475,139" 
href ="sun.html" alt="Sun" /><area shape="rect" 
coords="452,143,471,187" href="#">
<area shape="rect" coords="446,193,471,243" 
href="#"><area shape="rect" coords="442,254,466,298" 
href="#"></map>
<map name="planetmap" id="planetmap">
  <area shape="circle" coords="180,139,14" 
href ="venus.html" alt="Venus" />
  <area shape="circle" coords="129,161,10" 
href ="mercur.html" alt="Mercury" />
  <area shape="rect" coords="457,130,476,187" 
href ="sun.html" alt="Sun" />
</map>

【代碼分析】

area元素永遠(yuǎn)嵌套在map元素內(nèi)部，area元素可定義圖像映射中的區(qū)域。<img>中的 usemap屬性可引用<map>中的id或name屬性，所以我們應(yīng)同時向<map>添加id和name屬性，如圖所示。

 【素材及源碼下載】

請點(diǎn)擊：html圖像熱區(qū)鏈接 下載本實例相關(guān)素材及源碼