HTML插入圖片（img元素）
img屬性表及其功能描述：
| 屬性名稱 | 示例 | 描述 |
|---|---|---|
| src | <img src="images/icon.png" /> | 指明圖片的源地址 |
| width | <img src="images/icon.png" width="120"/> | 定義圖片的寬度 |
| height | <img src="images/icon.png" height="100"/> | 定義圖片的高度 |
| title | <img src="images/icon.png" title="這是一張圖片"/> | 對(duì)圖片的文字說(shuō)明 |
| alt | <img src="images/icon.png" alt="這是一張圖片"/> | 用于圖片不在時(shí)的備用文字說(shuō)明 |
使用figure元素和figcaption元素為圖片聲明標(biāo)題
<figure>
<img src="images/icon.png" alt="這是一張圖片"/>
<figcaption>
<p>這是一張圖片
</figcaption>
</figure>
創(chuàng)建圖像映射
了解熱點(diǎn)和圖像映射
- 熱點(diǎn)：圖形上具有某種形狀的一塊區(qū)域或者是一個(gè)文本，也是一種超鏈接。當(dāng)訪問(wèn)者單擊該區(qū)域或文本時(shí)，超鏈接指向的文本會(huì)顯示在瀏覽器中。熱點(diǎn)的形狀可以是長(zhǎng)方形、圓形或多邊形。
- 服務(wù)端圖像映射：在圖像上單擊鼠標(biāo)后，光標(biāo)的相對(duì)位置坐標(biāo)將被發(fā)送到服務(wù)器，然后服務(wù)器會(huì)通過(guò)一個(gè)專用程序來(lái)確定要執(zhí)行的下一步。
- 客戶端圖像映射：鼠標(biāo)移到圖片上時(shí)，指針可以指示讀者是否可以點(diǎn)擊此區(qū)域。圖片映射存儲(chǔ)在圖片的下一層，含有引用區(qū)域的相關(guān)信息。
創(chuàng)建圖像映射（map元素、area元素）
img元素使用usemap屬性與map元素的name屬性建立關(guān)聯(lián)關(guān)系，map元素包含了area元素，每個(gè)元素定義一個(gè)熱點(diǎn)，從而使每個(gè)熱點(diǎn)都指向圖像的某個(gè)部位。
定義如下：
<img src="images/icon.png" usemap="#mymap" width="100" height="100" alt="這是一張圖片"/>
<map name="mymap">
<area shape="circle" coords="10,20,30" href="xx.html">
<area shape="rect"coords="35,35,25,25" href="xx2.html">
<area shape="poly" coords="12,73,45,57,79" href="xx3.html">
</map>
shape屬性的屬性值及其功能描述
| shape屬性值 | 功能描述 |
|---|---|
| default | 表示將定義整個(gè)區(qū)域?yàn)闊狳c(diǎn) |
| rect | 表示將定義一個(gè)矩形區(qū)域?yàn)闊狳c(diǎn) |
| circle | 表示將定義一個(gè)圓形區(qū)域?yàn)闊狳c(diǎn) |
| poly | 表示將定義一個(gè)多邊形區(qū)域?yàn)闊狳c(diǎn) |
coords屬性的屬性值及其功能
| shape屬性值 | coords屬性值 | 功能描述 |
|---|---|---|
| rect | left-x,top-y,right-x,bottom-y | 熱點(diǎn)左上角和右下角的坐標(biāo) |
| circle | center-x,center-y,radius | 熱點(diǎn)圓心坐標(biāo)和半徑 |
| poly | x1,y1,x2,y2,x3,y3...,xN,yN | 多邊形的多個(gè)坐標(biāo) |
創(chuàng)建服務(wù)端圖像映射
-
使用img元素創(chuàng)建服務(wù)端圖像映射
使用img元素創(chuàng)建服務(wù)端圖像映射，img元素必須位于a元素內(nèi)容內(nèi)，并且必須設(shè)置img元素的ismap屬性。ismap意為is map，表示將圖像指定為圖像映射。坐標(biāo)數(shù)據(jù)發(fā)送的方法是在a元素的href屬性定義的URI地址后加一個(gè)問(wèn)號(hào)（？），問(wèn)號(hào)后面是坐標(biāo)數(shù)據(jù)，橫坐標(biāo)和縱坐標(biāo)用逗號(hào)隔開(kāi)，示例如下：
<a href="xxx.html?123,31">
<img src="images/icon.png" ismap width="100" height="100" alt="這是一張圖片"/>
</a>
-
使用input元素創(chuàng)建服務(wù)端圖像映射
使用input元素創(chuàng)建服務(wù)端圖像映射，input元素的type屬性必須為image。然后src屬性定義圖片文件位置，實(shí)際是一個(gè)表單提交按鈕。坐標(biāo)數(shù)據(jù)發(fā)送的方法是在form元素的action屬性定義的URI地址后加一個(gè)問(wèn)號(hào)（？），問(wèn)號(hào)后面是坐標(biāo)數(shù)據(jù)，橫坐標(biāo)和縱坐標(biāo)用and號(hào)(&)隔開(kāi),示例如下：
<form name="myform" method="GET" action="xxx.action?mymap.x=123&mymap.y=31">
<input type="image" name="mymap" src="images/icon.png">
</form>
-
客戶端圖像映射和服務(wù)端圖像映射混合
定義如下：
<a href="xxx.html?123,31">
<img src="images/icon.png" ismap width="100" height="100" usemap="#mymap" alt="這是一張圖片"/>
<map name="mymap">
<area shape="circle" coords="10,20,30" href="xx.html">
<area shape="rect"coords="35,35,25,25" href="xx2.html">
<area shape="poly" coords="12,73,45,57,79" href="xx3.html">
</map>
</a>
