html 的用法，圖片熱點的使用

     <area>標記主要用於圖像地圖，經過該標記能夠在圖像地圖中設定做用區域（又稱爲熱點），這樣當用戶的鼠標移到指定的做用區域點擊時，會自動連接到預先設定好的頁面。其基本語法結構以下：

      <area  class=type  id＝Value  href＝url  alt＝text  shape＝area-shape coods＝value>

class和id：是分別指定熱點的類型和id號。

alt：用於設定熱點的替代性文字。

href：用於設定該熱點所連接的url地址。

shape和coords：是兩個主要的參數，用於設定熱點的形狀和大小。其基本用法以下：

<area shape="rect" coords="x1, y1,x2,y2" href=url>表示設定熱點的形狀爲矩形，左上角頂點座標爲（X1,y1），右下角頂點座標爲（X2,y2）。

<area shape="circle" coords="x1, y1,r" href=url>表示設定熱點的形狀爲圓形，圓心座標爲（X1,y1），半徑爲r。

<area shape="poligon" coords="x1, y1,x2,y2 ......" href=url>表示設定熱點的形狀爲多邊形，各頂點座標依次爲（X1,y1）、（X2,y2）、（x3,y3） ......。

       備註：x1, y1,x2,y2 這幾個點的位置 是根據圖片而定的，不是根據窗口的大小而定。

        <area>標記是在圖像地圖中劃分做用區域的，所以其劃分的做用區域必須在圖像地圖的區域內，因此在用 <area> 標記劃分區域前必須用HTML的另外一個標記<map>來設定圖像地圖的做用區域，併爲指定的圖像地圖設定名稱，該標記的用法很簡單，即<map name="圖像地圖名稱"> ...... </map>。

    下面經過一個例子來講明這兩個標記的用法：

這裏是一幅新書架的圖片，要作的效果是：當鼠標點「網址大全」這本書時，新開一窗口，顯示關於這本書的簡介及訂單的網頁（urlall.htm）；當鼠標點「網站設計攻略」這本書時，新開一窗口，顯示關於這本書的簡介及訂單的網頁（siteall.htm）；當鼠標點「網頁技巧大全」這本書時，新開一窗口，顯示關於這本書的簡介及訂單的網頁（pagejqlall.htm）。製做方法：

一、插入圖片，並設置好圖像的有關參數，且在<img>標記中設置參數usemap="newbook" ismap，以表示對圖像地圖（newbook）的引用；

二、用<map>標記設定圖像地圖的做用區域，並取名爲：newbook；

三、分別用<area>標記針對三本書的位置劃分出三個矩形做用區域，並設定好其連接參數href。

製做完成，本例的源代碼以下：

<img src="http://www.webjx.com/images/logo.gif" width="207" height="148" alt="新書架" hspace="10" align="left" usemap="#newbook" border="0">
<map name="newbook">
<area shape="rect" coords="56,69,78,139" href="urlall.htm" target="_blank" alt="這裏收集十萬多個網址。" title="這裏收集十萬多個網址。">
<area shape="rect" coords="82,70,103,136" href="siteall.htm" target="_blank" alt="網站設計師的啓蒙讀本。" title="網站設計師的啓蒙讀本。">
<area shape="rect" coords="106,68,128,136" href="pageall.htm" target="_blank" alt="網頁製做者不可不讀的書。" title="網頁製做者不可不讀的書。">
</map>

在製做本文介紹的效果時應注意的幾點：

一、在<img>標記不要忘記設置usemap、ismap參數，且usemap的參數值必須與<map>標記中的name參數值相同，也就是說，「圖像地圖名稱」要一致；

二、同一「圖像地圖」中的全部熱點區域都要在圖像地圖的範圍內，即全部<area>標記均要在<map>與</map>之間；

三、在<area>標記中的 cords 參數設定的座標格式要與shape參數設定的做用區域形狀配套，避免出如今shape參數設置的矩形做用區域，而在cords 中設置的倒是多邊形區域頂點座標的現象出現。

HTML和XHTML之間的差別

在HTML中，<area>元素不須要結束標籤。

但XHTML中，<area>元素必須正確關閉。

必選屬性

DTD欄代表哪一種文檔類型支持此屬性。S=Strict，T=Transitional，F=Frameset。

屬性	值	描述	DTD
alt	文本	爲一個區域指定備選文本	STF

可選屬性

屬性	值	描述	DTD
coords	座標	指定一個區域的座標	STF
href	URL	指定一個區域的連接目標	STF
nohref	nohref	指出區域內沒有相應的連接	STF
shape	default rect circle poly	指定區域的形狀	STF
target	_blank _parent _self _top	指出在何處打開新頁面	TF

核心屬性

<area>標籤支持如下核心屬性：

屬性	值	描述	DTD
accesskey	字符	設置訪問元素的鍵盤快捷鍵	STF
class	類名	指明元素的類名	STF
dir	rtl ltr	指定元素裏內容的文本方向	STF
id	id	指明元素的惟一id	STF
lang	語言代碼	指定元素內容的語言代碼	STF
style	樣式定義	指定元素的內嵌樣式	STF
tabindex	數字	指定元素的Tab鍵順序	STF
title	文本	指定元素的提示文本	STF
xml:lang	語言代碼	在XHTML文檔中指定元素內容的語言代碼	STF

更多關於核心屬性的信息。

事件屬性

<area>標籤支持如下事件屬性：

屬性	值	描述	DTD
onblur	腳本	當元素失去焦點時執行腳本	STF
onclick	腳本	在元素區域內單擊鼠標（不區分左右鍵）時執行腳本	STF
ondblclick	腳本	在元素區域內雙擊鼠標（不區分左右鍵）時執行腳本	STF
onfocus	腳本	當元素取得焦點時執行腳本	STF
onmousedown	腳本	在元素區域內按下鼠標鍵（不區分左右鍵）時執行腳本	STF
onmousemove	腳本	當鼠標指針在元素區域內移動時執行腳本	STF
onmouseout	腳本	當鼠標指針移出元素區域時執行腳本	STF
onmouseover	腳本	當鼠標指針移入元素區域時執行腳本	STF
onmouseup	腳本	在元素區域內鬆開鼠標鍵（不區分左右鍵）時執行腳本	STF
onkeydown	腳本	按下一個鍵時執行腳本	STF
onkeypress	腳本	按下並鬆開一個鍵時執行腳本	STF
onkeyup	腳本	鬆開一個鍵時執行腳本	STF