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