HTML 圖像
HTML圖像
img 元素允許您將圖像嵌入到HTML文檔中。
它有局部屬性: src，alt，height，width，usemap，ismap 。
HTML5中的border，longdesc，name，align，hspace 和 vspace 屬性已過時。
要嵌入圖像，您需要使用 src 和 alt 屬性，如下所示。
<!DOCTYPE HTML>
<html>
<body>
<img src="http://www.eska-fuses.cn/style/download.png"
alt="Triathlon Image"
width="200"
height="67" />
</body>
</html> src 屬性指定圖像的URL。
如果無法顯示圖片，則 alt 屬性定義內(nèi)容。
width 和 height 屬性設(shè)置圖像大小(以像素為單位)。
圖像鏈接
img 元素的常見用途是結(jié)合 a 元素創(chuàng)建基于圖像的超鏈接。
以下代碼顯示了如何使用 img 和 a 元素。
<!DOCTYPE HTML>
<html>
<body>
<p>
<a href="http://eska-fuses.cn/page.html">
<img ismap src="http://www.eska-fuses.cn/style/download.png"/>
</a>
</p>
</body>
</html>如果將 ismap 屬性應(yīng)用于 img 元素，則可以創(chuàng)建服務(wù)器端圖像映射，這意味著您在圖像上單擊的位置將附加到URL。
例如，如果您從圖像的頂部點(diǎn)擊了4個像素，從左邊緣點(diǎn)擊了10個像素，瀏覽器將導(dǎo)航到以下內(nèi)容：
//eska-fuses.cn/page.html?10,4客戶端圖像映射
您可以創(chuàng)建客戶端圖像映射：單擊圖像中的不同區(qū)域會導(dǎo)致瀏覽器導(dǎo)航到不同的URL。
客戶端圖像映射的關(guān)鍵元素是 map 與局部屬性 name 。
如果使用 id 屬性，它必須具有與 name 屬性相同的值。
map 元素可以有一個或多個 area 元素。
每個區(qū)域元素標(biāo)記圖像中可以點(diǎn)擊的區(qū)域。
area 元素具有局部屬性: alt，href，target，rel，media，hreflang，type，shape，coords 。
rel，media和hreflang屬性是HTML5中的新特性。nohref屬性現(xiàn)在已過時。
- href - 點(diǎn)擊區(qū)域時瀏覽器應(yīng)加載的網(wǎng)址
- alt - 替代內(nèi)容。請參閱img元素上的相應(yīng)屬性。
- target - 應(yīng)顯示網(wǎng)址的瀏覽內(nèi)容。
- rel - 描述當(dāng)前文檔和目標(biāo)文檔之間的關(guān)系。
- media - 區(qū)域有效的介質(zhì)。
- hreflang - 目標(biāo)文檔的語言。
- type - 目標(biāo)文檔的MIME類型。
shape 和 coords 屬性一起工作。 coords 屬性取決于 shape 屬性的值。
rect
該值表示矩形區(qū)域。
coords屬性必須由四個逗號分隔的整數(shù)組成，表示與以下內(nèi)容的距離：- 圖像左邊緣到矩形左邊
- 圖像頂邊到矩形頂邊
- 圖像左邊緣到矩形右邊
- 圖像頂邊到矩形底邊
circle
該值表示圓形區(qū)域。
coords屬性必須由三個逗號分隔的整數(shù)組成，表示以下內(nèi)容：- 從圖像左邊緣到圓心的距離
- 從圖像頂邊緣到圓心的距離
- 圓的半徑
poly
此值表示多邊形。
coords屬性必須至少為六個逗號分隔的整數(shù)，每對表示多邊形上的一個點(diǎn)。default
此值是默認(rèn)區(qū)域，覆蓋整個圖像的其余部分。
將此值用于shape屬性時，不需要坐標(biāo)值。
以下代碼顯示如何使用圖像映射。
<!DOCTYPE HTML>
<html>
<body>
<p>
<img src="http://www.eska-fuses.cn/style/download.png" usemap="#mymap"/>
</p>
<map name="mymap">
<area href="a.html" shape="rect" coords="3,5,68,62" alt="test a" />
<area href="b.html" shape="rect" coords="70,5,130,62" alt="test b" />
<area href="c.html" shape="default" alt="test c" />
</map>
</body>
</html> img 元素上的 usemap 屬性將map元素與圖像相關(guān)聯(lián)。
更多建議：