HTML5課堂筆記理解2
上次說到圖片相對地址的定義，舉例了4中情形的下的不同目錄的圖片書寫方法補充一個如果你要的圖片目錄跟上面四種都不一樣話可以用以下屬性值嘗試
./ 當前目錄
../ 回到上一層目錄
images/ 進入一層目錄
../images/ 回到上一層目錄，然后再進入images目錄
還有調節圖片的高度和寬度只調一個數值兩個數值調整的不好就會導致圖片變形，所以調一個值的時候它會自動等比例調整圖片分辨率。
圖像熱區
圖像熱區平常生活中用的最多就是點擊一個圖片然后跳轉到另外一個網址或其他東西圖片啊視頻等。。。
先給出一個例子：
<img src=”創建圖像熱區圖片名稱加后綴文件格式” usemap=“#sss”/> <map name=”map sss”/> <area shape=“rect”coords=“x1，y1，x2，y2”href=“htttp://www.baidu.com”/>
解釋：先找到你要作為熱區的圖片，”#sss”這里是給你圖像進行再命名到后面<map name=”map sss”/>這里是就是關聯你的圖像再命名的地方，map標簽為圖像地圖標簽就是在這個圖像里面生成熱區。如果其中一個寫錯會出現圖像熱區點擊無反應或生成熱區失敗。<area shape=“rect”coords=“x1，y1，x2，y2”href=“htttp://www.baidu.com”/>這里是有三個屬性一個是之前說的超鏈接的屬性；還有兩個shape是規定熱區的形狀，這里是確定熱區的形狀；coords是要熱區形狀的x軸和y軸的坐標。這里是對上面熱區形狀個個點找坐標（x，y）進行熱區；href這里里面可以寫網址或者圖片的名稱.文件格式這里是要跳轉到的位置。
shape可以編輯的形狀屬性值rect：矩形；circle：圓形；poly：多邊形。它們三種有不同的用處。
rect的書寫格式
<area shape="rect" coords="x1，y1，x2，y2 " href="URL" />
這里用兩個點可以形成矩形
circle：
<area shape="circle" coords="x1，y1，r " href="URL" />
這里說一下r是圓形的半徑；x1，y1是圓的中心點坐標。
<area shape="poly" coords="x1，y1，x2，y2,x3,y3,x4,y4" href="URL" />
多邊形屬性想形成矩形需要用4個坐標點來形成
多邊形主要是用來形成3個點或以上多邊形的時候使用。
要怎么知道圖片的坐標呢很簡單打開PS軟件把圖片導入ctrl+r打開標尺工具在圖片上利用標尺工具拖動左邊的標尺和上邊的標尺的兩條線相交點作為坐標點，需要用多邊形的時候用鋼筆工具扣出一個圖形然后鼠標移動到它們的點的大概位置然后按F8后有這樣一個框框，
看到圖中X和Y了嗎，圖中x約為34，Y約為21。如果是圓形就要把W的屬性加到r屬性值里面。
下面給出熱區的整個書寫的例子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <img src="map.jpg" usemap="#a"/> <map name="a"> <area shape="poly"coords="392,417,420,365,460,379" href="1.jpg"/> <area shape="poly"coords="226,225,316,239,310,292,279,276,278,291,216,276" href="2.jpg"/> <area shape="poly"coords="396,220,417,210,416,259,392,274" href="3.jpg"/> <area shape="poly"coords="334,351,356,334,353,336,384,339,387,361,344,374" href="4.jpg"/> </body> </html>
我的地圖圖片是中國地圖所以基本上都用了多邊形的屬性值我在。
我分別在圖片中青海、廣東、山西、貴州這四個地方弄了圖像熱區在這里我只點擊一個效果圖給你們。
在我按住圖像熱區時會顯示一個三角形這就是我的熱區范圍超出這個范圍就沒有效果了。
點擊之后我們跳轉到了另外一張圖片
還有一個圓形的圖像熱區我簡單把圖放出來原理是一樣的只是熱區形狀改變了而已，因為看圖選要弄得熱區形狀嘛。
藍色圈圈里面就是我的熱區。
點擊之后：
圖像熱區就先說到這里了。
感覺還有很多東西沒寫上去，但我慢慢補回來的。